Objects

[00:00:00]
>> WebDevSimplified: Now, similarly to arrays, objects are great for storing a collection of data that's all related to each other. So an array is a list of data that starts at a point and ends at a point. An object is a collection of data that all references one thing. An example here, let's say I have a name, an age, and a favorite number. That kind of all encompasses a person. And normally if I wanted to define that with just normal variables, I have separate variables, but they're not really related to one another.

[00:00:24]
This is where the idea of objects come in. I can create a person object and give it the properties of name, age, and favorite number, and now those are all stored together inside of one single variable. So let's look at how we actually create an object. It's very similar to how we create any normal variable. You can define it, for example, let or const won't matter. Then we can define the name of this.

[00:00:44]
In our case, this is a person variable, and then we set that equal sign. This looks like creating any other variable. Now if we'd use a normal variable like 5, that's fine. An array would be those brackets of square brackets. An object uses curly brackets to create its variable definitions. And inside these curly brackets, generally it's going to be on another line, but you can do it in one line if you want.

[00:01:04]
You then define each individual property as a key value pair. So you can almost think about we have a box with a label of person. And inside that box we're going to put a bunch of other boxes that have their own labels. So I want to put a name box and an age box and a favorite number box. So to define these different properties or boxes, we give them a name, whatever we want. This one is going to be called name, and you follow that up by a colon.

[00:01:27]
So we name whatever we want our property to be, follow it up by a colon, and then we specify a value after that, which in our case is going to be Kyle. So now we have an object with one single property called name and that value is Kyle. We can even log out this person. And if we look on the right hand side of our screen, you can see we have an object with the name of Kyle, and if we expand that, we can kind of see it a little bit more in depth, which is great when we have larger, more complicated objects.

[00:01:53]
Generally, you want to have multiple properties for your object though. So what you do is you separate them by a comma. So we put a comma after our property, and now we can define a brand new property. Again, usually you're going to do this on a brand new line. So let's come in here. Now let's say we wanted to define like an age property, for example. This one's going to be a number. It doesn't matter if you have a string value, a number or a boolean.

[00:02:12]
You can put whatever value you want in here just like arrays can have whatever value they want. Now when we save, you can see we now have this new object that has an age of 30 and a name of Kyle, and we can go a step further by adding in, for example, a favorite number and let's just say the favorite number is 3, and now we have that object that contains all of those different values inside of it.

[00:02:33]
You can make this object as complex as you want. You can have 100 different properties, or you could have just one single property. It's really up to you how you want to create your object. And if you wanted, you can also put your object on the same line. So for example, I could write my code like this, and it's going to work exactly the same. This is giving me the exact same thing, and if I wanted to define my properties in line, I could come in like this, and again, that's still going to work just fine.

[00:02:56]
Generally though, this is a little bit harder to read, which is why when I create my objects, I generally do them on multiple lines like this. And that makes my code a little bit easier to read what's going on for my object. So the big difference between objects and arrays, objects is storing a collection of data related to one thing, and an array is storing a list of data for something. Now if we scroll down here a little ways, we need to talk about how do we get those properties from an object.

[00:03:21]
In arrays we use that square notation and pass it in an index, but since an object has a name for everything, for example, we have a name property and an age property, we can just access those directly by using the dot notation. So we take the name of our object, which is person, put a dot afterwards, and now you can see we actually have autocomplete in our text editor. We have the ability to access the age and the name because those are the properties on our object.

[00:03:43]
So whenever you want to get the property of an object, put a period or a dot after that object name, and then type in the thing you want to get. So now you can see it logs out Kyle, or I could change this to age and it logs out 30. So you can see we can swap between these things relatively easily. So with arrays, you use that bracket notation and put a number inside of it, while with objects you put a period followed by the actual name of the property you want to access.

[00:04:07]
Now we can also add functions to an object as well. Let's say I want to create a function called sayHi. You can see it follows the exact same format. I give it a name, whatever that property name is, followed by a colon, and then I pass in my function. And this function doesn't need to have a name because the name is already right here. It's sayHi. So you can see I'm passing along a function with a particular value inside of it, and I can use that function.

[00:04:29]
So if we just copy this code and take a look at what that would look like, and I say, you can see it prints out hi because we're calling sayHi. So again, we're accessing that function by using that dot notation and it says it's a function, we need to call it, so we use these parentheses, and then we're inside this function and it prints out hi. There's also an alternative shorter way to write out functions inside of JavaScript objects, and that is just writing the name of the function followed by your parentheses, and then you wrap your brackets around it.

[00:04:56]
So essentially you just take a function and cut the function keyword off of it. That's the exact same way you do it. And this is generally in JavaScript how you'll see functions attached to objects. It's a little bit easier and shorter to write out your code that way. And something that's a little bit interesting is we've actually been dealing with objects with functions this entire time. Think about console.log.

