1
00:00:01,790 --> 00:00:05,860
Objects. They are really powerful data structures.

2
00:00:06,810 --> 00:00:12,270
And as you can see it's the second data structure that we're going to learn in Javascript.

3
00:00:12,270 --> 00:00:22,440
And as a matter of fact they are also a javascript type. Objects are collections of property. Well what

4
00:00:22,440 --> 00:00:23,270
does that mean?

5
00:00:24,410 --> 00:00:27,530
Let's take a look by trying to write an object.

6
00:00:27,530 --> 00:00:37,700
So to write an object I can have something like a user and curly brackets and within this we can say

7
00:00:37,820 --> 00:00:41,790
name equals "John".

8
00:00:42,170 --> 00:00:46,000
I can say H is "34".

9
00:00:46,050 --> 00:00:49,320
Hobby is "soccer".

10
00:00:50,900 --> 00:00:54,490
And maybe we can even put "is married" 

11
00:00:56,660 --> 00:01:00,390
to false and the comma at 

12
00:01:00,540 --> 00:01:03,440
the end here I can leave it off or add it,

13
00:01:03,460 --> 00:01:04,629
it works both ways.

14
00:01:05,770 --> 00:01:13,880
But now if I save this and refresh - let's see if we have the user object. Yep.

15
00:01:13,950 --> 00:01:20,820
Looks like we have "name: John age: 34 hobby: soccer is married: false".

16
00:01:20,990 --> 00:01:28,190
And you see over here that we have an object and it looks a little bit different from an array doesn't it?

17
00:01:28,220 --> 00:01:38,210
Because if we remember an array looked like this, "apple", "banana", "orange".

18
00:01:38,240 --> 00:01:47,100
So - an array if we refresh we have 'user' that looks like this and a 'list' that looks like this.

19
00:01:47,210 --> 00:01:57,280
If I open this up we see that we have a bit of a difference because an object is more dynamic

20
00:01:57,280 --> 00:02:00,000
I can have properties and value.

21
00:02:00,220 --> 00:02:12,770
So property 'name', value "John", property, 'age', value "34". With an array we had an index '0' which held "apple"

22
00:02:12,890 --> 00:02:17,720
and an index '1' which held "banana".

23
00:02:17,720 --> 00:02:18,680
Hmm interesting.

24
00:02:18,740 --> 00:02:19,000
OK.

25
00:02:19,010 --> 00:02:30,370
But how do I grab properties because with an array I could do 'list', grab the second element with '1'

26
00:02:30,940 --> 00:02:39,520
and I got a "banana". What with objects what you can do is you can say 'user.name',

27
00:02:39,690 --> 00:02:51,950
John. 'User.age', 34. 'User.hobby', soccer. And 'user.isMarried', false. OK.

28
00:02:52,250 --> 00:03:06,510
Now with an array we had methods like 'pop' or 'push' to change the array.

29
00:03:06,590 --> 00:03:08,740
We even had 'concat'.

30
00:03:09,210 --> 00:03:14,930
How can we add properties to an object? Well it's very simple.

31
00:03:14,930 --> 00:03:29,700
All we have to do is say something like 'user.favoriteFood' and I'll do equals and I'll do spinach.

32
00:03:29,890 --> 00:03:36,320
Now if I look at the user object I have favorite food,

33
00:03:36,320 --> 00:03:39,160
spinach.

34
00:03:39,230 --> 00:03:44,060
So we've just expanded the user object.

35
00:03:44,100 --> 00:03:44,730
What about this -

36
00:03:44,730 --> 00:03:53,000
Can I change to 'isMarried' to "true" to say our friend John over here just got married.

37
00:03:53,130 --> 00:04:01,510
Well, now if I go to user I have 'isMarried' to "true".

38
00:04:01,560 --> 00:04:02,940
Very cool.

39
00:04:02,940 --> 00:04:07,890
So you see the difference there between an array and an object.

40
00:04:07,890 --> 00:04:22,370
Now one question you might be having is, "Why isn't 'array' a javascript type but 'object' is? Well because

41
00:04:22,370 --> 00:04:32,120
in simplified terms technically an array is just something like this.

42
00:04:36,480 --> 00:04:44,040
We even saw it when we looked at the list that we have "0" goes to Apple.

43
00:04:44,040 --> 00:04:52,220
"1" equals to banana and "2" equals to orange. And you see what the power of data structures are

44
00:04:52,580 --> 00:04:54,020
in javascript.

45
00:04:54,080 --> 00:05:01,120
That idea of a desk drawer and in that drawer you don't want to have a mess you don't want to just put

46
00:05:01,130 --> 00:05:07,920
one thing, you want to have multiple things but you want them organized. So maybe you want the pens all

47
00:05:07,930 --> 00:05:12,420
organized in a section and the files organized in a different section.

48
00:05:12,830 --> 00:05:18,280
And as I mentioned data structures help us organize things better.

49
00:05:18,350 --> 00:05:26,570
So for example an array is really really good at maybe containing a shopping list or a To Do list.

