Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,215 --> 00:00:03,900
In this lecture, I want to quickly talk about
2
2
00:00:03,900 --> 00:00:08,620
how exactly it works to pass arguments into functions.
3
3
00:00:08,620 --> 00:00:11,410
And this goes back to the video that we had
4
4
00:00:11,410 --> 00:00:14,110
about primitives versus objects,
5
5
00:00:14,110 --> 00:00:15,980
which, remember, we also call
6
6
00:00:15,980 --> 00:00:19,000
primitive types and reference types.
7
7
00:00:19,000 --> 00:00:21,950
So this is kind of a review of that lecture,
8
8
00:00:21,950 --> 00:00:26,080
but applied to functions, because it's super important
9
9
00:00:26,080 --> 00:00:30,000
that we really understand how primitives and objects
10
10
00:00:30,000 --> 00:00:32,503
work in the context of functions.
11
11
00:00:34,240 --> 00:00:37,973
And so let's draw up a quick and simple example here.
12
12
00:00:39,100 --> 00:00:41,323
So let's set a flight number here,
13
13
00:00:44,300 --> 00:00:45,950
234,
14
14
00:00:45,950 --> 00:00:47,683
and an object,
15
15
00:00:49,970 --> 00:00:52,440
which is basically a passenger,
16
16
00:00:52,440 --> 00:00:54,640
which in this case is me.
17
17
00:00:54,640 --> 00:00:56,980
So name, Jonas
18
18
00:00:59,050 --> 00:01:00,610
Schmedtmann,
19
19
00:01:00,610 --> 00:01:03,203
and then some random passport number.
20
20
00:01:05,430 --> 00:01:08,480
So let's say just this, and by the way,
21
21
00:01:08,480 --> 00:01:12,650
I could have all of this code here as boilerplate already,
22
22
00:01:12,650 --> 00:01:15,690
so in the starter files, but I strongly believe
23
23
00:01:15,690 --> 00:01:18,430
that it's better to write the code here in a video,
24
24
00:01:18,430 --> 00:01:22,120
because then you are forced to write the code yourself,
25
25
00:01:22,120 --> 00:01:24,220
and second, it makes the examples
26
26
00:01:24,220 --> 00:01:26,590
a lot easier to understand.
27
27
00:01:26,590 --> 00:01:29,603
Anyway, I now want to create a check in function.
28
28
00:01:32,560 --> 00:01:37,060
So, basically when the passenger has already
29
29
00:01:37,060 --> 00:01:40,060
bought the flight and is then ready to check in
30
30
00:01:40,060 --> 00:01:41,223
to take the flight,
31
31
00:01:42,386 --> 00:01:44,886
and then let's say, there we need a flight number,
32
32
00:01:46,140 --> 00:01:49,110
and then also a passenger object,
33
33
00:01:49,110 --> 00:01:52,660
which contains data about the passenger itself.
34
34
00:01:52,660 --> 00:01:55,793
So basically we would call this function like this.
35
35
00:01:59,040 --> 00:02:02,150
So with the flight that we already have up here,
36
36
00:02:02,150 --> 00:02:05,263
and the Jonas object, in this case.
37
37
00:02:06,430 --> 00:02:10,570
Alright, so this is our flight, LH234.
38
38
00:02:10,570 --> 00:02:13,090
And this is our passenger,
39
39
00:02:13,090 --> 00:02:17,000
but now let's say that the number of the flight was changed.
40
40
00:02:17,000 --> 00:02:19,830
And so that can happen in the checkIn function.
41
41
00:02:19,830 --> 00:02:23,003
And so let's now change that flight number parameter here,
42
42
00:02:25,090 --> 00:02:27,600
and this is usually not a good practice to do,
43
43
00:02:27,600 --> 00:02:31,240
so you should not change the parameters of a function,
44
44
00:02:31,240 --> 00:02:33,870
but this is just to make a point.
45
45
00:02:33,870 --> 00:02:35,490
So let's say for some reason,
46
46
00:02:35,490 --> 00:02:38,923
the number now changed to LH999,
47
47
00:02:40,090 --> 00:02:43,180
and I will also change the name of the passenger,
48
48
00:02:43,180 --> 00:02:45,530
and that's because in aviation,
49
49
00:02:45,530 --> 00:02:49,100
usually they always add a Mr or a Mrs,
50
50
00:02:49,100 --> 00:02:51,253
in front of the name, okay.
51
51
00:02:52,360 --> 00:02:54,253
So let's do that, Mr,
52
52
00:02:55,200 --> 00:02:57,223
and then just the name of the passenger.
53
53
00:02:59,580 --> 00:03:02,940
So these are some changes that the check in function does.
54
54
00:03:02,940 --> 00:03:05,150
And then before we check in,
55
55
00:03:05,150 --> 00:03:08,193
it will just check if the passport number is correct.
56
56
00:03:09,100 --> 00:03:13,910
So let's say if passenger dot passport
57
57
00:03:15,660 --> 00:03:18,640
is equal to this one,
58
58
00:03:18,640 --> 00:03:20,780
and let's suppose that this function
59
59
00:03:20,780 --> 00:03:23,590
gets this data from some database,
60
60
00:03:23,590 --> 00:03:26,713
which contains the booked flights, right,
61
61
00:03:28,510 --> 00:03:31,780
then in this case, if the passport is correct,
62
62
00:03:31,780 --> 00:03:34,853
then let's alert, check in,
63
63
00:03:36,670 --> 00:03:37,563
and else,
64
64
00:03:40,560 --> 00:03:41,393
alert,
65
65
00:03:42,420 --> 00:03:44,993
wrong passport.
66
66
00:03:48,130 --> 00:03:50,090
Okay, and this part here will make
67
67
00:03:50,090 --> 00:03:52,590
a little bit more sense by the end of the lecture.
68
68
00:03:53,430 --> 00:03:54,930
Okay?
69
69
00:03:54,930 --> 00:03:57,720
And now what I want to do is to log both the flight
70
70
00:03:57,720 --> 00:04:00,220
and the Jonas object to the console
71
71
00:04:00,220 --> 00:04:02,763
after calling this checkIn function.
72
72
00:04:05,320 --> 00:04:07,633
So, flight,
73
73
00:04:11,200 --> 00:04:13,040
and Jonas.
74
74
00:04:13,040 --> 00:04:14,110
Okay.
75
75
00:04:14,110 --> 00:04:16,330
And now, as I save this, what do you think
76
76
00:04:16,330 --> 00:04:20,140
is gonna happen to these two variables here?
77
77
00:04:20,140 --> 00:04:22,250
Can you try to anticipate it,
78
78
00:04:22,250 --> 00:04:24,510
based on the code that we have here?
79
79
00:04:24,510 --> 00:04:29,330
So, anyway, let's see now, and here we get checked in,
80
80
00:04:29,330 --> 00:04:32,130
which for now isn't really important,
81
81
00:04:32,130 --> 00:04:35,840
but then what we get is the flight number,
82
82
00:04:35,840 --> 00:04:38,810
which is still LH234,
83
83
00:04:38,810 --> 00:04:41,260
so exactly as we defined it here,
84
84
00:04:41,260 --> 00:04:44,483
even though it seems like it was redefined here,
85
85
00:04:45,470 --> 00:04:47,540
so it really wasn't.
86
86
00:04:47,540 --> 00:04:50,750
And then we also get the Jonas object,
87
87
00:04:50,750 --> 00:04:55,750
but now the name is indeed changed to Mr Jonas Schmedtmann.
88
88
00:04:56,070 --> 00:04:58,110
And so that's this change here,
89
89
00:04:58,110 --> 00:05:01,393
that happened inside of the function, right?
90
90
00:05:02,340 --> 00:05:05,340
So maybe you actually saw this result coming,
91
91
00:05:05,340 --> 00:05:07,950
because we actually have seen this happening
92
92
00:05:07,950 --> 00:05:12,200
sometimes before, but let's, anyway, analyze it.
93
93
00:05:12,200 --> 00:05:16,280
So this flight here is a primitive type, right?
94
94
00:05:16,280 --> 00:05:18,010
It's just a string.
95
95
00:05:18,010 --> 00:05:21,900
And as we passed that value into the function down here,
96
96
00:05:21,900 --> 00:05:25,110
then the flight number here is basically a copy
97
97
00:05:25,110 --> 00:05:27,830
of that original value, right?
98
98
00:05:27,830 --> 00:05:30,230
So flight number contains a copy,
99
99
00:05:30,230 --> 00:05:34,970
and not simply the original value of the flight variable.
100
100
00:05:34,970 --> 00:05:37,900
So this would be exactly the same as writing
101
101
00:05:37,900 --> 00:05:40,570
flight number equals
102
102
00:05:41,840 --> 00:05:42,950
flight.
103
103
00:05:42,950 --> 00:05:45,240
And this would then also simply copy
104
104
00:05:45,240 --> 00:05:48,840
this value to flightNum, right?
105
105
00:05:48,840 --> 00:05:49,980
And so again,
106
106
00:05:49,980 --> 00:05:52,960
flightNum here is a completely different variable.
107
107
00:05:52,960 --> 00:05:55,170
And therefore, as we changed it here,
108
108
00:05:55,170 --> 00:05:58,993
it did not get reflected in the outside flight variable.
109
109
00:05:59,880 --> 00:06:03,560
Okay, and so it's still LH234,
110
110
00:06:03,560 --> 00:06:06,500
so exactly for the same reason as we saw before,
111
111
00:06:06,500 --> 00:06:11,090
in the primitives versus reference types lecture.
112
112
00:06:11,090 --> 00:06:14,150
But now what about the Jonas object that we passed,
113
113
00:06:14,150 --> 00:06:16,910
into the checkIn function and in that function,
114
114
00:06:16,910 --> 00:06:19,147
it is called passenger, right?
115
115
00:06:19,147 --> 00:06:22,230
And then we changed that passenger object here.
116
116
00:06:22,230 --> 00:06:24,420
And as we saw then,
117
117
00:06:24,420 --> 00:06:28,210
the Jonas object was also affected by that change.
118
118
00:06:28,210 --> 00:06:30,090
So why did that happen?
119
119
00:06:30,090 --> 00:06:32,820
And you might already know the answer.
120
120
00:06:32,820 --> 00:06:36,190
So when we pass a reference type to a function,
121
121
00:06:36,190 --> 00:06:39,240
what is copied is really just a reference
122
122
00:06:39,240 --> 00:06:42,030
to the object in the memory heap.
123
123
00:06:42,030 --> 00:06:44,853
So that would be exactly like doing this.
124
124
00:06:46,230 --> 00:06:48,160
So passenger
125
125
00:06:48,160 --> 00:06:48,993
equals
126
126
00:06:50,040 --> 00:06:50,873
Jonas.
127
127
00:06:51,970 --> 00:06:54,673
We can actually do this and here the same,
128
128
00:06:55,600 --> 00:07:00,083
just to get as a reference, same as doing,
129
129
00:07:01,030 --> 00:07:03,370
okay, and so, as you already know,
130
130
00:07:03,370 --> 00:07:06,510
when we try to copy an object like this,
131
131
00:07:06,510 --> 00:07:08,610
we are really only copying the reference
132
132
00:07:08,610 --> 00:07:11,310
to that object in the memory heap,
133
133
00:07:11,310 --> 00:07:14,440
but they both point to the same object in memory.
134
134
00:07:14,440 --> 00:07:17,220
And so that's exactly what is also happening here,
135
135
00:07:17,220 --> 00:07:19,660
with the Jonas object, as we pass it
136
136
00:07:19,660 --> 00:07:22,793
into the checkIn function where it's called passenger.
137
137
00:07:23,670 --> 00:07:27,460
So here, as we are manipulating the passenger object,
138
138
00:07:27,460 --> 00:07:31,890
it is exactly the same as manipulating the Jonas object.
139
139
00:07:31,890 --> 00:07:34,410
Once again, because they both are
140
140
00:07:34,410 --> 00:07:36,763
the same object in the memory heap.
141
141
00:07:38,680 --> 00:07:42,900
Alright, so in summary, passing a primitive type
142
142
00:07:42,900 --> 00:07:45,480
to a function is really just the same
143
143
00:07:45,480 --> 00:07:49,710
as creating a copy like this, outside of the function.
144
144
00:07:49,710 --> 00:07:51,920
So the value is simply copied.
145
145
00:07:51,920 --> 00:07:55,340
On the other hand, when we pass an object to a function,
146
146
00:07:55,340 --> 00:07:59,920
it is really just like copying an object like this.
147
147
00:07:59,920 --> 00:08:02,170
And so whatever we change in a copy
148
148
00:08:02,170 --> 00:08:04,760
will also happen in the original.
149
149
00:08:04,760 --> 00:08:06,970
Now, of course, we need to be careful
150
150
00:08:06,970 --> 00:08:10,520
with this behavior and always keep it in mind.
151
151
00:08:10,520 --> 00:08:12,780
That's because the fact that objects
152
152
00:08:12,780 --> 00:08:15,970
behave this way when passed to functions
153
153
00:08:15,970 --> 00:08:20,380
can have unforeseeable consequences in large code bases.
154
154
00:08:20,380 --> 00:08:22,910
And that's especially true when you're working
155
155
00:08:22,910 --> 00:08:25,160
with multiple developers.
156
156
00:08:25,160 --> 00:08:27,510
So let's write another quick function here
157
157
00:08:27,510 --> 00:08:29,710
to show you what can happen,
158
158
00:08:29,710 --> 00:08:34,370
so that you can be prepared for the real life, basically.
159
159
00:08:34,370 --> 00:08:38,520
So let's just create a function called
160
160
00:08:39,777 --> 00:08:40,777
newPassport.
161
161
00:08:44,270 --> 00:08:47,530
It will accept any person,
162
162
00:08:47,530 --> 00:08:49,970
and basically it will simply change
163
163
00:08:49,970 --> 00:08:52,413
that person's passport number.
164
164
00:08:54,980 --> 00:08:58,930
And so let's simply create a random number here,
165
165
00:08:58,930 --> 00:09:03,910
random, and let's multiply it by some huge number,
166
166
00:09:03,910 --> 00:09:05,150
and then this will create a number
167
167
00:09:05,150 --> 00:09:07,690
between one and
168
168
00:09:07,690 --> 00:09:10,070
this huge thing.
169
169
00:09:10,070 --> 00:09:11,720
So it doesn't really matter here.
170
170
00:09:12,770 --> 00:09:16,823
We will also know trunc, as we have used before,
171
171
00:09:18,380 --> 00:09:20,590
just so that we get a new big number,
172
172
00:09:20,590 --> 00:09:24,520
which will be the new passport now, right.
173
173
00:09:24,520 --> 00:09:27,393
And so now let's call that function actually,
174
174
00:09:28,360 --> 00:09:30,573
with the Jonas object,
175
175
00:09:31,520 --> 00:09:32,670
now, right.
176
176
00:09:32,670 --> 00:09:34,910
So let's say that I booked the flight
177
177
00:09:34,910 --> 00:09:37,670
with my original passport number here.
178
178
00:09:37,670 --> 00:09:39,280
And so that's the passport number
179
179
00:09:39,280 --> 00:09:43,800
that the checkIn function will then compare my passport to,
180
180
00:09:43,800 --> 00:09:45,883
that's why it's hard coded right here.
181
181
00:09:47,030 --> 00:09:51,973
But now, again, I change my passport before I check in.
182
182
00:09:54,870 --> 00:09:56,620
And so let's see what happens then.
183
183
00:09:58,230 --> 00:10:00,340
So here again, we need to pass in
184
184
00:10:00,340 --> 00:10:02,933
the flight and the passenger object.
185
185
00:10:04,150 --> 00:10:05,543
So, let's see.
186
186
00:10:07,200 --> 00:10:09,980
So it still says checked in here,
187
187
00:10:09,980 --> 00:10:14,920
but that's coming from this checkIn function call, okay.
188
188
00:10:14,920 --> 00:10:17,620
So then down here, the passport is changed,
189
189
00:10:17,620 --> 00:10:19,900
and then there's another checkIn call.
190
190
00:10:19,900 --> 00:10:22,290
So let's see the result of that.
191
191
00:10:22,290 --> 00:10:27,150
And so now, indeed, it says wrong passport, alright.
192
192
00:10:27,150 --> 00:10:29,470
And so what's happening now is that we have
193
193
00:10:29,470 --> 00:10:33,100
two functions manipulating the same object.
194
194
00:10:33,100 --> 00:10:35,573
And so that is creating a problem,
195
195
00:10:37,100 --> 00:10:38,240
right?
196
196
00:10:38,240 --> 00:10:40,300
So here the exact same thing is happening,
197
197
00:10:40,300 --> 00:10:42,010
in the new passport function.
198
198
00:10:42,010 --> 00:10:44,420
I'm passing in an object,
199
199
00:10:44,420 --> 00:10:47,010
and so that object here is then called person.
200
200
00:10:47,010 --> 00:10:50,810
And as the function manipulates that person object,
201
201
00:10:50,810 --> 00:10:54,310
of course, it also gets reflected in Jonas.
202
202
00:10:54,310 --> 00:10:57,170
And then as we pass that Jonas object
203
203
00:10:57,170 --> 00:11:00,140
into the checkIn function, then, of course,
204
204
00:11:00,140 --> 00:11:04,650
that passport is no longer the same as the original one.
205
205
00:11:04,650 --> 00:11:08,040
So, yeah, I think this is a nice example
206
206
00:11:08,040 --> 00:11:11,050
of seeing how the interaction of different functions
207
207
00:11:11,050 --> 00:11:14,690
with the same object can create some issues here.
208
208
00:11:14,690 --> 00:11:18,000
And of course, this is just a super simple example,
209
209
00:11:18,000 --> 00:11:21,020
but I'm sure you get the point, right?
210
210
00:11:21,020 --> 00:11:24,130
What matters is that you're aware of this issue,
211
211
00:11:24,130 --> 00:11:26,563
and then you can be careful with it.
212
212
00:11:27,890 --> 00:11:30,520
Let's just take out these lines of code.
213
213
00:11:30,520 --> 00:11:33,513
Also these, these don't really matter.
214
214
00:11:34,940 --> 00:11:37,860
Let's just make sure, and indeed, yeah,
215
215
00:11:37,860 --> 00:11:39,790
we get the wrong passport now,
216
216
00:11:39,790 --> 00:11:42,713
because of the new passport function down there.
217
217
00:11:44,720 --> 00:11:45,920
Okay.
218
218
00:11:45,920 --> 00:11:48,800
Now, just to finish, in programming,
219
219
00:11:48,800 --> 00:11:51,650
there are two terms that are used all the time
220
220
00:11:51,650 --> 00:11:53,260
when dealing with functions,
221
221
00:11:53,260 --> 00:11:57,570
which is passing by value, and passing by reference,
222
222
00:11:57,570 --> 00:12:01,110
and many experienced programmers that are new to JavaScript
223
223
00:12:01,110 --> 00:12:03,930
have some confusion between these terms
224
224
00:12:03,930 --> 00:12:05,870
and how it works in JavaScript.
225
225
00:12:05,870 --> 00:12:08,700
And so I wanna quickly address that here as well.
226
226
00:12:08,700 --> 00:12:12,560
So JavaScript does not have passing by reference,
227
227
00:12:12,560 --> 00:12:14,460
only passing by value,
228
228
00:12:14,460 --> 00:12:17,630
even though it looks like it's passing by reference.
229
229
00:12:17,630 --> 00:12:21,040
So there are languages like C++,
230
230
00:12:21,040 --> 00:12:24,690
where you can pass a reference to any value,
231
231
00:12:24,690 --> 00:12:27,030
instead of the value itself.
232
232
00:12:27,030 --> 00:12:28,860
This works even with primitives,
233
233
00:12:28,860 --> 00:12:32,170
so you could pass a reference to the value of five,
234
234
00:12:32,170 --> 00:12:33,470
and then the original value,
235
235
00:12:33,470 --> 00:12:36,490
outside of the function, would be changed.
236
236
00:12:36,490 --> 00:12:39,270
And this is called pass by reference.
237
237
00:12:39,270 --> 00:12:44,270
But once again, JavaScript does not have pass by reference.
238
238
00:12:44,440 --> 00:12:47,000
So if you already know some programming,
239
239
00:12:47,000 --> 00:12:50,940
but are new to JavaScript, be sure to understand this.
240
240
00:12:50,940 --> 00:12:54,180
And I know it's confusing, because as we just learned,
241
241
00:12:54,180 --> 00:12:58,840
for objects, we do in fact pass in a reference.
242
242
00:12:58,840 --> 00:13:01,950
So the memory address of the object.
243
243
00:13:01,950 --> 00:13:05,880
However, that reference itself is still a value.
244
244
00:13:05,880 --> 00:13:09,820
It's simply a value that contains a memory address.
245
245
00:13:09,820 --> 00:13:13,670
So basically we pass a reference to the function,
246
246
00:13:13,670 --> 00:13:16,530
but we do not pass by reference,
247
247
00:13:16,530 --> 00:13:19,690
and this is an important distinction.
248
248
00:13:19,690 --> 00:13:20,750
And once again,
249
249
00:13:20,750 --> 00:13:23,820
I'm only telling you this because there seems to be
250
250
00:13:23,820 --> 00:13:27,140
a lot of confusion going on about this topic
251
251
00:13:27,140 --> 00:13:30,300
among some JavaScript beginners, and especially
252
252
00:13:30,300 --> 00:13:34,303
when they come from other languages, such as C++.
21727
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.