Exercises to practice common ways of using objects in JavaScript.
- Fork this repository
- Use
git clone
to clone your forked repository to your computer - Create a new branch so you can ask for feedback
- Start working on the exercises in the
exercises/
directory - Push your branch up to GitHub
- When you're ready for feedback, submit a pull request (PR) against your branch and your
master
. In the PR, tag any instructors you want to ask for feedback.
In JavaScript, objects and dictionaries are the same thing. In other languages, there's a sharp distinction between the two.
So, remember: read the dictionary section of the JS Crash Course!
Even if you feel comfortable creating, accessing, and modifying objects, go through this exercise and treat it like a mini-quiz. If you really understand how to do all the above, this exercise should take no more than 2-3 minutes.
From the command line, run printUserInfo.js
:
node exercises/printUserInfo.js
You will be prompted to open exercises/printUserInfo.js. Modify the code inside so that it prints out something like the following:
$ node exercises/printUserInfo.js
Hello, James Ford!
How's the weather in Jasper, Alambama?
I see you're 50 years old. When's your birthday?
$
You're free to use values other than 'James'
, 'Ford'
, etc. These are just examples. Keep in mind if you push this code to GitHub it will be publicly visible, so don't include personal details.
- Add a property to the
user
object calledfavoriteFood
. Use anif/else
statement to print out a few different messages depending on what value you assign to thefavoriteFood
property. - Add a property to the
user
object calledfavoriteMovies
and print them out likefavoriteSongs
. - Create a function called
printFavorites
that takes in any list of favorites things (songs, movies, etc.) and prints them out as a numbered list. Modify the code so that the parts that print outfavoriteSongs
andfavoriteMovies
useprintFavorites
to do print out the list.
If we want to represent something like a "user" or a "product" or a "school" in our code, we need some way to group many associated values together.
For example...
- A user might have a first name, last name, email address, location, etc.
- A product might have a brand, color, price, etc.
- A school might have a name, a list of students enrolled, a list of courses it offers, etc.
Arrays are capable of doing all of the above, but they're less than ideal. We're going to implement the same basic program using both arrays and objects to why we'd want something like objects.
To get started, run storeWithArrays.js
in the exercises/
directory.
-
Implement
userCanAffordSofa
. Add some more users and play with the price of the sofa to ensure the code works as expected. -
Add support for keeping track of a user's email address. This will be an additional argument to
newUser
. -
If a user is able to buy the sofa in question, print out a message along the lines of:
We will be emailing you at <email address>.
where
<email address>
is something likemindy@example.com
,jesse@example.com
, etc. Every user should have a different email address.
Next, run storeWithObjects.js
in the exercises
directory. Implement the exact same set of features in this file as you did in storeWithArrays.js
using objects instead of arrays.
So, for example, rather than supporting an email address by adding an extra element to the array that represents a user, you should add an extra property with a helpful name (like email
or emailAddress
).
Pay attention to:
- What's easier? What's harder?
- What feel more natural to write? To read?
- If someone saw the
userCanAffordSofa
function in isolation, would the version with arrays or objects be more self-explanatory? Why or why not? - Which version was easier to add support for an additional property?
- Which version do you think is more or less likely to have bugs introduced as more changes are added? Why?
In these exercises we've been accessing object properties using the following syntax:
let person = {};
person['firstName'] = 'Jesse';
person['lastName'] = 'Farmer';
console.log(`Hello, ${person['firstName']} ${person['lastName']}!`);
We did this to mirror the syntax you'd use for arrays. However, there's a more commonly used syntax:
let person = {};
person.firstName = 'Jesse';
person.lastName = 'Farmer';
console.log(`Hello, ${person.firstName} ${person.lastName}!`);
And in the same way that you can create an array with an array literal:
let names = [
'Jesse',
'Alfred',
'Erin',
'Stacey',
];
You can create an object with an object literal:
let person = {
firstName: 'Jesse',
lastName: 'Farmer',
};
In general, the person.firstName
syntax is what you'll see used most often. However, there are two scenarios where the person['firstName']
syntax is necessary.
-
The property name contains characters that can't appear in a JavaScript variable name. This is perfectly valid, for example:
person['01234'] = 'meow';
Using
person.01234
would result in a syntax error, so we have to useperson['01234']
. -
The property name we're interested in is supplied dynamically. For example:
let readlineSync = require('readlineSync'); let user = { firstName: 'Jesse', lastName: 'Farmer', }; // Prompt the user, who would type something like 'firstName' let dynamicPropertyName = readlineSync.question('What property do you want to see? '); let propertyValue = user[dynamicPropertyName]; console.log(`You wanted to see ${dynamicPropertyName}. The value is ${propertyValue}.`);
We couldn't type, say,
user.dynamicPropertyName
, because that'd be looking for the property whose name was literally'dynamicPropertyName'
, not the property whose name is the value of thedynamicPropertyName
variable.