50
00:05:27,140 --> 00:05:33,190
But an object might be really really good at containing something like user information.

51
00:05:34,000 --> 00:05:39,610
So if you think of a game - let's say you're building a game where you're controlling this wizard.

52
00:05:39,940 --> 00:05:48,050
Well this wizard - how tall the wizard is, how powerful it is, how many experience points it has.

53
00:05:48,250 --> 00:05:54,040
Well that would be really really good to put in an object because that wizard is an object.

54
00:05:54,040 --> 00:06:03,400
We need properties and values but maybe the spells that could be a list because we can just have a string

55
00:06:03,520 --> 00:06:07,050
of all the spells that the wizard would know.

56
00:06:07,090 --> 00:06:11,890
So does it mean that we can have arrays inside of objects?

57
00:06:12,010 --> 00:06:25,350
Yeah if the user was a wizard I can put 'spell' or 'spells' and I can do an array of all the spells

58
00:06:25,740 --> 00:06:35,340
"abracadabra" or "Shazam" or I can do "boo".

59
00:06:35,430 --> 00:06:39,800
So now I have an array inside a user.

60
00:06:40,080 --> 00:06:41,460
OK what about the other way around.

61
00:06:41,460 --> 00:06:48,310
Can I have a user inside of an array?

62
00:06:48,710 --> 00:06:49,480
Well, yeah you can.

63
00:06:49,640 --> 00:06:59,790
Let's say we wanted to have a list of users over an app for our website. We can have a list of objects

64
00:06:59,790 --> 00:07:01,710
where we have 'username'

65
00:07:06,960 --> 00:07:15,830
"Andy" who has 'password', "secret" and we can have

66
00:07:18,540 --> 00:07:28,310
'username', "Jess" that has the 'password' "123". Let's see this in action.

67
00:07:28,370 --> 00:07:37,370
I'm going to refresh and say 'list' and look at that. Within this list I have the first item with the

68
00:07:37,370 --> 00:07:38,520
username and password.

69
00:07:38,520 --> 00:07:44,500
And the second item username and password. So lists are really really good at

70
00:07:44,530 --> 00:07:52,240
well, making lists and those are arrays. And objects are really really good at containing objects. But

71
00:07:52,360 --> 00:07:54,520
how do we access them now?

72
00:07:55,000 --> 00:07:57,580
Well let's look at the user first.

73
00:07:57,670 --> 00:08:07,630
If I wanted to access a spell well I could do 'user.spells' and I'll get an array back but if I wanted

74
00:08:07,630 --> 00:08:10,050
to - let's say access "Shahzam"

75
00:08:10,450 --> 00:08:15,680
Well I would just do 'user.spells' and then because it's an array

76
00:08:15,730 --> 00:08:28,740
I get the second item by using '[1]' - "Shahzam". The other way around for the list I can say 'list' - the first

77
00:08:28,740 --> 00:08:35,320
item which is "Andy" and I want to get his password.

78
00:08:35,450 --> 00:08:37,409
Well I'll do 'password'.

79
00:08:37,770 --> 00:08:42,590
And now I get - well Andy misspelled his password, it's supposed to say "secret".

80
00:08:42,600 --> 00:08:45,930
But we get "secre".

81
00:08:46,180 --> 00:08:48,220
So that's how you access things.

82
00:08:48,570 --> 00:08:49,350
OK.

83
00:08:49,840 --> 00:08:51,480
One other question that I have.

84
00:08:51,850 --> 00:09:05,590
What if I wanted to say that this user John who's a wizard also can 'shout'. Maybe it can do some sort

85
00:09:05,590 --> 00:09:06,510
of an action.

86
00:09:06,640 --> 00:09:09,320
Can we add a function to an object?

87
00:09:09,580 --> 00:09:13,080
Yeah we can, all we have to do is do 'function'

88
00:09:13,120 --> 00:09:17,260
And you see the color changed, means we're doing something right.

89
00:09:17,260 --> 00:09:20,840
I can say 'function console.log'

90
00:09:24,380 --> 00:09:29,070
Shouting "Ah" let's save that and let's see that in action.

91
00:09:31,720 --> 00:09:35,940
'User' - make sure that we have the shout there yeah

92
00:09:35,960 --> 00:09:38,380
And look it has the "F" for 'function'.

93
00:09:38,900 --> 00:09:45,350
And now if I go 'user.shout' and remember I have to call the function.

94
00:09:45,770 --> 00:09:53,960
I get "AHHHHH!". Very cool. So I can have functions inside objects.

95
00:09:54,320 --> 00:10:00,680
And one thing you might notice is - hold on a second, I thought functions were supposed to say something

96
00:10:00,680 --> 00:10:03,120
like, you know,  alert.

97
00:10:03,330 --> 00:10:08,710
But this one we have 'user.shout'.

98
00:10:08,770 --> 00:10:16,240
So this is a little bit different than what we've seen before and this is actually called a method and

99
00:10:16,240 --> 00:10:18,250
this is another terminology that we're going to learn.

