Original subtitles

1 1

In this lecture, I want to quickly talk about 2

2

how exactly it works to pass arguments into functions. 3

3

And this goes back to the video that we had 4

4

about primitives versus objects, 5

5

which, remember, we also call 6

6

primitive types and reference types. 7

7

So this is kind of a review of that lecture, 8

8

but applied to functions, because it's super important 9

9

that we really understand how primitives and objects 10

10

work in the context of functions. 11

11

And so let's draw up a quick and simple example here. 12

12

So let's set a flight number here, 13

13

234, 14

14

and an object, 15

15

which is basically a passenger, 16

16

which in this case is me. 17

17

So name, Jonas 18

18

Schmedtmann, 19

19

and then some random passport number. 20

20

So let's say just this, and by the way, 21

21

I could have all of this code here as boilerplate already, 22

22

so in the starter files, but I strongly believe 23

23

that it's better to write the code here in a video, 24

24

because then you are forced to write the code yourself, 25

25

and second, it makes the examples 26

26

a lot easier to understand. 27

27

Anyway, I now want to create a check in function. 28

28

So, basically when the passenger has already 29

29

bought the flight and is then ready to check in 30

30

to take the flight, 31

31

and then let's say, there we need a flight number, 32

32

and then also a passenger object, 33

33

which contains data about the passenger itself. 34

34

So basically we would call this function like this. 35

35

So with the flight that we already have up here, 36

36

and the Jonas object, in this case. 37

37

Alright, so this is our flight, LH234. 38

38

And this is our passenger, 39

39

but now let's say that the number of the flight was changed. 40

40

And so that can happen in the checkIn function. 41

41

And so let's now change that flight number parameter here, 42

42

and this is usually not a good practice to do, 43

43

so you should not change the parameters of a function, 44

44

but this is just to make a point. 45

45

So let's say for some reason, 46

46

the number now changed to LH999, 47

47

and I will also change the name of the passenger, 48

48

and that's because in aviation, 49

49

usually they always add a Mr or a Mrs, 50

50

in front of the name, okay. 51

51

So let's do that, Mr, 52

52

and then just the name of the passenger. 53

53

So these are some changes that the check in function does. 54

54

And then before we check in, 55

55

it will just check if the passport number is correct. 56

56

So let's say if passenger dot passport 57

57

is equal to this one, 58

58

and let's suppose that this function 59

59

gets this data from some database, 60

60

which contains the booked flights, right, 61

61

then in this case, if the passport is correct, 62

62

then let's alert, check in, 63

63

and else, 64

64

alert, 65

65

wrong passport. 66

66

Okay, and this part here will make 67

67

a little bit more sense by the end of the lecture. 68

68

Okay? 69

69

And now what I want to do is to log both the flight 70

70

and the Jonas object to the console 71

71

after calling this checkIn function. 72

72

So, flight, 73

73

and Jonas. 74

74

Okay. 75

75

And now, as I save this, what do you think 76

76

is gonna happen to these two variables here? 77

77

Can you try to anticipate it, 78

78

based on the code that we have here? 79

79

So, anyway, let's see now, and here we get checked in, 80

80

which for now isn't really important, 81

81

but then what we get is the flight number, 82

82

which is still LH234, 83

83

so exactly as we defined it here, 84

84

even though it seems like it was redefined here, 85

85

so it really wasn't. 86

86

And then we also get the Jonas object, 87

87

but now the name is indeed changed to Mr Jonas Schmedtmann. 88

88

And so that's this change here, 89

89

that happened inside of the function, right? 90

90

So maybe you actually saw this result coming, 91

91

because we actually have seen this happening 92

92

sometimes before, but let's, anyway, analyze it. 93

93

So this flight here is a primitive type, right? 94

94

It's just a string. 95

95

And as we passed that value into the function down here, 96

96

then the flight number here is basically a copy 97

97

of that original value, right? 98

98

So flight number contains a copy, 99

99

and not simply the original value of the flight variable. 100

100

So this would be exactly the same as writing 101

101

flight number equals 102

102

flight. 103

103

And this would then also simply copy 104

104

this value to flightNum, right? 105

105

And so again, 106

106

flightNum here is a completely different variable. 107

107

And therefore, as we changed it here, 108

108

it did not get reflected in the outside flight variable. 109

109

Okay, and so it's still LH234, 110

110

so exactly for the same reason as we saw before, 111

111

in the primitives versus reference types lecture. 112

112

But now what about the Jonas object that we passed, 113

113

into the checkIn function and in that function, 114

114

it is called passenger, right? 115

115

And then we changed that passenger object here. 116

116

And as we saw then, 117

117

the Jonas object was also affected by that change. 118

118

So why did that happen? 119

119

And you might already know the answer. 120

120

So when we pass a reference type to a function, 121

121

what is copied is really just a reference 122

122

to the object in the memory heap. 123

123

So that would be exactly like doing this. 124

124

So passenger 125

125

equals 126

126

Jonas. 127

127

We can actually do this and here the same, 128

128

just to get as a reference, same as doing, 129

