All language subtitles for 007 A Deeper Understanding of Javascript Objects.en

So up till now you would have heard me talk about objects and using the object's properties or methods.

But let's really truly dig in and understand exactly what Javascript objects are and how we can use

them to dominate the web.

Now let's say that you've just inherited a hotel and you're in charge of running it. Now

when you arrive the first thing you notice is that there's a whole load of bags that are in the lobby

and you've got guests who are checking in and leaving their luggage.

So what do you need?

You need a bellboy,

right?

So let's go ahead and employ our first bellboy.

His name is Timmy.

Now in addition to his name there's a number of other things that you need to know from your bellboy.

So let's quiz him. All right Timmy,

you can drop the suitcase

now. What is your name?

My name is Timmy.

So we could create a variable to capture this data and we can call it bellBoy1Name.

Now, as we keep quizzing him, say what is your age,

do you have a work permit,

what languages do you speak,

we can start capturing and saving all of this data by creating a whole bunch of variables.

So that means if we were to instruct our bellboy to greet a guest, then we could write our line of code

like this: alert

("Hello, my name is " + bellBoy1Name).

So this would create a pop up saying "Hello, my name is Timmy".

So up till now we should be very familiar with this kind of syntax.

But let's say that we're really good at running hotels and it gets completely booked out and we're effectively

swamped with guests and luggage.

Now Timmy can't manage by himself.

So let's employ some other bellboys, bellboy two and bellboy three.

Now if we were to go through this process of creating var bellBoy2Name = "Jimmy" etc. etc., it

will take for ever.

So what can we do instead?

Well in real life this information might be better represented by a table or an Excel spreadsheet like

this because we need to know the same properties for each of the bellboys. We can simply just create

a number of rows that represent each of the properties and as we recruit new bellboys we just fill in

the values of each and every property.

Now in Javascript we can create something really similar to this by simply creating an object.

So we would create a variable that's called bellBoy1, and it would have a number of properties that

will assign values and all of these properties are enclosed inside a set of curly braces.

Now inside here we could simply say name is Timmy,

age is 19, has work permit is true,

languages are

this array of languages. Now that alert might look like this.

So, "Hello, my name is "

+ bellBoy1, which is the name of the object, .name. And we are using the dot to access the property

that's called name. And this would create an alert that says "Hello, my name is Timmy", but our data is now

far more structured and it's much less likely that we'll make an error when we're assigning names and ages

to our new bellboys. And by doing this, we effectively just created a Javascript object.

Now if we were to create a housekeeper object, then the properties that we define probably will be quite

different.

We might be interested in things like

how long have you worked as a housekeeper,

which other hotels have you worked at, or

which kind of cleaning tasks are you happy to do. So for different objects,

we will create different properties depending on what is relevant to that object.

So I want you to have a go at creating objects. So head over to the Sources tab inside the Chrome Developer

Tools, and

I want you to create a new object that is houseKeeper1, and she needs to have a number properties,

so depending on what you think might be relevant properties for a housekeeper, then go ahead and just add

those to that object.

So pause the video now and see if you can complete this challenge.

All right. So we're creating a new object, and we do that the same way that we create new variables.

We start off with a keyword var and then we give our object a name.

So in our case we're just calling ours houseKeeper1. And then we're going to set it to equal,

but instead of just giving it a value as we've done before, we're going to give it a number of properties,

and all of those properties are enclosed inside a set of curly braces.

Now the first property the housekeeper might have is say years of experience and she's got 12 years

of experience.

So the left hand side is the name of the property and you can name it whatever it is that you want and

a good idea is to follow the rules of convention of naming Javascript variables,

so all of those things about camel casing, as well as not using numbers to begin with, apply here as well.

Effectively when we're creating properties inside objects,

we're just creating a variable that's associated with another variable, and of course you can assign

it any value you wish,

a number, a string, an array, whatever it is that you want.

So let's say our housekeeper has years of experience and has a name.

Let's call her Jane.

Then she can have an array called cleaning repertoire and this could be an array that has things like

she's happy cleaning the bathroom,

she's happy cleaning the lobby and she's happy cleaning the bedrooms.

All right. Cool.

So now we have this new object called houseKeeper1, and we've got a number of properties that we've filled