[00:05:16]
There's an object called a console inside of JavaScript, and it has a function on it called log. You can almost think of it looking like this code right here. We have a const object called console set to an object that has this log method directly inside of it. So we've already been dealing with objects this entire time. Any time in JavaScript that you see something followed by a dot, that means you're referencing a property on an object.

[00:05:38]
And this is all over the case in JavaScript. JavaScript objects are by far the most common type you're going to be using, so you're going to see this everywhere, even when you don't expect it. Now there's one alternative way to access properties inside of an object, and that is with that bracket notation we saw with arrays. So let me just copy this, bring it over real quick, and we have a car. This car has a make and a model property on it, and normally if you want to access that, you would just say dot, followed by whatever the thing you want to access, say dot make, dot model.

[00:06:07]
But you can also use this bracket notation, and it works very similarly. You use an opening and a closing bracket with no period at all, and then all you do is you pass in a string, which is the string of whatever property you want. So if we want to get the make, we pass make. If we want to get the model, we pass in the model. Now I would recommend not writing your code like this because first of all, you don't get any autocomplete inside of here.

[00:06:27]
Well I guess you do sometimes, but normally you don't always get autocomplete. Also, it's much more cumbersome and difficult to look at code like this. I don't really know what's going on, so this dot notation is always the preferred way to access object properties. But you may be wondering, OK, why are there two ways to do this thing if there's one that's clearly preferred over the other, and that is specifically when you have to deal with objects that have dynamic properties.

[00:06:52]
So here I have a variable called property which is set to make, and I can actually use that variable inside this bracket notation so I can access properties dynamically. So let's take a look at what that looks like. We'll say this property is equal to make and now down here I can just pass in that property and it'll use whatever this string is to get that property. So you can see this will print out Nissan, and if I change this to model, you can see we get 370Z, so it's easily able to swap between these different types of things by using a dynamic property.

[00:07:21]
It's not something you're going to see all that often, but I do want to bring it up because it does show up in code occasionally. For the most part though, you're going to see code for objects that looks something like this to access the make or model or other properties on an object. Now just like with arrays, you can do nesting inside of objects as well. So let's bring this over so it's a little easier to see, and you can see we have an object with a lot of different properties on it.

[00:07:46]
Make this a little larger. We have a person with a name, pretty straightforward. It's a normal key with a value that's a string. But now we have an address, and that address is just another object. So just like with arrays, you can nest arrays in each other. Objects can also be nested inside of each other. So to do that, you just use the same curly bracket syntax to create a new object and start giving in its very own parameters.

[00:08:06]
And the nice thing is that Prettier will automatically format your code, so if I save, you can see it's indented properly for me, so it makes it easy for me to see. OK, here is all the address related properties, for example, here is all the stuff related to my person and it's easy to see. Also, you can nest arrays inside of objects, and you can even put objects inside of arrays. The nice thing is they're very flexible.

[00:08:26]
You can pass anything in you want for the values of arrays or objects. So here we have an array of random different hobbies, and I'm able to access all these properties. For example, person.name gives me the name. If I want to access nested objects, I would first use person.address. That gives me this address object right here, and we already know to access the property of an object you use dot notation.

[00:08:49]
So I just put dot street at the very end of my address. And then same thing here for arrays. Person.hobbies returns to me this array with two values in it. So to get the values from it, I just use that bracket notation just like I would with any normal array. So you can nest these things however you want, but the important thing to realize is that even though this looks much more complicated, it's just a bunch of different pieces we're already used to just put inside of each other, but they all work the same as we would normally expect them to work.

[00:09:12]
Now I'm just going to give you a quick practice exercise again because since objects are so important, I want you to understand how to build them. I want you to create an object called book. I want it to have the property of title, a property of author, which is an object that contains a first name and a last name. I want a property yearPublished, which is going to be the year the book was published, and also a function called publish that'll print the message publishing your book.

[00:09:41]
Awesome. So let's actually take a look at how we would actually build that out. We'll pop up in a solution here and you can see we have an object we called it book, and we just gave a key of title followed by that colon and then the string, whatever the book title you want to have. For our author, this one's a little bit more confusing because now we have an object nested in another object. So just remember for this one you need the opening and the closing curly braces to actually nest that object inside of each other.

[00:10:04]
Otherwise it works exactly like a normal object, we can give it firstName, whatever, lastName, whatever. And an important thing to note when you're calling the property names for things in an object, use the same naming syntax you would for a variable. So here you can see the first word is going to be lowercase. Every word after that starts with a first capital letter at the beginning, same exact like if you created a variable, same naming system.

[00:10:24]
YearPublished, this one, the only difference is that we're using a number here. And then finally for that publish function, I ended up going with the shorthand version. You can do it either way, whichever you prefer. You can see we have publish followed by those parentheses, then the curly brackets, then the code for it. Finally, the ending curly bracket at the end here, and this gives us that full book object.