Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,270 --> 00:00:06,180
So up till now you would have heard me talk about objects and using the object's properties or methods.
2
00:00:06,180 --> 00:00:13,320
But let's really truly dig in and understand exactly what Javascript objects are and how we can use
3
00:00:13,320 --> 00:00:15,570
them to dominate the web.
4
00:00:15,570 --> 00:00:21,070
Now let's say that you've just inherited a hotel and you're in charge of running it. Now
5
00:00:21,090 --> 00:00:25,820
when you arrive the first thing you notice is that there's a whole load of bags that are in the lobby
6
00:00:26,010 --> 00:00:29,490
and you've got guests who are checking in and leaving their luggage.
7
00:00:29,490 --> 00:00:30,810
So what do you need?
8
00:00:30,810 --> 00:00:31,800
You need a bellboy,
9
00:00:31,830 --> 00:00:32,480
right?
10
00:00:32,490 --> 00:00:35,560
So let's go ahead and employ our first bellboy.
11
00:00:35,580 --> 00:00:37,170
His name is Timmy.
12
00:00:37,170 --> 00:00:41,470
Now in addition to his name there's a number of other things that you need to know from your bellboy.
13
00:00:41,490 --> 00:00:43,640
So let's quiz him. All right Timmy,
14
00:00:43,650 --> 00:00:44,660
you can drop the suitcase
15
00:00:44,670 --> 00:00:46,470
now. What is your name?
16
00:00:46,470 --> 00:00:48,190
My name is Timmy.
17
00:00:48,840 --> 00:00:54,460
So we could create a variable to capture this data and we can call it bellBoy1Name.
18
00:00:54,450 --> 00:00:57,840
Now, as we keep quizzing him, say what is your age,
19
00:00:57,930 --> 00:00:59,790
do you have a work permit,
20
00:01:00,000 --> 00:01:01,620
what languages do you speak,
21
00:01:01,620 --> 00:01:06,060
we can start capturing and saving all of this data by creating a whole bunch of variables.
22
00:01:06,090 --> 00:01:11,640
So that means if we were to instruct our bellboy to greet a guest, then we could write our line of code
23
00:01:11,640 --> 00:01:12,830
like this: alert
24
00:01:12,870 --> 00:01:16,410
("Hello, my name is " + bellBoy1Name).
25
00:01:16,470 --> 00:01:19,640
So this would create a pop up saying "Hello, my name is Timmy".
26
00:01:19,740 --> 00:01:23,190
So up till now we should be very familiar with this kind of syntax.
27
00:01:23,250 --> 00:01:29,580
But let's say that we're really good at running hotels and it gets completely booked out and we're effectively
28
00:01:29,580 --> 00:01:31,720
swamped with guests and luggage.
29
00:01:31,860 --> 00:01:33,760
Now Timmy can't manage by himself.
30
00:01:33,870 --> 00:01:38,040
So let's employ some other bellboys, bellboy two and bellboy three.
31
00:01:38,070 --> 00:01:45,570
Now if we were to go through this process of creating var bellBoy2Name = "Jimmy" etc. etc., it
32
00:01:45,570 --> 00:01:47,060
will take for ever.
33
00:01:47,160 --> 00:01:48,800
So what can we do instead?
34
00:01:48,930 --> 00:01:54,480
Well in real life this information might be better represented by a table or an Excel spreadsheet like
35
00:01:54,480 --> 00:02:00,360
this because we need to know the same properties for each of the bellboys. We can simply just create
36
00:02:00,420 --> 00:02:07,140
a number of rows that represent each of the properties and as we recruit new bellboys we just fill in
37
00:02:07,140 --> 00:02:10,560
the values of each and every property.
38
00:02:10,590 --> 00:02:15,750
Now in Javascript we can create something really similar to this by simply creating an object.
39
00:02:15,780 --> 00:02:22,650
So we would create a variable that's called bellBoy1, and it would have a number of properties that
40
00:02:22,650 --> 00:02:28,420
will assign values and all of these properties are enclosed inside a set of curly braces.
41
00:02:28,420 --> 00:02:31,830
Now inside here we could simply say name is Timmy,
42
00:02:31,900 --> 00:02:35,090
age is 19, has work permit is true,
43
00:02:35,190 --> 00:02:36,440
languages are
44
00:02:36,480 --> 00:02:41,620
this array of languages. Now that alert might look like this.
45
00:02:41,850 --> 00:02:43,600
So, "Hello, my name is "
46
00:02:43,640 --> 00:02:50,990
+ bellBoy1, which is the name of the object, .name. And we are using the dot to access the property
47
00:02:51,000 --> 00:02:56,730
that's called name. And this would create an alert that says "Hello, my name is Timmy", but our data is now
48
00:02:56,730 --> 00:03:02,640
far more structured and it's much less likely that we'll make an error when we're assigning names and ages
49
00:03:02,760 --> 00:03:09,220
to our new bellboys. And by doing this, we effectively just created a Javascript object.
50
00:03:09,230 --> 00:03:15,630
Now if we were to create a housekeeper object, then the properties that we define probably will be quite
51
00:03:15,630 --> 00:03:16,420
different.
52
00:03:16,440 --> 00:03:18,160
We might be interested in things like
53
00:03:18,170 --> 00:03:20,980
how long have you worked as a housekeeper,
54
00:03:21,000 --> 00:03:23,700
which other hotels have you worked at, or
55
00:03:23,700 --> 00:03:27,870
which kind of cleaning tasks are you happy to do. So for different objects,
56
00:03:27,870 --> 00:03:32,180
we will create different properties depending on what is relevant to that object.
57
00:03:32,280 --> 00:03:38,340
So I want you to have a go at creating objects. So head over to the Sources tab inside the Chrome Developer
58
00:03:38,340 --> 00:03:38,890
Tools, and
59
00:03:39,060 --> 00:03:46,010
I want you to create a new object that is houseKeeper1, and she needs to have a number properties,
60
00:03:46,320 --> 00:03:51,480
so depending on what you think might be relevant properties for a housekeeper, then go ahead and just add
61
00:03:51,510 --> 00:03:53,230
those to that object.
62
00:03:53,440 --> 00:03:56,810
So pause the video now and see if you can complete this challenge.
63
00:03:58,040 --> 00:04:04,160
All right. So we're creating a new object, and we do that the same way that we create new variables.
64
00:04:04,180 --> 00:04:08,260
We start off with a keyword var and then we give our object a name.
65
00:04:08,260 --> 00:04:16,090
So in our case we're just calling ours houseKeeper1. And then we're going to set it to equal,
66
00:04:16,090 --> 00:04:22,090
but instead of just giving it a value as we've done before, we're going to give it a number of properties,
67
00:04:22,390 --> 00:04:26,900
and all of those properties are enclosed inside a set of curly braces.
68
00:04:26,920 --> 00:04:34,810
Now the first property the housekeeper might have is say years of experience and she's got 12 years
69
00:04:34,810 --> 00:04:35,890
of experience.
70
00:04:36,070 --> 00:04:42,220
So the left hand side is the name of the property and you can name it whatever it is that you want and
71
00:04:42,220 --> 00:04:46,460
a good idea is to follow the rules of convention of naming Javascript variables,
72
00:04:46,540 --> 00:04:52,870
so all of those things about camel casing, as well as not using numbers to begin with, apply here as well.
73
00:04:53,020 --> 00:04:56,480
Effectively when we're creating properties inside objects,
74
00:04:56,680 --> 00:05:03,010
we're just creating a variable that's associated with another variable, and of course you can assign
75
00:05:03,010 --> 00:05:04,510
it any value you wish,
76
00:05:04,510 --> 00:05:08,800
a number, a string, an array, whatever it is that you want.
77
00:05:08,830 --> 00:05:13,190
So let's say our housekeeper has years of experience and has a name.
78
00:05:13,240 --> 00:05:14,850
Let's call her Jane.
79
00:05:14,890 --> 00:05:22,720
Then she can have an array called cleaning repertoire and this could be an array that has things like
80
00:05:22,890 --> 00:05:24,640
she's happy cleaning the bathroom,
81
00:05:24,640 --> 00:05:30,820
she's happy cleaning the lobby and she's happy cleaning the bedrooms.
82
00:05:31,090 --> 00:05:31,690
All right. Cool.
83
00:05:31,690 --> 00:05:38,590
So now we have this new object called houseKeeper1, and we've got a number of properties that we've filled
84
00:05:38,590 --> 00:05:39,380
in.
85
00:05:39,400 --> 00:05:47,980
So if we go ahead and hit command enter or control enter, or simply press on this button,
86
00:05:48,370 --> 00:05:55,600
then we've created this object and we can tap into it by simply saying houseKeeper1, and we get access
87
00:05:55,600 --> 00:06:02,350
to all of these properties. And we can tap into the properties by simply using the dot notation.
88
00:06:02,350 --> 00:06:11,140
So, for example, we can say console.log(houseKeeper1.name), and this will give us Jane because
89
00:06:11,140 --> 00:06:17,260
that's the piece of information that we've associated with the property name inside our object
90
00:06:17,260 --> 00:06:18,460
houseKeeper1.
91
00:06:18,490 --> 00:06:25,060
Now let's say that our hotel has just been featured in the top hotels in the world and we're literally
92
00:06:25,060 --> 00:06:31,030
full every single day and we actually need far more bellboys than just the three that we've already
93
00:06:31,030 --> 00:06:36,400
got. And going through this process of every single time when we have to create a new object,
94
00:06:36,490 --> 00:06:43,270
we have to write the name property, name value, age property, age value,
95
00:06:43,390 --> 00:06:50,350
and actually, if you notice, for all of our bellboys, we have the same properties, and we don't actually have to
96
00:06:50,350 --> 00:06:55,600
type out all of these properties again and again and again every single time we want to construct a
97
00:06:55,600 --> 00:06:57,350
new bellboy object.
98
00:06:57,370 --> 00:06:59,530
So what's the solution to this?
99
00:06:59,620 --> 00:07:06,280
Well, we can actually create a factory that basically just pumps out bellboys all day long. That factory,
100
00:07:06,610 --> 00:07:09,390
in Javascript code, would look something like this.
101
00:07:09,580 --> 00:07:14,160
So we would create a function that has a name of BellBoy.
102
00:07:14,320 --> 00:07:17,400
And this is called a constructor function.
103
00:07:17,710 --> 00:07:23,830
And what's special about constructor functions is that the names have to be capitalized and it's no
104
00:07:23,830 --> 00:07:26,800
longer the same camel casing that we've seen so far.
105
00:07:26,860 --> 00:07:32,350
The first letter of the first word also has to be capitalized and this is how we can tell that this
106
00:07:32,350 --> 00:07:35,800
is a constructor function and not just any odd function.
107
00:07:35,800 --> 00:07:41,680
Now the constructor function takes a number of inputs, and these are the inputs that we're going to provide
108
00:07:41,740 --> 00:07:47,470
when we create new objects from this constructor function or from this factory.
109
00:07:47,560 --> 00:07:53,530
And inside the constructor function we match the inputs to property names.
110
00:07:53,530 --> 00:08:00,340
So, for example, we will say this object, .name, is equal to the name that was given
111
00:08:00,430 --> 00:08:01,240
as an input
112
00:08:01,270 --> 00:08:03,880
when we constructed this object.
113
00:08:03,880 --> 00:08:08,140
Now this looks a little bit confusing but let me show you what it looks like when we initialize a new
114
00:08:08,140 --> 00:08:12,220
object or effectively when we create an object from that factory.
115
00:08:12,220 --> 00:08:18,370
So we would write something like var bellBoy1 = new BellBoy,
116
00:08:18,480 --> 00:08:21,100
notice the capital B, parentheses,
117
00:08:21,220 --> 00:08:26,860
and inside the parentheses we would provide the inputs to all of those properties.
118
00:08:26,860 --> 00:08:29,440
So the first one was the name, the second was the age,
119
00:08:29,530 --> 00:08:34,380
the third one was whether if they had a permit, and the fourth one was which languages they spoke.
120
00:08:34,600 --> 00:08:41,380
So this is much much shorter than our previous version where we had to specify the name of the property
121
00:08:41,470 --> 00:08:47,620
every single time we created a new object. And we can use this factory or constructor function to create
122
00:08:47,620 --> 00:08:52,160
new bellboy objects all day long. And, effectively,
123
00:08:52,390 --> 00:08:58,810
the only difference between this syntax and calling a normal function is the keyword new,
124
00:08:59,000 --> 00:09:02,470
and the fact that the name of the function is capitalized from the beginning.
125
00:09:02,510 --> 00:09:05,090
So now it's your turn. As a challenge,
126
00:09:05,090 --> 00:09:11,600
I want you to take what we did before where we created a new houseKeeper1 object, and I want you to
127
00:09:11,600 --> 00:09:14,370
create a constructor function for it.
128
00:09:14,390 --> 00:09:20,810
So instead of creating it like this, I want you to use what you just learned and create the constructor
129
00:09:20,810 --> 00:09:25,820
function for any housekeeper objects, and then to create the object
130
00:09:25,820 --> 00:09:29,020
houseKeeper1 using that constructor function.
131
00:09:29,030 --> 00:09:31,050
So pause the video now and give that a go.
132
00:09:34,210 --> 00:09:39,030
So the first thing I'm going to do is I'm going to empty cache and hard reload so that our houseKeeper1
133
00:09:39,070 --> 00:09:41,300
object no longer exists.
134
00:09:41,560 --> 00:09:46,600
Now I'm going to reformat this code so instead of having to write this out every single time we create
135
00:09:46,630 --> 00:09:49,700
a new housekeeper object, we have to say houseKeeper2,
136
00:09:49,720 --> 00:09:58,060
years of experience is 3 etc. etc., we're going to now have a factory that just creates housekeeper
137
00:09:58,090 --> 00:09:58,890
objects.
138
00:09:59,110 --> 00:10:04,080
So to begin with we need to create a function and the function name has to be capitalized.
139
00:10:04,120 --> 00:10:07,090
So we're creating housekeeper objects.
140
00:10:07,120 --> 00:10:12,970
Now this function is going to take a number of inputs and those inputs correspond to all of the properties
141
00:10:12,970 --> 00:10:13,560
we need.
142
00:10:13,720 --> 00:10:16,010
So the first one is yearsOfExperience,
143
00:10:16,180 --> 00:10:23,710
second one is name, and the third one is cleaningRepertoire. And now inside the function we're going
144
00:10:23,710 --> 00:10:25,340
to give it some properties.
145
00:10:25,390 --> 00:10:31,660
So we're going to say this object is going have a yearsOfExperience property, and it's going to be equal
146
00:10:31,660 --> 00:10:34,850
to the input that comes in through here.
147
00:10:35,050 --> 00:10:39,660
And then I'm just going to go through this and create this code for all the other properties.
148
00:10:39,880 --> 00:10:44,920
All right so now that we've created our constructor function I'm going to delete where we created the
149
00:10:44,920 --> 00:10:48,550
first housekeeper object and I'm going to run this code.
150
00:10:48,550 --> 00:10:54,160
So now inside our console we're going to create a new housekeeper object and instead of going through
151
00:10:54,160 --> 00:11:00,940
this long winded approach of specifying the name of the property, the value of the property, every single time
152
00:11:00,970 --> 00:11:02,890
we create a new object,
153
00:11:03,040 --> 00:11:11,320
we're simply going to say var houseKeeper1 = new. That new keyword is really important, because
154
00:11:11,320 --> 00:11:13,860
we're going to be using a constructor function
155
00:11:13,870 --> 00:11:21,700
afterwards. new HouseKeeper. Notice the capitalized H. And then inside the parentheses we're going to provide
156
00:11:21,700 --> 00:11:24,250
the values of all three properties.
157
00:11:24,250 --> 00:11:32,310
So years of experience, let's say 9, and then name, let's say he's called Tom, and cleaning repertoire,
158
00:11:32,320 --> 00:11:36,170
let's say he's only good for cleaning the lobby and bedrooms.
159
00:11:36,250 --> 00:11:46,520
So now if I hit enter and I console.log our new houseKeeper1's name, then you can see I get Tom.
160
00:11:46,690 --> 00:11:48,970
So our object has been created.
161
00:11:49,120 --> 00:11:54,580
So now that we created this constructor function every single time we want to create a new object from
162
00:11:54,580 --> 00:12:01,420
it it's as simple as just filling in the properties with the new values and we can use that object factory
163
00:12:01,420 --> 00:12:04,720
to pump out new objects with those same properties all day long.
16684
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.