in.

So if we go ahead and hit command enter or control enter, or simply press on this button,

then we've created this object and we can tap into it by simply saying houseKeeper1, and we get access

to all of these properties. And we can tap into the properties by simply using the dot notation.

So, for example, we can say console.log(houseKeeper1.name), and this will give us Jane because

that's the piece of information that we've associated with the property name inside our object

houseKeeper1.

Now let's say that our hotel has just been featured in the top hotels in the world and we're literally

full every single day and we actually need far more bellboys than just the three that we've already

got. And going through this process of every single time when we have to create a new object,

we have to write the name property, name value, age property, age value,

and actually, if you notice, for all of our bellboys, we have the same properties, and we don't actually have to

type out all of these properties again and again and again every single time we want to construct a

new bellboy object.

So what's the solution to this?

Well, we can actually create a factory that basically just pumps out bellboys all day long. That factory,

in Javascript code, would look something like this.

So we would create a function that has a name of BellBoy.

And this is called a constructor function.

And what's special about constructor functions is that the names have to be capitalized and it's no

longer the same camel casing that we've seen so far.

The first letter of the first word also has to be capitalized and this is how we can tell that this

is a constructor function and not just any odd function.

Now the constructor function takes a number of inputs, and these are the inputs that we're going to provide

when we create new objects from this constructor function or from this factory.

And inside the constructor function we match the inputs to property names.

So, for example, we will say this object, .name, is equal to the name that was given

as an input

when we constructed this object.

Now this looks a little bit confusing but let me show you what it looks like when we initialize a new

object or effectively when we create an object from that factory.

So we would write something like var bellBoy1 = new BellBoy,

notice the capital B, parentheses,

and inside the parentheses we would provide the inputs to all of those properties.

So the first one was the name, the second was the age,

the third one was whether if they had a permit, and the fourth one was which languages they spoke.

So this is much much shorter than our previous version where we had to specify the name of the property

every single time we created a new object. And we can use this factory or constructor function to create

new bellboy objects all day long. And, effectively,

the only difference between this syntax and calling a normal function is the keyword new,

and the fact that the name of the function is capitalized from the beginning.

So now it's your turn. As a challenge,

I want you to take what we did before where we created a new houseKeeper1 object, and I want you to

create a constructor function for it.

So instead of creating it like this, I want you to use what you just learned and create the constructor

function for any housekeeper objects, and then to create the object

houseKeeper1 using that constructor function.

So pause the video now and give that a go.

So the first thing I'm going to do is I'm going to empty cache and hard reload so that our houseKeeper1

object no longer exists.

Now I'm going to reformat this code so instead of having to write this out every single time we create

a new housekeeper object, we have to say houseKeeper2,

years of experience is 3 etc. etc., we're going to now have a factory that just creates housekeeper

objects.

So to begin with we need to create a function and the function name has to be capitalized.

So we're creating housekeeper objects.

Now this function is going to take a number of inputs and those inputs correspond to all of the properties

we need.

So the first one is yearsOfExperience,

second one is name, and the third one is cleaningRepertoire. And now inside the function we're going

to give it some properties.

So we're going to say this object is going have a yearsOfExperience property, and it's going to be equal

to the input that comes in through here.

And then I'm just going to go through this and create this code for all the other properties.

All right so now that we've created our constructor function I'm going to delete where we created the

first housekeeper object and I'm going to run this code.

So now inside our console we're going to create a new housekeeper object and instead of going through

this long winded approach of specifying the name of the property, the value of the property, every single time

we create a new object,

we're simply going to say var houseKeeper1 = new. That new keyword is really important, because

we're going to be using a constructor function

afterwards. new HouseKeeper. Notice the capitalized H. And then inside the parentheses we're going to provide

the values of all three properties.

So years of experience, let's say 9, and then name, let's say he's called Tom, and cleaning repertoire,

let's say he's only good for cleaning the lobby and bedrooms.

So now if I hit enter and I console.log our new houseKeeper1's name, then you can see I get Tom.

So our object has been created.

So now that we created this constructor function every single time we want to create a new object from

it it's as simple as just filling in the properties with the new values and we can use that object factory

to pump out new objects with those same properties all day long.