All language subtitles for 2. Introducing Constructor Functions

Let's start with constructor functions and for this,

I have a brand new project, empty HTML file which only imports app.js because in this module, we'll

not build any kind of fancy app,

instead we'll work with the things behind classes since we already saw how we can use classes in

a real project

in the last module. So we can create a class, person for example as you learned, there you can add a field

name for example which will be translated to a property when you create an object based on the class.

You can have a constructor in here where you could for example also add a property like this and you

can also have a method in here where you

for example console log Hi, I

am, then you add this.name and I am this.age years old,

of course we could have used string interpolation here as well.

This is something very basic which we did before

and then of course we can instantiate this as often as we want by calling new, executing person as a

function

and here we go.

You could also accept an argument in the constructor and use that in there,

here I'm working with hardcoded values only and therefore let's see what we get when we call greet here,

save everything and then load this page and indeed we see Hi, I am Max and I am 30 years old.

This is nothing new,

this is how you use classes and this is what we learned about in the last course module. Now behind the

scenes, classes utilize a concept that has been around in Javascript forever basically, for a very

long time

and that's the concept of constructor functions

and of course we have a constructor function, a constructor method in the class

and as you will see, that is basically related to the concept of constructor functions. In the past

in Javascript and still today in many scripts you see out there or in scripts that need to run like

that in older browsers which don't support classes,

you will see constructor functions instead of classes being used. Now constructor functions are a special

type of function that acts as a blueprint for objects,

same as class does, that can hold and set up properties and methods just like a class and that can then

be created with the new keyword.

So of course in modern browsers and modern scripts, we typically work with a class but behind the scenes,

this class here would essentially be written as a function with the function keyword, with any name of

your choice in this case person where still the convention is to use a capital character to make it

clear that this function should not be called as a normal function but together with the new keyword

to be used as a constructor function because indeed with the new keyword, Javascript will call this function

differently than it normally would

and then other than that, you write this as a regular function and to replicate this class, you would

have to set this age equal to 30 here,

this name equal to Max and this greet equal to another function, an anonymous function here, which holds

that logic. By the way,

if you are a little bit more experienced with Javascript, you'll know that this here, assigning name and

greet like this is not exactly equivalent to name and greet set up like this here in the class

but for now it's the only way we can set it up and it will for now have the same effect,

I'll dive into how this is different and how it could be done in a different way

later in this module.

So for now this would give us a person constructor function which we can execute to build such a person

object and indeed, that code down there can stay as it is and if we then go back and reload this page,

we got the exact same output as before but now using a constructor function.