Original subtitles

Let's finally implement

object oriented programming now.

And starting with constructor functions.

And as always, I already have to start our files open here

in my VS code editor.

So please go ahead and do the same now.

And we can actually already also open up a new terminal

and start our live server.

So we can close that, open up the console here,

and increase it a little bit,

and now we're all set up and ready to go.

So, we actually kind of used

object oriented programming before

but in a very limited way.

Because we had no way of programmatically creating objects.

And so all we did was to use some simple object literals

for example, in the bankist app, right?

But now that all changes with constructor functions.

So, we can use constructor functions,

to build an object using a function.

Now, a constructor function is actually

a completely normal function.

The only difference between a regular function,

and a function that we call constructor function,

is that we call a constructor function

with the new operator.

But enough talk,

let's now actually create a constructor function

for a person.

So that person and in OOP there is this convention

that constructor functions always start

with a capital letter.

And so we should always follow that convention too.

And in fact, other a built in constructors

like array or map, follow that convention as well.

Now here I'm using a function expression

but of course a function declaration will also work.

Now an arrow function will actually not work

as a function constructor.

And that's because it doesn't have its own this keyword

and we need that, okay.

So only function declarations and function expressions.

Now remember that this function

is basically gonna produce an object

and in this case for a person.

So we want a person to have a name

or let's say a first name and a birth here.

And so we specified these two parameters

for that here in our constructor function

so that we can then pass in the name and the birth year.

And now let's actually call this function.

And so, as I said, previously,

the only difference between a regular function,

and a constructor function is that we call the constructor

using the new keyword.

So we write new, then person and then let's pass in Jonas

and 1991, let's say.

So this new operator here,

is actually a very special operator

because what it does is to call this function here.

So this person function,

but it does a whole lot more than just that.

So let's see what exactly happens when we call a function

with the new operator like this.

So behind the scenes, there have been four steps.

And let me actually write them here

because this is very important.

So first, a new empty object is created.

So an empty object is created,

then afterwards the function is called

and in this function call the this keyword will be set

to this newly created object.

All right? So let's write that here.

So the this keyword is this new empty object.

So, basically in the execution context

of the person function,

the this keyword will point to this new object here

that was created in step number one.

And remember all of this happens

only because we are calling the function

using the new operator here.

So step number three is that this newly created object

is linked to a prototype.

So linked to prototype but more about this

in the next video.

For now, we just care about creating the object itself.

Finally, the last step,

is that the object that was created in the beginning

is then automatically returned

from the constructor function.

So the function automatically returns

that empty object from the beginning.

But actually at this point,

the object no longer needs to be empty.

And this is actually the trick

of making the constructor function work.

So let's go here now

and the lock to the console, the this keyword.

And so we already know that it should be

this empty object that was just created here

in step number one, right?

Because the this keyword

inside this function will be exactly that empty object.

And again, that's because we are calling it

with the new keyword.

So let's see.

And indeed we get to this empty object.

And the browser console is actually already telling us

that it's basically here of the type of person, all right?

And so this is just the name of the constructor function.

All right.

And now let's use this knowledge to our advantage.

Because we already know that in the end of this function,

the this keyword will basically be returned.

And so whatever we add to that empty object,

will then be returned from the function.

And that returned object, is gonna be the object,

that we are trying to build here, actually.

So, all we need to do is to now take

that first name parameter,

so the value that we receive,

and then create a property on the this keyword

with the same name and then set it to that value.

And then the same with the birth year, equal to birth year.

And so now let's store the result here

in some variable and that's actually it.

So let's see what Jonas is gonna look like,

now and we have to log it to the console here.

If we want to take a look at it.

And indeed here it is, here is the person object

with the first name Jonas and the birth year,

that we passed here into the constructor function.

So, let's quickly recap what just happened here.

So again, we're calling this constructor function

with the new keyword or the new operator.

And so therefore a new empty object is created right away.

Then the function is called

and then here the this keyword, is that empty object.

And then in the function, we start to set properties

to that object.

And we give them the exact same name

as the parameters that we're passing in here.

And of course they could have any other name,

so it doesn't have to be the same name as our arguments.

So it doesn't have to be the same name as our parameters,

but this is kind of a convention.

So if we pass in first name

then we should also create a property called first name.

So then here by the end of the function

or this keyword now has these two new properties.

And then here in step number four,

that object that was created in the beginning,

is then automatically returned from the function.

And so at this point,

that is the object with these two properties.

And so that's gonna be the result of this function call,

and so it will then be stored in Jonas

and then that's what we get here.

Great.

So I hope that made sense.

And so now of course we can use this constructor function

to create as many different objects as we want.

So let's say we want to create Matilda new person,

Matilda and then let's say 2017,

and let's just do another one, why not?

Let's call it Jack new person,

just so you see that we can create

as many objects now based on this constructor function.

And so this is a bit like the analogy from before,

where this constructor function,

is now the blueprint for a house,

and then each of these objects that we create

through that function.

So through that blueprint will be the actual house

in the real world.

So in this case, the actual objects

with actual data in them.

So Matilda and Jack, and so of course,

now each of them is its own new object

that we created programmatically,

using a function constructor.

Now remember from one of the previous lectures,

that in classical object oriented programming,

an object created from a class is called an instance,

right? Now we didn't technically create a class here

because as we discussed before,

JavaScript doesn't really have classes

in the sense of traditional OOP.

However, we did create an object

from a constructor function.

And actually three objects, right?

And constructor functions have been used

since the beginning of JavaScript

to kind of simulate classes.

And so therefore we can still say

that Jonas here is an instance of person

and the same goes for Matilda and for Jack here.

And in fact there is even an operator

that we can use to test for that.

So that works like this.

So Jonas is an instance of, and then person.

And so this will then return either true or false.

Now, if we created something else here,

let's say J, just like this, then if we do this,

this would of course be false, right?

Because of course we didn't create this variable here,

so this object using any constructor function, all right?

And since we're talking about instances here,

we can also say that these properties here

will be the instance properties.

Let's write that here.

And that's because the properties' first name

and birth year will be available

on all the instances that are created

through this constructor function.

So that's for properties, but now what about methods,

So what if we wanted to add a method to our objects?

Well, just like we added properties,

we can of course also add methods.

So let's again, use our old friend calcage here.

And so here we are going to create a function

and assign it to this property.

And so this will then basically become a method, right?

And this year showed simply log to the console 2037,

which is the year we've always been using,

and then minus this.birth here.

And so this method is exactly the same

that we've been using all the time, right?

So, this would work just fine here

but this is actually a really bad practice.

So you should never do this.

You should never create a method

inside of a constructor function.

That's because imagine we were gonna create a hundred

or thousands or even tens of thousands

of person objects using this constructor function.

Then what would happen,

is that each of these objects

would carry around this function here.

So if we had a thousand objects,

we would essentially create a thousand copies

of this function.

And so that would be terrible

for the performance of our code.

Again, don't do this.

But instead to solve this problem,

we are gonna use prototypes and prototype inheritance

just like we discussed in the last video.

All right, great.

So this is the basics of constructor functions.

Just note that function constructors

are not really a feature of the JavaScript language.

Instead, they are simply a pattern that has been developed

by other developers.

And now everyone simply uses this.

And this now includes you as a new developer.

So the real magic really here is this new operator.

And so the most important thing

to understand from this video,

is really these four steps.

So make sure that you understand them,

and then in the next video

we will work with prototypes

and finally see the magic

of prototypal inheritance in action.