WEBVTT 1 00:00:01.215 --> 00:00:03.900 In this lecture, I want to quickly talk about 2 00:00:03.900 --> 00:00:08.620 how exactly it works to pass arguments into functions. 3 00:00:08.620 --> 00:00:11.410 And this goes back to the video that we had 4 00:00:11.410 --> 00:00:14.110 about primitives versus objects, 5 00:00:14.110 --> 00:00:15.980 which, remember, we also call 6 00:00:15.980 --> 00:00:19.000 primitive types and reference types. 7 00:00:19.000 --> 00:00:21.950 So this is kind of a review of that lecture, 8 00:00:21.950 --> 00:00:26.080 but applied to functions, because it's super important 9 00:00:26.080 --> 00:00:30.000 that we really understand how primitives and objects 10 00:00:30.000 --> 00:00:32.503 work in the context of functions. 11 00:00:34.240 --> 00:00:37.973 And so let's draw up a quick and simple example here. 12 00:00:39.100 --> 00:00:41.323 So let's set a flight number here, 13 00:00:44.300 --> 00:00:45.950 234, 14 00:00:45.950 --> 00:00:47.683 and an object, 15 00:00:49.970 --> 00:00:52.440 which is basically a passenger, 16 00:00:52.440 --> 00:00:54.640 which in this case is me. 17 00:00:54.640 --> 00:00:56.980 So name, Jonas 18 00:00:59.050 --> 00:01:00.610 Schmedtmann, 19 00:01:00.610 --> 00:01:03.203 and then some random passport number. 20 00:01:05.430 --> 00:01:08.480 So let's say just this, and by the way, 21 00:01:08.480 --> 00:01:12.650 I could have all of this code here as boilerplate already, 22 00:01:12.650 --> 00:01:15.690 so in the starter files, but I strongly believe 23 00:01:15.690 --> 00:01:18.430 that it's better to write the code here in a video, 24 00:01:18.430 --> 00:01:22.120 because then you are forced to write the code yourself, 25 00:01:22.120 --> 00:01:24.220 and second, it makes the examples 26 00:01:24.220 --> 00:01:26.590 a lot easier to understand. 27 00:01:26.590 --> 00:01:29.603 Anyway, I now want to create a check in function. 28 00:01:32.560 --> 00:01:37.060 So, basically when the passenger has already 29 00:01:37.060 --> 00:01:40.060 bought the flight and is then ready to check in 30 00:01:40.060 --> 00:01:41.223 to take the flight, 31 00:01:42.386 --> 00:01:44.886 and then let's say, there we need a flight number, 32 00:01:46.140 --> 00:01:49.110 and then also a passenger object, 33 00:01:49.110 --> 00:01:52.660 which contains data about the passenger itself. 34 00:01:52.660 --> 00:01:55.793 So basically we would call this function like this. 35 00:01:59.040 --> 00:02:02.150 So with the flight that we already have up here, 36 00:02:02.150 --> 00:02:05.263 and the Jonas object, in this case. 37 00:02:06.430 --> 00:02:10.570 Alright, so this is our flight, LH234. 38 00:02:10.570 --> 00:02:13.090 And this is our passenger, 39 00:02:13.090 --> 00:02:17.000 but now let's say that the number of the flight was changed. 40 00:02:17.000 --> 00:02:19.830 And so that can happen in the checkIn function. 41 00:02:19.830 --> 00:02:23.003 And so let's now change that flight number parameter here, 42 00:02:25.090 --> 00:02:27.600 and this is usually not a good practice to do, 43 00:02:27.600 --> 00:02:31.240 so you should not change the parameters of a function, 44 00:02:31.240 --> 00:02:33.870 but this is just to make a point. 45 00:02:33.870 --> 00:02:35.490 So let's say for some reason, 46 00:02:35.490 --> 00:02:38.923 the number now changed to LH999, 47 00:02:40.090 --> 00:02:43.180 and I will also change the name of the passenger, 48 00:02:43.180 --> 00:02:45.530 and that's because in aviation, 49 00:02:45.530 --> 00:02:49.100 usually they always add a Mr or a Mrs, 50 00:02:49.100 --> 00:02:51.253 in front of the name, okay. 51 00:02:52.360 --> 00:02:54.253 So let's do that, Mr, 52 00:02:55.200 --> 00:02:57.223 and then just the name of the passenger. 53 00:02:59.580 --> 00:03:02.940 So these are some changes that the check in function does. 54 00:03:02.940 --> 00:03:05.150 And then before we check in, 55 00:03:05.150 --> 00:03:08.193 it will just check if the passport number is correct. 56 00:03:09.100 --> 00:03:13.910 So let's say if passenger dot passport 57 00:03:15.660 --> 00:03:18.640 is equal to this one, 58 00:03:18.640 --> 00:03:20.780 and let's suppose that this function 59 00:03:20.780 --> 00:03:23.590 gets this data from some database, 60 00:03:23.590 --> 00:03:26.713 which contains the booked flights, right, 61 00:03:28.510 --> 00:03:31.780 then in this case, if the passport is correct, 62 00:03:31.780 --> 00:03:34.853 then let's alert, check in, 63 00:03:36.670 --> 00:03:37.563 and else, 64 00:03:40.560 --> 00:03:41.393 alert, 65 00:03:42.420 --> 00:03:44.993 wrong passport. 66 00:03:48.130 --> 00:03:50.090 Okay, and this part here will make 67 00:03:50.090 --> 00:03:52.590 a little bit more sense by the end of the lecture. 68 00:03:53.430 --> 00:03:54.930 Okay? 69 00:03:54.930 --> 00:03:57.720 And now what I want to do is to log both the flight 70 00:03:57.720 --> 00:04:00.220 and the Jonas object to the console 71 00:04:00.220 --> 00:04:02.763 after calling this checkIn function. 72 00:04:05.320 --> 00:04:07.633 So, flight, 73 00:04:11.200 --> 00:04:13.040 and Jonas. 74 00:04:13.040 --> 00:04:14.110 Okay. 75 00:04:14.110 --> 00:04:16.330 And now, as I save this, what do you think 76 00:04:16.330 --> 00:04:20.140 is gonna happen to these two variables here? 77 00:04:20.140 --> 00:04:22.250 Can you try to anticipate it, 78 00:04:22.250 --> 00:04:24.510 based on the code that we have here? 79 00:04:24.510 --> 00:04:29.330 So, anyway, let's see now, and here we get checked in, 80 00:04:29.330 --> 00:04:32.130 which for now isn't really important, 81 00:04:32.130 --> 00:04:35.840 but then what we get is the flight number, 82 00:04:35.840 --> 00:04:38.810 which is still LH234, 83 00:04:38.810 --> 00:04:41.260 so exactly as we defined it here, 84 00:04:41.260 --> 00:04:44.483 even though it seems like it was redefined here, 85 00:04:45.470 --> 00:04:47.540 so it really wasn't. 86 00:04:47.540 --> 00:04:50.750 And then we also get the Jonas object, 87 00:04:50.750 --> 00:04:55.750 but now the name is indeed changed to Mr Jonas Schmedtmann. 88 00:04:56.070 --> 00:04:58.110 And so that's this change here, 89 00:04:58.110 --> 00:05:01.393 that happened inside of the function, right? 90 00:05:02.340 --> 00:05:05.340 So maybe you actually saw this result coming, 91 00:05:05.340 --> 00:05:07.950 because we actually have seen this happening 92 00:05:07.950 --> 00:05:12.200 sometimes before, but let's, anyway, analyze it. 93 00:05:12.200 --> 00:05:16.280 So this flight here is a primitive type, right? 94 00:05:16.280 --> 00:05:18.010 It's just a string. 95 00:05:18.010 --> 00:05:21.900 And as we passed that value into the function down here, 96 00:05:21.900 --> 00:05:25.110 then the flight number here is basically a copy 97 00:05:25.110 --> 00:05:27.830 of that original value, right? 98 00:05:27.830 --> 00:05:30.230 So flight number contains a copy, 99 00:05:30.230 --> 00:05:34.970 and not simply the original value of the flight variable. 100 00:05:34.970 --> 00:05:37.900 So this would be exactly the same as writing 101 00:05:37.900 --> 00:05:40.570 flight number equals 102 00:05:41.840 --> 00:05:42.950 flight. 103 00:05:42.950 --> 00:05:45.240 And this would then also simply copy 104 00:05:45.240 --> 00:05:48.840 this value to flightNum, right? 105 00:05:48.840 --> 00:05:49.980 And so again, 106 00:05:49.980 --> 00:05:52.960 flightNum here is a completely different variable. 107 00:05:52.960 --> 00:05:55.170 And therefore, as we changed it here, 108 00:05:55.170 --> 00:05:58.993 it did not get reflected in the outside flight variable. 109 00:05:59.880 --> 00:06:03.560 Okay, and so it's still LH234, 110 00:06:03.560 --> 00:06:06.500 so exactly for the same reason as we saw before, 111 00:06:06.500 --> 00:06:11.090 in the primitives versus reference types lecture. 112 00:06:11.090 --> 00:06:14.150 But now what about the Jonas object that we passed, 113 00:06:14.150 --> 00:06:16.910 into the checkIn function and in that function, 114 00:06:16.910 --> 00:06:19.147 it is called passenger, right? 115 00:06:19.147 --> 00:06:22.230 And then we changed that passenger object here. 116 00:06:22.230 --> 00:06:24.420 And as we saw then, 117 00:06:24.420 --> 00:06:28.210 the Jonas object was also affected by that change. 118 00:06:28.210 --> 00:06:30.090 So why did that happen? 119 00:06:30.090 --> 00:06:32.820 And you might already know the answer. 120 00:06:32.820 --> 00:06:36.190 So when we pass a reference type to a function, 121 00:06:36.190 --> 00:06:39.240 what is copied is really just a reference 122 00:06:39.240 --> 00:06:42.030 to the object in the memory heap. 123 00:06:42.030 --> 00:06:44.853 So that would be exactly like doing this. 124 00:06:46.230 --> 00:06:48.160 So passenger 125 00:06:48.160 --> 00:06:48.993 equals 126 00:06:50.040 --> 00:06:50.873 Jonas. 127 00:06:51.970 --> 00:06:54.673 We can actually do this and here the same, 128 00:06:55.600 --> 00:07:00.083 just to get as a reference, same as doing, 129 00:07:01.030 --> 00:07:03.370 okay, and so, as you already know, 130 00:07:03.370 --> 00:07:06.510 when we try to copy an object like this, 131 00:07:06.510 --> 00:07:08.610 we are really only copying the reference 132 00:07:08.610 --> 00:07:11.310 to that object in the memory heap, 133 00:07:11.310 --> 00:07:14.440 but they both point to the same object in memory. 134 00:07:14.440 --> 00:07:17.220 And so that's exactly what is also happening here, 135 00:07:17.220 --> 00:07:19.660 with the Jonas object, as we pass it 136 00:07:19.660 --> 00:07:22.793 into the checkIn function where it's called passenger. 137 00:07:23.670 --> 00:07:27.460 So here, as we are manipulating the passenger object, 138 00:07:27.460 --> 00:07:31.890 it is exactly the same as manipulating the Jonas object. 139 00:07:31.890 --> 00:07:34.410 Once again, because they both are 140 00:07:34.410 --> 00:07:36.763 the same object in the memory heap. 141 00:07:38.680 --> 00:07:42.900 Alright, so in summary, passing a primitive type 142 00:07:42.900 --> 00:07:45.480 to a function is really just the same 143 00:07:45.480 --> 00:07:49.710 as creating a copy like this, outside of the function. 144 00:07:49.710 --> 00:07:51.920 So the value is simply copied. 145 00:07:51.920 --> 00:07:55.340 On the other hand, when we pass an object to a function, 146 00:07:55.340 --> 00:07:59.920 it is really just like copying an object like this. 147 00:07:59.920 --> 00:08:02.170 And so whatever we change in a copy 148 00:08:02.170 --> 00:08:04.760 will also happen in the original. 149 00:08:04.760 --> 00:08:06.970 Now, of course, we need to be careful 150 00:08:06.970 --> 00:08:10.520 with this behavior and always keep it in mind. 151 00:08:10.520 --> 00:08:12.780 That's because the fact that objects 152 00:08:12.780 --> 00:08:15.970 behave this way when passed to functions 153 00:08:15.970 --> 00:08:20.380 can have unforeseeable consequences in large code bases. 154 00:08:20.380 --> 00:08:22.910 And that's especially true when you're working 155 00:08:22.910 --> 00:08:25.160 with multiple developers. 156 00:08:25.160 --> 00:08:27.510 So let's write another quick function here 157 00:08:27.510 --> 00:08:29.710 to show you what can happen, 158 00:08:29.710 --> 00:08:34.370 so that you can be prepared for the real life, basically. 159 00:08:34.370 --> 00:08:38.520 So let's just create a function called 160 00:08:39.777 --> 00:08:40.777 newPassport. 161 00:08:44.270 --> 00:08:47.530 It will accept any person, 162 00:08:47.530 --> 00:08:49.970 and basically it will simply change 163 00:08:49.970 --> 00:08:52.413 that person's passport number. 164 00:08:54.980 --> 00:08:58.930 And so let's simply create a random number here, 165 00:08:58.930 --> 00:09:03.910 random, and let's multiply it by some huge number, 166 00:09:03.910 --> 00:09:05.150 and then this will create a number 167 00:09:05.150 --> 00:09:07.690 between one and 168 00:09:07.690 --> 00:09:10.070 this huge thing. 169 00:09:10.070 --> 00:09:11.720 So it doesn't really matter here. 170 00:09:12.770 --> 00:09:16.823 We will also know trunc, as we have used before, 171 00:09:18.380 --> 00:09:20.590 just so that we get a new big number, 172 00:09:20.590 --> 00:09:24.520 which will be the new passport now, right. 173 00:09:24.520 --> 00:09:27.393 And so now let's call that function actually, 174 00:09:28.360 --> 00:09:30.573 with the Jonas object, 175 00:09:31.520 --> 00:09:32.670 now, right. 176 00:09:32.670 --> 00:09:34.910 So let's say that I booked the flight 177 00:09:34.910 --> 00:09:37.670 with my original passport number here. 178 00:09:37.670 --> 00:09:39.280 And so that's the passport number 179 00:09:39.280 --> 00:09:43.800 that the checkIn function will then compare my passport to, 180 00:09:43.800 --> 00:09:45.883 that's why it's hard coded right here. 181 00:09:47.030 --> 00:09:51.973 But now, again, I change my passport before I check in. 182 00:09:54.870 --> 00:09:56.620 And so let's see what happens then. 183 00:09:58.230 --> 00:10:00.340 So here again, we need to pass in 184 00:10:00.340 --> 00:10:02.933 the flight and the passenger object. 185 00:10:04.150 --> 00:10:05.543 So, let's see. 186 00:10:07.200 --> 00:10:09.980 So it still says checked in here, 187 00:10:09.980 --> 00:10:14.920 but that's coming from this checkIn function call, okay. 188 00:10:14.920 --> 00:10:17.620 So then down here, the passport is changed, 189 00:10:17.620 --> 00:10:19.900 and then there's another checkIn call. 190 00:10:19.900 --> 00:10:22.290 So let's see the result of that. 191 00:10:22.290 --> 00:10:27.150 And so now, indeed, it says wrong passport, alright. 192 00:10:27.150 --> 00:10:29.470 And so what's happening now is that we have 193 00:10:29.470 --> 00:10:33.100 two functions manipulating the same object. 194 00:10:33.100 --> 00:10:35.573 And so that is creating a problem, 195 00:10:37.100 --> 00:10:38.240 right? 196 00:10:38.240 --> 00:10:40.300 So here the exact same thing is happening, 197 00:10:40.300 --> 00:10:42.010 in the new passport function. 198 00:10:42.010 --> 00:10:44.420 I'm passing in an object, 199 00:10:44.420 --> 00:10:47.010 and so that object here is then called person. 200 00:10:47.010 --> 00:10:50.810 And as the function manipulates that person object, 201 00:10:50.810 --> 00:10:54.310 of course, it also gets reflected in Jonas. 202 00:10:54.310 --> 00:10:57.170 And then as we pass that Jonas object 203 00:10:57.170 --> 00:11:00.140 into the checkIn function, then, of course, 204 00:11:00.140 --> 00:11:04.650 that passport is no longer the same as the original one. 205 00:11:04.650 --> 00:11:08.040 So, yeah, I think this is a nice example 206 00:11:08.040 --> 00:11:11.050 of seeing how the interaction of different functions 207 00:11:11.050 --> 00:11:14.690 with the same object can create some issues here. 208 00:11:14.690 --> 00:11:18.000 And of course, this is just a super simple example, 209 00:11:18.000 --> 00:11:21.020 but I'm sure you get the point, right? 210 00:11:21.020 --> 00:11:24.130 What matters is that you're aware of this issue, 211 00:11:24.130 --> 00:11:26.563 and then you can be careful with it. 212 00:11:27.890 --> 00:11:30.520 Let's just take out these lines of code. 213 00:11:30.520 --> 00:11:33.513 Also these, these don't really matter. 214 00:11:34.940 --> 00:11:37.860 Let's just make sure, and indeed, yeah, 215 00:11:37.860 --> 00:11:39.790 we get the wrong passport now, 216 00:11:39.790 --> 00:11:42.713 because of the new passport function down there. 217 00:11:44.720 --> 00:11:45.920 Okay. 218 00:11:45.920 --> 00:11:48.800 Now, just to finish, in programming, 219 00:11:48.800 --> 00:11:51.650 there are two terms that are used all the time 220 00:11:51.650 --> 00:11:53.260 when dealing with functions, 221 00:11:53.260 --> 00:11:57.570 which is passing by value, and passing by reference, 222 00:11:57.570 --> 00:12:01.110 and many experienced programmers that are new to JavaScript 223 00:12:01.110 --> 00:12:03.930 have some confusion between these terms 224 00:12:03.930 --> 00:12:05.870 and how it works in JavaScript. 225 00:12:05.870 --> 00:12:08.700 And so I wanna quickly address that here as well. 226 00:12:08.700 --> 00:12:12.560 So JavaScript does not have passing by reference, 227 00:12:12.560 --> 00:12:14.460 only passing by value, 228 00:12:14.460 --> 00:12:17.630 even though it looks like it's passing by reference. 229 00:12:17.630 --> 00:12:21.040 So there are languages like C++, 230 00:12:21.040 --> 00:12:24.690 where you can pass a reference to any value, 231 00:12:24.690 --> 00:12:27.030 instead of the value itself. 232 00:12:27.030 --> 00:12:28.860 This works even with primitives, 233 00:12:28.860 --> 00:12:32.170 so you could pass a reference to the value of five, 234 00:12:32.170 --> 00:12:33.470 and then the original value, 235 00:12:33.470 --> 00:12:36.490 outside of the function, would be changed. 236 00:12:36.490 --> 00:12:39.270 And this is called pass by reference. 237 00:12:39.270 --> 00:12:44.270 But once again, JavaScript does not have pass by reference. 238 00:12:44.440 --> 00:12:47.000 So if you already know some programming, 239 00:12:47.000 --> 00:12:50.940 but are new to JavaScript, be sure to understand this. 240 00:12:50.940 --> 00:12:54.180 And I know it's confusing, because as we just learned, 241 00:12:54.180 --> 00:12:58.840 for objects, we do in fact pass in a reference. 242 00:12:58.840 --> 00:13:01.950 So the memory address of the object. 243 00:13:01.950 --> 00:13:05.880 However, that reference itself is still a value. 244 00:13:05.880 --> 00:13:09.820 It's simply a value that contains a memory address. 245 00:13:09.820 --> 00:13:13.670 So basically we pass a reference to the function, 246 00:13:13.670 --> 00:13:16.530 but we do not pass by reference, 247 00:13:16.530 --> 00:13:19.690 and this is an important distinction. 248 00:13:19.690 --> 00:13:20.750 And once again, 249 00:13:20.750 --> 00:13:23.820 I'm only telling you this because there seems to be 250 00:13:23.820 --> 00:13:27.140 a lot of confusion going on about this topic 251 00:13:27.140 --> 00:13:30.300 among some JavaScript beginners, and especially 252 00:13:30.300 --> 00:13:34.303 when they come from other languages, such as C++.