1
00:00:01,333 --> 00:00:03,803
I've written a program to tell you juicy details about

2
00:00:03,803 --> 00:00:07,469
Winston, but not too much because Winston likes to keep some

3
00:00:07,469 --> 00:00:11,870
mystery. That's just the Winston way. So, let's

4
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

5
00:00:15,334 --> 00:00:20,034
information about him. The first variable holds a number - his age - the second variable holds

6
00:00:20,034 --> 00:00:23,955
a string - his eyes - the third variable holds an array of strings,

7
00:00:23,955 --> 00:00:27,907
which are things he likes doing, and the last two variables hold

8
00:00:27,907 --> 00:00:31,566
strings which describe where he was born. Then

9
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

10
00:00:35,940 --> 00:00:39,699
name. And of course for the array, I have to access each element of the array

11
00:00:39,699 --> 00:00:43,450
using bracket notation. Cool. Now,

12
00:00:43,450 --> 00:00:48,636
all five of these variables are describing information about the same thing: Winston

13
00:00:48,636 --> 00:00:51,598
But the variables don't know that they're about the same thing

14
00:00:51,598 --> 00:00:55,502
And, you know, in Javascript, when you wanna

15
00:00:55,502 --> 00:00:59,289
store multiple pieces of information that are related, we have a better way of

16
00:00:59,289 --> 00:01:03,125
storing them that's really cool, and it's called an object.

17
00:01:03,125 --> 00:01:06,795
So what it means is that instead of 5 variables, we can have a single

18
00:01:06,795 --> 00:01:11,623
variable that stores all this information, which is pretty cool.

19
00:01:11,623 --> 00:01:15,169
Let's try it out with Winston's information. First, we'll declare the

20
00:01:15,169 --> 00:01:18,837
variable and we'll call it Winston. And then

21
00:01:18,837 --> 00:01:23,399
we put an open curly bracket - make sure it's curly, not square -

22
00:01:23,399 --> 00:01:27,107
and a semicolon. So we've created an object

23
00:01:27,107 --> 00:01:31,047
but it has absolutely no information inside of it.

24
00:01:31,909 --> 00:01:35,668
So, to add a bit of information, we need to add properties.

25
00:01:35,668 --> 00:01:41,276
And each property is a key and a value. For example, age would be age: 19

26
00:01:41,276 --> 00:01:43,789
Okay. And then for eyes, we're gonna add a

27
00:01:43,789 --> 00:01:48,039
comma, and then eyes: "black". Okay, cool,

28
00:01:48,039 --> 00:01:52,742
so now Winston has two properties inside the object.

29
00:01:52,742 --> 00:01:55,607
Uh, for likes, we can just go likes: and then I'll

30
00:01:55,607 --> 00:02:00,076
just copy paste this from up here... and

31
00:02:00,076 --> 00:02:04,000
very nice. So let's look at this. Winston has three properties

32
00:02:04,000 --> 00:02:07,527
Every property has a key, which is what's on the right

33
00:02:07,527 --> 00:02:12,796
hand side, and a value, which is what's on the left-hand side.

34
00:02:12,796 --> 00:02:15,632
For the key, it should follow the same rules as Javascript

35
00:02:15,632 --> 00:02:20,099
variable names. No spaces, start it with a letter, all that

36
00:02:20,591 --> 00:02:22,960
For the value, it can be any type of value

37
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

38
00:02:27,124 --> 00:02:33,373
It could even be a boolean, so we could add isCool: true, of course

39
00:02:34,126 --> 00:02:38,398
In fact, the value could even be another object. So,

40
00:02:38,398 --> 00:02:42,709
BirthCity and BirthState. Those really are bits of information about the same

41
00:02:42,709 --> 00:02:46,616
thing, which is a single location. And, so I think it be make

42
00:02:46,616 --> 00:02:51,042
more sense if we stored it as an object. I'll add another key, birthplace,

43
00:02:51,042 --> 00:02:54,836
and then for the value I'm gonna put my curly brackets again

44
00:02:54,836 --> 00:02:58,376
and then inside I'll have key for city,

45
00:02:58,376 --> 00:03:02,287
"Mountain View", and then state,

46
00:03:02,287 --> 00:03:06,766
"California". Great! So now you can see, you can really

47
00:03:06,766 --> 00:03:10,480
store very rich information inside an object.

48
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,

49
00:03:15,459 --> 00:03:18,783
let's try deleting those old separate variables

50
00:03:18,783 --> 00:03:23,066
that didn't know about each other. Okay

51
00:03:23,066 --> 00:03:27,039
Um, uh oh! Uh so now we've got an error. And that's because our

52
00:03:27,039 --> 00:03:30,739
text commands are referencing the old variables. We need to update

53
00:03:30,739 --> 00:03:34,502
them to use information from the object instead. Let's

54
00:03:34,502 --> 00:03:38,218
start with just commenting out the last three so that we can

55
00:03:38,218 --> 00:03:41,872
do one at a time. Okay. So it says WinstonAge

56
00:03:41,872 --> 00:03:46,396
right now. What we need to do is replace that, so we'll type

57
00:03:46,396 --> 00:03:50,293
winston, cause that's the variable name. Notice if we

58
00:03:50,293 --> 00:03:53,834
just leave it like that, it says object object. That's really

59
00:03:53,834 --> 00:03:57,369
gross. That's Javascript telling us that we're trying to turn an entire

60
00:03:57,369 --> 00:04:02,109
object into a string value. But instead, we really just

61
00:04:02,109 --> 00:04:06,134
wanna access only the age inside of it. So what we do is we put a

62
00:04:06,134 --> 00:04:11,063
dot, and then we write the property key, which is "age".

63
00:04:11,063 --> 00:04:14,897
Tada! We have the age. We call this "dot notation,"

64
00:04:14,897 --> 00:04:18,284
which is where we write the variable name for the object, and then a dot,

65
00:04:18,284 --> 00:04:21,791
and then the property key. Okay, so we can

66
00:04:21,791 --> 00:04:26,244
go and do more now. Let's uncomment this, and then instead of Winston

67
00:04:26,244 --> 00:04:29,877
eyes, we'll just say winston dot eyes, and then

68
00:04:29,877 --> 00:04:34,074
for this one, it'll be winston dot likes,

69
00:04:34,074 --> 00:04:37,741
and then winston dot likes one, and then

70
00:04:37,741 --> 00:04:42,501
for this last one, it's a little more complicated because

71
00:04:42,501 --> 00:04:45,451
it's an object inside an object. So we're gonna say

72
00:04:45,451 --> 00:04:48,784
winston, and then dot, birthplace,

73
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,

74
00:04:53,288 --> 00:04:57,455
city. Okay let's do this here... winston,

75
00:04:57,455 --> 00:05:01,572
dot, birthplace, dot, state.

76
00:05:01,572 --> 00:05:05,791
Tada! So it's really cool cause you can just reach down inside the objects

77
00:05:05,791 --> 00:05:09,416
that are in the objects. All right

78
00:05:10,863 --> 00:05:13,919
Awesome. So, as you can see,

79
00:05:13,919 --> 00:05:17,597
objects are a great way to store a bunch of related bits

80
00:05:17,597 --> 00:05:21,406
of information about an object, and then be able to access it later.

81
00:05:21,406 --> 00:05:25,406
And when you keep going, you're gonna find out just how awesome objects are!