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++.