Original subtitles

1 1

As we move towards the end of this section, 2

2

we need to learn about the big difference 3

3

between the way primitive types and objects 4

4

are stored and memory. 5

5

And this is actually a very practical aspect 6

6

and one that causes a lot of confusion in beginners. 7

7

So let's actually start by writing some code this time 8

8

to understand what the confusion actually is, 9

9

so that I can then show you 10

10

how it all works behind the scenes. 11

11

So right now I'm not gonna explain 12

12

how the code we will right now works, 13

13

but I will just show you what the source of confusion is. 14

14

But for now let's start with 15

15

a simple example with primitives. 16

16

And so remember primitives are like numbers, 17

17

strings, Boolean's, et cetera. 18

18

So simply setting the age to 30, 19

19

and then I'm creating a old age variable. 20

20

And this one I will set to the age 21

21

because now it is my birthday basically. 22

22

And so my age changes to 31, 23

23

but I still wanted to preserve my old age here 24

24

in this variable. 25

25

Okay? 26

26

So let's log the results to the console now. 27

27

And they should be pretty much what we expect at this point. 28

28

So you see that my current age is 31 because, well, 29

29

I changed the original one from 30 to 31. 30

30

But the old age is still 30 here. 31

31

And that's because I set it here at this point of the code 32

32

to age, which was still 30 at this point. 33

33

And so then changing the age here from 30 to 31 34

34

did of course not affect the old age variable again. 35

35

Again because at this point here age was still 30. 36

36

All right, so here, hopefully there is not much confusion, 37

37

everything works just as expected. 38

38

But now let's create another scenario which has an object. 39

39

So I'm simply going to create an object for me, 40

40

with the name of Jonas and age 30. 41

41

And now let's copy this object 42

42

because let's say that I have a friend 43

43

who's also called Jonas. 44

44

And so instead of creating a brand new object from scratch, 45

45

I would just copy the me object. 46

46

So const Friend equals Me. 47

47

Okay? 48

48

And so now both the name and the age are the same, 49

49

but let's say that we have different ages. 50

50

And so let's change the age of my friend 51

51

and that's pretty straightforward, right? 52

52

So let's say that he is 27 years old. 53

53

But of course we did not change me.age, right? 54

54

So let's now take a look at both of them in the console. 55

55

So first my friend, 56

56

so that's the Friend object and then also Me, 57

57

or we could say Jonas, it doesn't really matter. 58

58

But what matters is that we will see the Me object 59

59

and what do we think will happen now? 60

60

So let me show it to you. 61

61

And now we get that both me and my friend 62

62

have the age of 27. 63

63

And that looks a little bit strange because all we did 64

64

was to change the age of the friend, right? 65

65

Nowhere here, I have me.age equals 27, 66

66

but still for myself, so here at the Me object, 67

67

the age is also 27. 68

68

And so that is what I mean by source of confusion. 69

69

And so in this video, 70

70

let's now find out why it works this way. 71

71

Now, before we can understand the code that we just wrote, 72

72

we need to review some basics here. 73

73

First, we need to remember about 74

74

JavaScripts primitive data types, 75

75

which are number, string, Boolean, undefined, null, symbol, 76

76

and BigInt. 77

77

Then everything else are basically objects. 78

78

So objects created with the object literal, arrays 79

79

and even functions are all objects. 80

80

Now, when we're talking about memory and memory management, 81

81

it's usual to call primitives, primitive types 82

82

and objects reference types because of the different way 83

83

in which they are stored in memory. 84

84

Next, we need to remember about the JavaScript engine. 85

85

So the engine has two components, the call stack, 86

86

where functions are executed and to heap where objects 87

87

are stored in memory. 88

88

And that's right, all of objects, 89

89

or in other words, reference types 90

90

will get stored right in the memory heap. 91

91

And I mentioned that when we first talked about the engine, 92

92

but now you will finally learn how that actually works. 93

93

On the other hand, primitives or primitive types 94

94

are stored in the call stack. 95

