All language subtitles for 5. Constructor Functions and the new Operator

Let's finally implement
2

object oriented programming now.
3

And starting with constructor functions.
4

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

in my VS code editor.
6

So please go ahead and do the same now.
7

And we can actually already also open up a new terminal
8

and start our live server.
9

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

and increase it a little bit,
11

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

So, we actually kind of used
13

object oriented programming before
14

but in a very limited way.
15

Because we had no way of programmatically creating objects.
16

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

for example, in the bankist app, right?
18

But now that all changes with constructor functions.
19

So, we can use constructor functions,
20

to build an object using a function.
21

Now, a constructor function is actually
22

a completely normal function.
23

The only difference between a regular function,
24

and a function that we call constructor function,
25

is that we call a constructor function
26

with the new operator.
27

But enough talk,
28

let's now actually create a constructor function
29

for a person.
30

So that person and in OOP there is this convention
31

that constructor functions always start
32

with a capital letter.
33

And so we should always follow that convention too.
34

And in fact, other a built in constructors
35

like array or map, follow that convention as well.
36

Now here I'm using a function expression
37

but of course a function declaration will also work.
38

Now an arrow function will actually not work
39

as a function constructor.
40

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

and we need that, okay.
42

So only function declarations and function expressions.
43

Now remember that this function
44

is basically gonna produce an object
45

and in this case for a person.
46

So we want a person to have a name
47

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

And so we specified these two parameters
49

for that here in our constructor function
50

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

And now let's actually call this function.
52

And so, as I said, previously,
53

the only difference between a regular function,
54

and a constructor function is that we call the constructor
55

using the new keyword.
56

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

and 1991, let's say.
58

So this new operator here,
59

is actually a very special operator
60

because what it does is to call this function here.
61

So this person function,
62

but it does a whole lot more than just that.
63

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

with the new operator like this.
65

So behind the scenes, there have been four steps.
66

And let me actually write them here
67

because this is very important.
68

So first, a new empty object is created.
69

So an empty object is created,
70

then afterwards the function is called
71

and in this function call the this keyword will be set
72

to this newly created object.
73

All right? So let's write that here.
74

So the this keyword is this new empty object.
75

So, basically in the execution context
76

of the person function,
77

the this keyword will point to this new object here
78

that was created in step number one.
79

And remember all of this happens
80

only because we are calling the function
81

using the new operator here.
82

So step number three is that this newly created object
83

is linked to a prototype.
84

So linked to prototype but more about this
85

in the next video.
86

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

Finally, the last step,
88

is that the object that was created in the beginning
89

is then automatically returned
90

from the constructor function.
91

So the function automatically returns
92

that empty object from the beginning.
93

But actually at this point,
94

the object no longer needs to be empty.
95

And this is actually the trick
96

of making the constructor function work.
97

So let's go here now
98

and the lock to the console, the this keyword.
99

And so we already know that it should be
100

this empty object that was just created here
101

in step number one, right?
102

Because the this keyword
103

inside this function will be exactly that empty object.
104

And again, that's because we are calling it
105

with the new keyword.
106

So let's see.
107

And indeed we get to this empty object.
108

And the browser console is actually already telling us
109

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

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

All right.
112

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

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

the this keyword will basically be returned.
115

And so whatever we add to that empty object,
116

will then be returned from the function.
117

And that returned object, is gonna be the object,
118

that we are trying to build here, actually.
119

So, all we need to do is to now take
120

that first name parameter,
121

so the value that we receive,
122

and then create a property on the this keyword
123

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

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

And so now let's store the result here
126

in some variable and that's actually it.
127

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

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

If we want to take a look at it.
130

And indeed here it is, here is the person object
131

with the first name Jonas and the birth year,
132

that we passed here into the constructor function.
133

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

So again, we're calling this constructor function
135

with the new keyword or the new operator.
136

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

Then the function is called
138

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

And then in the function, we start to set properties
140

to that object.
141

And we give them the exact same name
142

as the parameters that we're passing in here.
143

And of course they could have any other name,
144

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

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

but this is kind of a convention.
147

So if we pass in first name
148

then we should also create a property called first name.
149

So then here by the end of the function
150

or this keyword now has these two new properties.
151

And then here in step number four,
152

that object that was created in the beginning,
153

is then automatically returned from the function.
154

And so at this point,
155

that is the object with these two properties.
156

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

and so it will then be stored in Jonas
158

and then that's what we get here.
159

Great.
160

So I hope that made sense.
161

And so now of course we can use this constructor function
162

to create as many different objects as we want.
163

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

Matilda and then let's say 2017,
165

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

Let's call it Jack new person,
167

just so you see that we can create
168

as many objects now based on this constructor function.
169

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

where this constructor function,
171

is now the blueprint for a house,
172

and then each of these objects that we create
173

through that function.
174

So through that blueprint will be the actual house
175

in the real world.
176

So in this case, the actual objects
177

with actual data in them.
178

So Matilda and Jack, and so of course,
179

now each of them is its own new object
180

that we created programmatically,
181

using a function constructor.
182

Now remember from one of the previous lectures,
183

that in classical object oriented programming,
184

an object created from a class is called an instance,
185

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

because as we discussed before,
187

JavaScript doesn't really have classes
188

in the sense of traditional OOP.
189

However, we did create an object
190

from a constructor function.
191

And actually three objects, right?
192

And constructor functions have been used
193

since the beginning of JavaScript
194

to kind of simulate classes.
195

And so therefore we can still say
196

that Jonas here is an instance of person
197

and the same goes for Matilda and for Jack here.
198

And in fact there is even an operator
199

that we can use to test for that.
200

So that works like this.
201

So Jonas is an instance of, and then person.
202

And so this will then return either true or false.
203

Now, if we created something else here,
204

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

this would of course be false, right?
206

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

so this object using any constructor function, all right?
208

And since we're talking about instances here,
209

we can also say that these properties here
210

will be the instance properties.
211

Let's write that here.
212

And that's because the properties' first name
213

and birth year will be available
214

on all the instances that are created
215

through this constructor function.
216

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

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

Well, just like we added properties,
219

we can of course also add methods.
220

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

And so here we are going to create a function
222

and assign it to this property.
223

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

And this year showed simply log to the console 2037,
225

which is the year we've always been using,
226

and then minus this.birth here.
227

And so this method is exactly the same
228

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

So, this would work just fine here
230

but this is actually a really bad practice.
231

So you should never do this.
232

You should never create a method
233

inside of a constructor function.
234

That's because imagine we were gonna create a hundred
235

or thousands or even tens of thousands
236

of person objects using this constructor function.
237

Then what would happen,
238

is that each of these objects
239

would carry around this function here.
240

So if we had a thousand objects,
241

we would essentially create a thousand copies
242

of this function.
243

And so that would be terrible
244

for the performance of our code.
245

Again, don't do this.
246

But instead to solve this problem,
247

we are gonna use prototypes and prototype inheritance
248

just like we discussed in the last video.
249

All right, great.
250

So this is the basics of constructor functions.
251

Just note that function constructors
252

are not really a feature of the JavaScript language.
253

Instead, they are simply a pattern that has been developed
254

by other developers.
255

And now everyone simply uses this.
256

And this now includes you as a new developer.
257

So the real magic really here is this new operator.
258

And so the most important thing
259

to understand from this video,
260

is really these four steps.
261

So make sure that you understand them,
262

and then in the next video
263

we will work with prototypes
264

and finally see the magic
265

of prototypal inheritance in action.