129

okay, and so, as you already know, 130

130

when we try to copy an object like this, 131

131

we are really only copying the reference 132

132

to that object in the memory heap, 133

133

but they both point to the same object in memory. 134

134

And so that's exactly what is also happening here, 135

135

with the Jonas object, as we pass it 136

136

into the checkIn function where it's called passenger. 137

137

So here, as we are manipulating the passenger object, 138

138

it is exactly the same as manipulating the Jonas object. 139

139

Once again, because they both are 140

140

the same object in the memory heap. 141

141

Alright, so in summary, passing a primitive type 142

142

to a function is really just the same 143

143

as creating a copy like this, outside of the function. 144

144

So the value is simply copied. 145

145

On the other hand, when we pass an object to a function, 146

146

it is really just like copying an object like this. 147

147

And so whatever we change in a copy 148

148

will also happen in the original. 149

149

Now, of course, we need to be careful 150

150

with this behavior and always keep it in mind. 151

151

That's because the fact that objects 152

152

behave this way when passed to functions 153

153

can have unforeseeable consequences in large code bases. 154

154

And that's especially true when you're working 155

155

with multiple developers. 156

156

So let's write another quick function here 157

157

to show you what can happen, 158

158

so that you can be prepared for the real life, basically. 159

159

So let's just create a function called 160

160

newPassport. 161

161

It will accept any person, 162

162

and basically it will simply change 163

163

that person's passport number. 164

164

And so let's simply create a random number here, 165

165

random, and let's multiply it by some huge number, 166

166

and then this will create a number 167

167

between one and 168

168

this huge thing. 169

169

So it doesn't really matter here. 170

170

We will also know trunc, as we have used before, 171

171

just so that we get a new big number, 172

172

which will be the new passport now, right. 173

173

And so now let's call that function actually, 174

174

with the Jonas object, 175

175

now, right. 176

176

So let's say that I booked the flight 177

177

with my original passport number here. 178

178

And so that's the passport number 179

179

that the checkIn function will then compare my passport to, 180

180

that's why it's hard coded right here. 181

181

But now, again, I change my passport before I check in. 182

182

And so let's see what happens then. 183

183

So here again, we need to pass in 184

184

the flight and the passenger object. 185

185

So, let's see. 186

186

So it still says checked in here, 187

187

but that's coming from this checkIn function call, okay. 188

188

So then down here, the passport is changed, 189

189

and then there's another checkIn call. 190

190

So let's see the result of that. 191

191

And so now, indeed, it says wrong passport, alright. 192

192

And so what's happening now is that we have 193

193

two functions manipulating the same object. 194

194

And so that is creating a problem, 195

195

right? 196

196

So here the exact same thing is happening, 197

197

in the new passport function. 198

198

I'm passing in an object, 199

199

and so that object here is then called person. 200

200

And as the function manipulates that person object, 201

201

of course, it also gets reflected in Jonas. 202

202

And then as we pass that Jonas object 203

203

into the checkIn function, then, of course, 204

204

that passport is no longer the same as the original one. 205

205

So, yeah, I think this is a nice example 206

206

of seeing how the interaction of different functions 207

207

with the same object can create some issues here. 208

208

And of course, this is just a super simple example, 209

209

but I'm sure you get the point, right? 210

210

What matters is that you're aware of this issue, 211

211

and then you can be careful with it. 212

212

Let's just take out these lines of code. 213

213

Also these, these don't really matter. 214

214

Let's just make sure, and indeed, yeah, 215

215

we get the wrong passport now, 216

216

because of the new passport function down there. 217

217

Okay. 218

218

Now, just to finish, in programming, 219

219

there are two terms that are used all the time 220

220

when dealing with functions, 221

221

which is passing by value, and passing by reference, 222

222

and many experienced programmers that are new to JavaScript 223

223

have some confusion between these terms 224

224

and how it works in JavaScript. 225

225

And so I wanna quickly address that here as well. 226

226

So JavaScript does not have passing by reference, 227

227

only passing by value, 228

228

even though it looks like it's passing by reference. 229

229

So there are languages like C++, 230

230

where you can pass a reference to any value, 231

231

instead of the value itself. 232

232

This works even with primitives, 233

233

so you could pass a reference to the value of five, 234

234

and then the original value, 235

235

outside of the function, would be changed. 236

236

And this is called pass by reference. 237

237

But once again, JavaScript does not have pass by reference. 238

238

So if you already know some programming, 239

239

but are new to JavaScript, be sure to understand this. 240

240

And I know it's confusing, because as we just learned, 241

241

for objects, we do in fact pass in a reference. 242

242

So the memory address of the object. 243

243

However, that reference itself is still a value. 244

244

It's simply a value that contains a memory address. 245

245

So basically we pass a reference to the function, 246

246

but we do not pass by reference, 247

247

and this is an important distinction. 248

248

And once again, 249

249

I'm only telling you this because there seems to be 250

250

a lot of confusion going on about this topic 251

251

among some JavaScript beginners, and especially 252

252

when they come from other languages, such as C++.