95

And with that, I mean that primitive types 96

96

are stored in the execution contexts 97

97

in which they are declared. 98

98

But for the sake of simplicity, 99

99

let's ignore that detail now. 100

100

And simply say that primitive types 101

101

are stored in a call stack 102

102

because that's where execution context run. 103

103

All right, but now how does all that actually work? 104

104

And why did our code example earlier behave 105

105

in that weird way? 106

106

Well, let's find out. 107

107

So here we have the two code examples from earlier, 108

108

as well as the engine with call stack and heap. 109

109

And let's start by looking at the primitive values example. 110

110

So when we declare a variable like age equals 30, 111

111

what actually happens inside the JavaScript engine 112

112

and the computer's memory? 113

113

Well, first JavaScript will create 114

114

a so-called unique identifier with the variable name. 115

115

Then a piece of memory will be allocated 116

116

with a certain address, so 0001 in this example, 117

117

and finally the value would be stored in memory 118

118

at the specified address. 119

119

So in this case, the value 30 120

120

will be specified at memory address 0001. 121

121

And remember this all happens in a call stack 122

122

where primitive values are stored. 123

123

Now what's extremely important to understand here 124

124

is that the identifier actually points to the address 125

125

and not to the value itself. 126

126

So we would say that the age variable is equal to 30, 127

127

but in fact, age is equal to the memory address 0001, 128

128

which holds the value of 30, all right? 129

129

And this subtle distinction 130

130

is very important to keep in mind. 131

131

Now, in the next line, we declare old age 132

132

to be equal to age. 133

133

So knowing that a variable actually holds a memory address, 134

134

what should old age look like? 135

135

Well, it will simply point to the same memory address 136

136

as the age variable. 137

137

And so it will look like old age, is simply 30 as well. 138

138

Great, but now in the next line, we set eight to 31. 139

139

So what will happen then? 140

140

The value at address 0001 141

141

will certainly not become 31 142

142

because that would change old age as well, 143

143

since they both point to the same address. 144

144

So that would make no sense at all. 145

145

Also the value at a certain memory address is immutable, 146

146

or in other words, it cannot be changed. 147

147

So instead what's going to happen here 148

148

is that a new piece of memory is allocated. 149

149

So it's created and the age identifier now simply points 150

150

to the new address, which is holding the new value of 31, 151

151

all right? 152

152

And that's why when we lock both 153

153

or variables to the console in the end, 154

154

they both return exactly values that we expect. 155

155

Now with reference values, things work a bit differently, 156

156

which is the reason why this example gave us 157

157

that unexpected, weird behavior earlier in practice. 158

158

So what's the origin of this weird unexpected result? 159

159

Well, when a new object is created such as this Me object, 160

160

it is stored in the heap. 161

161

And such as before there is a memory address 162

162

and then the value itself. 163

163

Now in the case of reference values 164

164

like this Me object the Me identifier 165

165

does actually not point directly 166

166

to this newly created memory address in the heap. 167

167

So in this example, D30F, 168

168

instead, it will point to a new piece of memory 169

169

that's created in the stack. 170

170

And this new piece of memory will then point to the object 171

171

that's in the heap by using the memory address as its value. 172

172

In other words, the piece of memory in the call stack 173

173

has a reference to the piece of memory in the heap, 174

174

which holds or Me object, okay? 175

175

And that's the reason why we call objects reference types 176

176

in this context. 177

177

So again, when we declare a variable as an object, 178

178

an identifier is created, 179

179

which points to a piece of memory in the stack, 180

180

which in turn points to a piece of memory in the heap. 181

181

And that is where the object is actually stored. 182

182

And it works this way because objects might be 183

183

too large to be stored in the stack. 184

184

Instead they are stored in the heap, 185

185

which is like an almost unlimited memory pool. 186

186

And the stack just keeps a reference 187

187

to where the object is actually stored in the heap 188

188

so that it can find it whenever necessary. 189

189

Now, moving on in the code, 190

190

