WEBVTT 00:00:01.333 --> 00:00:03.803 I've written a program to tell you juicy details about 00:00:03.803 --> 00:00:07.469 Winston, but not too much because Winston likes to keep some 00:00:07.469 --> 00:00:11.870 mystery. That's just the Winston way. So, let's 00:00:11.870 --> 00:00:15.334 see how I did this program. I created some variables at the top to store bits of 00:00:15.334 --> 00:00:20.034 information about him. The first variable holds a number - his age - the second variable holds 00:00:20.034 --> 00:00:23.955 a string - his eyes - the third variable holds an array of strings, 00:00:23.955 --> 00:00:27.907 which are things he likes doing, and the last two variables hold 00:00:27.907 --> 00:00:31.566 strings which describe where he was born. Then 00:00:31.566 --> 00:00:35.940 down here, I wrote each of these out using the text command and just using the variable 00:00:35.940 --> 00:00:39.699 name. And of course for the array, I have to access each element of the array 00:00:39.699 --> 00:00:43.450 using bracket notation. Cool. Now, 00:00:43.450 --> 00:00:48.636 all five of these variables are describing information about the same thing: Winston 00:00:48.636 --> 00:00:51.598 But the variables don't know that they're about the same thing 00:00:51.598 --> 00:00:55.502 And, you know, in Javascript, when you wanna 00:00:55.502 --> 00:00:59.289 store multiple pieces of information that are related, we have a better way of 00:00:59.289 --> 00:01:03.125 storing them that's really cool, and it's called an object. 00:01:03.125 --> 00:01:06.795 So what it means is that instead of 5 variables, we can have a single 00:01:06.795 --> 00:01:11.623 variable that stores all this information, which is pretty cool. 00:01:11.623 --> 00:01:15.169 Let's try it out with Winston's information. First, we'll declare the 00:01:15.169 --> 00:01:18.837 variable and we'll call it Winston. And then 00:01:18.837 --> 00:01:23.399 we put an open curly bracket - make sure it's curly, not square - 00:01:23.399 --> 00:01:27.107 and a semicolon. So we've created an object 00:01:27.107 --> 00:01:31.047 but it has absolutely no information inside of it. 00:01:31.909 --> 00:01:35.668 So, to add a bit of information, we need to add properties. 00:01:35.668 --> 00:01:41.276 And each property is a key and a value. For example, age would be age: 19 00:01:41.276 --> 00:01:43.789 Okay. And then for eyes, we're gonna add a 00:01:43.789 --> 00:01:48.039 comma, and then eyes: "black". Okay, cool, 00:01:48.039 --> 00:01:52.742 so now Winston has two properties inside the object. 00:01:52.742 --> 00:01:55.607 Uh, for likes, we can just go likes: and then I'll 00:01:55.607 --> 00:02:00.076 just copy paste this from up here... and 00:02:00.076 --> 00:02:04.000 very nice. So let's look at this. Winston has three properties 00:02:04.000 --> 00:02:07.527 Every property has a key, which is what's on the right 00:02:07.527 --> 00:02:12.796 hand side, and a value, which is what's on the left-hand side. 00:02:12.796 --> 00:02:15.632 For the key, it should follow the same rules as Javascript 00:02:15.632 --> 00:02:20.099 variable names. No spaces, start it with a letter, all that 00:02:20.591 --> 00:02:22.960 For the value, it can be any type of value 00:02:22.960 --> 00:02:27.124 we've seen so far. It could be number, it could be a string, it could be an array 00:02:27.124 --> 00:02:33.373 It could even be a boolean, so we could add isCool: true, of course 00:02:34.126 --> 00:02:38.398 In fact, the value could even be another object. So, 00:02:38.398 --> 00:02:42.709 BirthCity and BirthState. Those really are bits of information about the same 00:02:42.709 --> 00:02:46.616 thing, which is a single location. And, so I think it be make 00:02:46.616 --> 00:02:51.042 more sense if we stored it as an object. I'll add another key, birthplace, 00:02:51.042 --> 00:02:54.836 and then for the value I'm gonna put my curly brackets again 00:02:54.836 --> 00:02:58.376 and then inside I'll have key for city, 00:02:58.376 --> 00:03:02.287 "Mountain View", and then state, 00:03:02.287 --> 00:03:06.766 "California". Great! So now you can see, you can really 00:03:06.766 --> 00:03:10.480 store very rich information inside an object. 00:03:11.033 --> 00:03:15.459 All right. So now that we have this nice object that describes all this information about Winston, 00:03:15.459 --> 00:03:18.783 let's try deleting those old separate variables 00:03:18.783 --> 00:03:23.066 that didn't know about each other. Okay 00:03:23.066 --> 00:03:27.039 Um, uh oh! Uh so now we've got an error. And that's because our 00:03:27.039 --> 00:03:30.739 text commands are referencing the old variables. We need to update 00:03:30.739 --> 00:03:34.502 them to use information from the object instead. Let's 00:03:34.502 --> 00:03:38.218 start with just commenting out the last three so that we can 00:03:38.218 --> 00:03:41.872 do one at a time. Okay. So it says WinstonAge 00:03:41.872 --> 00:03:46.396 right now. What we need to do is replace that, so we'll type 00:03:46.396 --> 00:03:50.293 winston, cause that's the variable name. Notice if we 00:03:50.293 --> 00:03:53.834 just leave it like that, it says object object. That's really 00:03:53.834 --> 00:03:57.369 gross. That's Javascript telling us that we're trying to turn an entire 00:03:57.369 --> 00:04:02.109 object into a string value. But instead, we really just 00:04:02.109 --> 00:04:06.134 wanna access only the age inside of it. So what we do is we put a 00:04:06.134 --> 00:04:11.063 dot, and then we write the property key, which is "age". 00:04:11.063 --> 00:04:14.897 Tada! We have the age. We call this "dot notation," 00:04:14.897 --> 00:04:18.284 which is where we write the variable name for the object, and then a dot, 00:04:18.284 --> 00:04:21.791 and then the property key. Okay, so we can 00:04:21.791 --> 00:04:26.244 go and do more now. Let's uncomment this, and then instead of Winston 00:04:26.244 --> 00:04:29.877 eyes, we'll just say winston dot eyes, and then 00:04:29.877 --> 00:04:34.074 for this one, it'll be winston dot likes, 00:04:34.074 --> 00:04:37.741 and then winston dot likes one, and then 00:04:37.741 --> 00:04:42.501 for this last one, it's a little more complicated because 00:04:42.501 --> 00:04:45.451 it's an object inside an object. So we're gonna say 00:04:45.451 --> 00:04:48.784 winston, and then dot, birthplace, 00:04:48.784 --> 00:04:53.288 but if we do that it's still just the whole object so then we have to say dot, 00:04:53.288 --> 00:04:57.455 city. Okay let's do this here... winston, 00:04:57.455 --> 00:05:01.572 dot, birthplace, dot, state. 00:05:01.572 --> 00:05:05.791 Tada! So it's really cool cause you can just reach down inside the objects 00:05:05.791 --> 00:05:09.416 that are in the objects. All right 00:05:10.863 --> 00:05:13.919 Awesome. So, as you can see, 00:05:13.919 --> 00:05:17.597 objects are a great way to store a bunch of related bits 00:05:17.597 --> 00:05:21.406 of information about an object, and then be able to access it later. 00:05:21.406 --> 00:05:25.406 And when you keep going, you're gonna find out just how awesome objects are!