100
00:10:18,250 --> 00:10:23,110
But a function inside an object is a 'method'.

101
00:10:23,110 --> 00:10:29,500
So I can say that 'shout' is a 'method' of 'user'.

102
00:10:29,720 --> 00:10:42,090
Just like with an array like lists and if I do 'pop' - well 'pop' is a 'method' of 'list'.

103
00:10:42,230 --> 00:10:48,390
And another thing that you might have realize is 'console.log'.

104
00:10:48,620 --> 00:10:49,310
What do you think

105
00:10:49,370 --> 00:10:58,190
'log' is that we've been doing all this time? Well, 'console' as it turns out is just an object.

106
00:10:58,260 --> 00:11:06,300
Do you see that? 'console' has all these looks like method on it.

107
00:11:06,360 --> 00:11:10,180
So this entire time we've just been doing console.log.

108
00:11:10,400 --> 00:11:19,770
But I can also do - let's do 'info'. If I do console.info and I'll say "hello".

109
00:11:23,930 --> 00:11:24,850
I get "hello"

110
00:11:24,990 --> 00:11:26,220
Nothing changes.

111
00:11:26,220 --> 00:11:29,150
But what if we do something like 'error'.

112
00:11:29,340 --> 00:11:40,100
Well I can do 'console.error' and now - look at that, I get the error.

113
00:11:40,420 --> 00:11:46,690
So that's what methods are. They're functions inside an object.

114
00:11:46,700 --> 00:11:55,510
OK I have one last cool thing to show you and that is, "Can I do something like this?

115
00:11:57,450 --> 00:12:03,200
Can a user be an empty object?" Yep it works.

116
00:12:03,200 --> 00:12:09,170
So if I get 'user2' I just get the empty object and there's nothing really in it.

117
00:12:10,630 --> 00:12:10,940
OK.

118
00:12:10,960 --> 00:12:11,950
What about arrays?

119
00:12:11,950 --> 00:12:15,490
Can I do a list that is empty?

120
00:12:18,010 --> 00:12:24,050
Yep I can do a list that is empty.

121
00:12:24,210 --> 00:12:31,040
But as you can see I can't really use any properties in 'user2' because it has no properties.

122
00:12:31,920 --> 00:12:41,610
And I can't really access 'list[0]' or 'list2[0]', which is the empty one,

123
00:12:41,680 --> 00:12:44,130
Well because there's nothing in it right now.

124
00:12:46,200 --> 00:12:57,440
So this reminds us of when we don't declare a variable we get "undefined" but with an object and a list

125
00:12:57,500 --> 00:13:03,030
we can have something empty and it's not undefined. But there is one thing I want to show you.

126
00:13:03,230 --> 00:13:06,350
There can be an empty object.

127
00:13:06,350 --> 00:13:18,730
So if I do 'var' empty object, well it's an empty object but there is something called 'null'.

128
00:13:19,120 --> 00:13:33,030
And that is our sixth datatype and 'null' is a special type that just says that an object is null.

129
00:13:33,040 --> 00:13:34,530
So let's see what that means.

130
00:13:34,600 --> 00:13:39,640
If I look at empty object I get an empty object.

131
00:13:39,970 --> 00:13:46,920
If I get a 'null' object it returns null.

132
00:13:46,960 --> 00:13:54,850
So this is a special character that we'll get into later on in the lessons but it just means that there

133
00:13:54,850 --> 00:13:57,190
is nothing in this object.

134
00:13:57,190 --> 00:14:09,150
If I go 'null0bj.name = Andy'

135
00:14:09,340 --> 00:14:13,230
I can't set property name of null.

136
00:14:13,400 --> 00:14:22,430
But if I do that for an empty object which is just an empty object, well I can say the name

137
00:14:22,790 --> 00:14:27,300
equals Andy

138
00:14:27,370 --> 00:14:30,400
And look I have Andy.

139
00:14:30,610 --> 00:14:32,230
So that's what a 'null' object is

140
00:14:32,290 --> 00:14:40,140
It is empty, completely empty and well right now it kind of looks useless like we don't need it.

141
00:14:40,150 --> 00:14:44,580
But I'll show you cases where this is important for us.

142
00:14:44,590 --> 00:14:46,930
OK that was a whole lot of stuff.

143
00:14:47,020 --> 00:14:51,870
But you've actually learnt so much in javascript.

144
00:14:51,990 --> 00:14:59,550
This is pretty much I would say 80 percent of what you need to know in javascript to work professionally

145
00:14:59,670 --> 00:15:05,650
and it sounds like we didn't cover that much or maybe to some it may feel like we covered a lot.

146
00:15:05,670 --> 00:15:12,390
But in terms of syntax just looking at this we've only learned a few words and a few ways of doing things.

147
00:15:13,470 --> 00:15:20,190
With this newfound power I'm going to show you how we can build a simple Facebook with what we just

148
00:15:20,190 --> 00:15:20,780
learned.

149
00:15:22,630 --> 00:15:23,730
I'll see you in the next video. Bye-bye