we create a new variable called Friend 191

191

that we set equal to the Me object. 192

192

So what will happen here? 193

193

Well, just like with primitive values, 194

194

the Friend identifier will point 195

195

to the exact same memory address as the Me identifier. 196

196

And again, that address contains the reference, 197

197

which then points to the object itself. 198

198

And like this the Friend object is now essentially 199

199

the exact same as the Me object. 200

200

Do you see that here in the diagram? 201

201

So here comes the interesting part 202

202

because now we're actually gonna change a property 203

203

in the Friend object by setting friend.age to 27. 204

204

So what happens then is that the object 205

205

is found in the heap, and the 30 is changed to 27. 206

206

Great. 207

207

And by the way, even though we defined the Friend variable 208

208

as a constant, we can actually still manipulate the object 209

209

without problems. 210

210

And when we think about that, it makes sense 211

211

because we're actually not changing the value in memory 212

212

for the Friend identifier, it is still D30F. 213

213

So the reference to the object. 214

214

All we did was to change the value in the heap, 215

215

and that's not a problem. 216

216

So it's a misconception that all variables declared 217

217

with const are immutable. 218

218

In fact, that is only true for primitive values, 219

219

but not for reference values. 220

220

So keep that in mind, whenever you're working with const. 221

221

Anyway, as we lock the Friend variable to the console, 222

222

we get the age of 27, just as we said it before. 223

223

But then when we lock the Me object, 224

224

we get that weird behavior 225

225

that we could previously not explain and not understand. 226

226

But with everything that we learned in this lecture, 227

227

it actually now makes sense 228

228

that in the Me object, age is now also 27, 229

229

even though we never changed me.age directly. 230

230

And the reason for this, as we can see in this slide 231

231

is the fact that Me and Friend 232

232

actually point to the exact same object in the memory heap. 233

233

So whenever we change something in this object, 234

234

it will always be reflected in Friend and in Me. 235

235

So in both these objects. 236

236

So these are basically just two different identifiers 237

237

pointing to the exact same value. 238

238

And once again, that value is the memory address D30F 239

239

which points to the reference in the memory heap. 240

240

And one important implication of this 241

241

is that whenever you think that you're copying an object, 242

242

you're really just creating a new variable 243

243

that points to the exact same object. 244

244

And this has huge implications 245

245

for the way JavaScript works in practice. 246

246

And we will see that in the next video 247

247

and throughout the course. 248

248

Now there are actually ways around this, 249

249

as we will also learn later. 250

250

but in general, this is how reference values work 251

251

in JavaScript. 252

252

So make sure to really understand this, 253

253

as well as the implications that this behavior has, 254

254

even if that means that you have to re-watch this lecture 255

255

or at least the explanation of this slide, all right? 256

256

Then once you really understand what happened here, 257

257

in this example, let's understand primitive values 258

258

and reference values even better in practice 259

259

in the next lecture. 260

260

But before we do that, let me just quickly take a second 261

261

and mention a three more, really big topics 262

262

about how JavaScript works behind the scenes 263

263

that will not be in the section, 264

264

but closer to where we actually need to learn about them. 265

265

For example, one fundamental concept of JavaScript 266

266

is prototypal inheritance. 267

267

But we will only talk about that 268

268

in the object oriented programming section of this course. 269

269

Because it doesn't make sense to learn about this now 270

270

only to then forget it all 271

271

until we finally reach that section. 272

272

The same is true for a detailed lecture on the event loop. 273

273

So I already introduced the event loop in this section, 274

274

but in the section about asynchronous JavaScript, 275

275

we will dive really deep into 276

276

how exactly the event loop works 277

277

and why it's such a fundamental piece 278

278

of the JavaScript engine. 279

279

Finally, we will have lectures on 280

280

how the DOM actually works behind the scenes too. 281

281

And that's going to be 282

282

in the advanced DOM and events section 283

283

so that you can then apply 284

284

what you learned there right away. 285

285

Okay? 286

286

And with that being said, let's now move on.