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