Objects
Objects are the keystone to all of JavaScript. An object can hold all the variable information we talked about already, as well as more complicated structures like functions and even other objects.
Objects hold their information in properties, which are accessed with the dot modifier. That sounds like a lot, but it just means you use a period if you want to use something. You'll see in a moment.
Declaring an object
Just like other variables, you start with the keyword let and you use braces {} to tell the computer it's an object. Note
that the syntax looks a little different. When you set the properties up front like this, you are creating an object literal during initialization.
To create each property, name it like any variable, then put a regular colon :. After that, put the property's value, whatever it needs to be. If you're
going to add another property after than, then end the line with a comma , and go on to the next line. Add as many properties as you need. When you're finished, end with the closing
brace } and the semicolon ;.
Syntax:
- let objectName =
- {
- property1: value,
- property2: value,
- property3: value
- };
It would be a really good idea for you to type this stuff in and try it out...
Example:
Sidenote: The punctuation is different than you've seen before. Pay
close attention to how this is set up. You still start with let, a variable name, and an equals sign. You have braces to start and end the object. You have properties
that have to be named like regular variables. Those are followed by colons and the starting values. Each property ends with a comma, unless it's the last property you're adding.
Here's a possible student with properties created through initialization.
- let student =
- {
- name: "Dariak",
- age: 22,
- usesMagic: true
- };
This one's pretty easy, right? I'm using property names that are easy to understand. They need to be in camelCase too, as you may notice.
As a Boolean
In JavaScript, all objects are evaluated as true, even if it's an empty object,{}.
Accessing properties
In order to use these properties, we need ways to access each specific one we want to use. We have two ways of doing this, using the dot operator and array notation.
Dot operator
To access these properties, we use the dot operator. All that means is that we write the name of the object (student) put a dot (.) and then the property we want to access (age).
Example:
- student.age; //22
- //We can change this value if we want to, just like we can with any other variable.
- student.age += 1; //increases age by 1
- student.name = "Red Jade protagonist";
- //What would it display?
- console.log(student.name + " is " + student.age + " years old.");
- //"Red Jade protagonist is 23 years old."
Array Notation
Object properties can also be accessed by using array notation []. Like an array, you start with the name of the object and open a set of square brackets. Instead of an
index number, put the name of the property you're looking for.
Example:
- student["usesMagic"]; //true
Notice that the name of the property we're accessing is in quotes. That's very important. It means it's looking for student.usesMagic. Why do we need quotes? Why can't we say student[usesMagic]; instead (without
quotes)? Well, that's because if you don't use quotes, then JavaScript thinks you are using a variable.
Let's look at an example that uses a variable to access a property. Take it slowly, one part at a time. We're going to keep using that student object.
You can follow along in the console if you've been typing this all in.
- let propertyToAccess = "name";
- student[propertyToAccess]; //"Red Jade protagonist"
- propertyToAccess = "age";
- student[propertyToAccess]; //23
- propertyToAccess = "hobbies";
- student[propertyToAccess]; //undefined
Notice the command to show the property's value is the same all three times: student[propertyToAccess];. But we're changing the value of the variable propertyToAccess, so each time, it finds that
property.
String Properties
Typically, property names need to follow the standard naming rules for variables. It must start with a letter (or $ or _), can include a number, cannot include a space,
etc. However, JavaScript has a way of allowing you to bend these rules—or outright break them.
It is possible to create properties out of any string. You can't access these with the dot operator (unless they're a valid single word). However, you can use them with array notation.
Example:
Let's use this object to see what to do and what not to do.
- let rooms =
- {
- "living room": "a nice place with a sofa",
- "dining room": "let's eat",
- "13": "the scary room"
- };
These will work:
- //space inside quotes inside brackets works; "dining room" would work too
- rooms["living room"];
- //"a nice place with a sofa"
- //a number inside quotes inside brackets
- rooms["13"];
- //"the scary room"
- //this only works because of behind-the-scenes type conversion; it's best not to rely on this
- rooms[13];
- //"the scary room"
These will not work:
- //can't have spaces
- rooms.living room;
- //Uncaught SyntaxError: Unexpected identifier
- //can't use quotes or spaces
- rooms."dining room";
- //Uncaught SyntaxError: Unexpected string
- //can't start with numbers
- rooms.13;
- //Uncaught SyntaxError: Unexpected number
- //inside brackets, no spaces unless it's in quotes
- rooms[dining room];
- //Uncaught SyntaxError: Unexpected identifier
Dictionary
In some languages there are constructs called dictionaries. JavaScript doesn't have them, but we can use the object features of JavaScript to simulate them.
A dictionary is a key/value pair. It's like having a secret code with your friends where "goober" means "headache" and "fruit punch" means "fresh squeezed orange juice" or... well whatever you need. They could look up the code word in the dictionary (the key) and get back what it means (the value).
- let secretCode =
- {
- "goober": "headache",
- "fruit punch": "fresh squeezed orange juice"
- };
- secretCode["goober"]; //"headache"
One common use of dictionaries is to assign numbers to keyboard presses. Did you know that each key has its own value? That's why uppercase letters are different than lowercase; they have
different codes. You can set up a dictionary in JavaScript so we can use a word we know (like up for the up arrow) to represent the value the computer understands (like 38,
the value of the up arrow).
- let keyCodes =
- {
- left: 37,
- up: 38,
- right: 39
- down: 40
- };
- keyCodes.up; //returns 38, which the computer needs
Add and delete properties
What if you need to add more properties to the object later? There's an official way to do it, but this works too.
To add a property quickly, just assign it!
- student.eyeColor = "blue";
And that's it.
You can also delete a property if you have to.
Use the delete keyword and the property you want to delete.
- delete student.eyeColor;
- student.eyeColor; //undefined
Arrays inside objects
Objects can hold anything. They can have variables, like the ones we've seen. They can hold arrays, functions, and other objects. Each type works like it should if you use the dot operator. For example, if you have an array, you can use all the usual array methods.
- student.hobbies = [];
- student.hobbies.push("reading spell books");
- student.hobbies.push("gathering herbs");
- student.hobbies.length; //2
- student.hobbies[0]; //"reading spell books"
Objects inside objects
What is this, The Matrix? Yes, it's true. You can have an object inside an object inside an object inside an… oh you get the idea. It can go as far as you need it to go. Of course, if it gets too complex, it will be harder to use.
Let's say our student has a pet. We can add an object property like we did before because we already have a student object. I'll show you another way in a moment.
- student.pet =
- {
- name: "Monty",
- animal: "cat"
- };
Chaining properties
Now if it was just a pet object, we would use pet.name; to access the pet's name. But because pet itself is part of student,
we need to chain the properties together.
- student.pet.name; //"Monty"
What's different? More dots! Really, anytime you see a dot being used like this, it means the thing on the left of the dot is an object. The thing on the right of a dot is a property of that object. And yes, that property can be another object itself. So what does that line say? It says that the student has a pet property, and pet has a name property.
Initializing an object within an object
What if you want to create the object property when you initialize the main object? In other words, how can I set this all up at the beginning?
- let student =
- {
- name: "Dariak", //comma
- pet:
- {
- name: "Monty", //comma
- animal: "cat" //no comma
- }, //comma
- hobbies: [], //comma
- age: 22 //no comma
- };
First, take a look. I'm using whitespace to make the code easier to read. Notice the properties of student are all lined up on the left. The properties for pet follow the same idea, indented so they look like they're part of pet.
Next, look at the commas. At the end of every property, we put a comma. That's how we separate them from each other. The only time we don't put a comma is when it's at the end of the list of properties. It's like if you made any list in normal life: Cats, dogs, elephants, and cows are all animals. See? You don't end the list with a comma. It's the same idea here.
Why isn't there a comma after the animal: "cat" line? Well, that's a property of pet, remember, and it's the last pet property. Notice that the next line is the closing brace
} for the pet, and that has a comma! That's because pet is a property itself, and there's another property (hobbies) coming after it!
A note about the use of whitespace... It's important that you're able to read your code. Take the time to make use of whitespace to format things. There are sites on the internet (like jsfiddle.net) where you can paste your code in and "tidy" it up. Spacing things like this will help you to make sense of your code.
Or you could take that last object we created and take out all the whitespace to get this.
- let student={name:"Dariak",pet:{name:"Monty",animal:"cat"},
hobbies:[],age:22};
Sure, it's less space, but is it as clear to you? I can't imagine.