Original subtitles

1 1

Let's now create a similar example 2

2

to what we had in the last video, 3

3

just so that we can actually see this happening in practice. 4

4

And just like in a last video, 5

5

let's start by mutating a primitive value. 6

6

So, let's now use the last name 7

7

and I'm gonna set it here to Williams. 8

8

And so that's the initial value of this last name. 9

9

Then, let's also copy it, 10

10

and so that's because let's say 11

11

that this person gets married 12

12

and decides to change their last name. 13

13

However, we still want to remember the old name. 14

14

And so, we say oldLastName 15

15

is equal to the current last name, 16

16

at this position of the code. 17

17

But then we mutate actually the last name to Davis. 18

18

So, basically when this person gets married, 19

19

they then change their last name to Davis. 20

20

And of course, if we now check out both of them. 21

21

So, first the last name and then the old last name, 22

22

then we see that they are in fact different. 23

23

So, Davis is the new last name. 24

24

So, the one that we mutated here, 25

25

and Williams is this old last name 26

26

that was copied right here in this first line of code, 27

27

or actually the second line of code. 28

28

So, here, everything works 29

29

as we would expect in an intuitive way. 30

30

Now, remember, that it works this way 31

31

because each primitive value will simply be saved 32

32

into its own piece of memory in the stack, okay? 33

33

But now, let's do the same thing with an object, 34

34

which as we already know is a reference value 35

35

because it is gonna be stored in the heap, 36

36

and the stack then just keeps a reference 37

37

to the memory position 38

38

at which the object is stored in the heap. 39

39

So, let's create an object called Jessica. 40

40

And so, here we will have a first name, 41

41

of Jessica, 42

42

and a last name 43

43

of Williams. 44

44

Let's also give her an age of 27 45

45

just to make it more complete. 46

46

And now, let's again say that Jessica will get married 47

47

and will therefore change her last name. 48

48

And so this time, let's create a new object 49

49

for the married Jessica. 50

50

So, marriedJessica, 51

51

and it should be equal 52

52

to Jessica. 53

53

So, we're copying the entire object here. 54

54

At least that's what it looks like but behind the scenes 55

55

we are actually just copying the reference, 56

56

which will then point to the same object, remember that? 57

57

And so now, as we change the last name on marriedJessica, 58

58

so, last name let's change that to Davis, 59

59

but as we already know, 60

60

this will not give us the result that we expect. 61

61

So, before marriage, 62

62

let's log this original Jessica object, so to say. 63

63

And then after marriage, 64

64

and then here, the marriedJessica object. 65

65

Giving it a save. 66

66

And now as we see, 67

67

we get before the marriage and after the marriage, 68

68

both the last name of Davis, all right? 69

69

So, the last name Davis is now also 70

70

in the original Jessica object 71

71

and not just in the one that we copied. 72

72

And now at this point, we already know why this happened. 73

73

So, just to remember that, it happened because 74

74

when we attempted to copy the original Jessica object, 75

75

it did in fact not create a new object in the heap. 76

76

So, this one again, is not a new object in the heap. 77

77

It's simply just another variable in the stack, 78

78

which holds the reference to the original object. 79

79

So, both of these two variables simply point 80

80

to exactly the same memory address in the heap. 81

81

And that's because in the stack, 82

82

they both hold the same memory address reference. 83

83

And so of course, it makes sense 84

84

that if we change a property on marriedJessica, 85

85

it will also change on Jessica itself. 86

86

So, again, because they are essentially 87

87

just two different names for the same thing. 88

88

Now, this is also the reason why we can change properties 89

89

in the marriedJessica object, 90

90

which was declared using a const here. 91

91

And const is supposed to be for constants. 92

92

So, for things that we cannot change. 93

93

However, what actually needs to be constant 94

94

is the value in the stack. 95

95

And in this deck, the value only holds the reference, 96

96

which we are not actually changing. 97

97

The only thing that we are changing is the underlying object 98

98

that is stored in the heap. 99

99

And that is okay to change, 100

100

that has nothing to do with const or let, all right? 101

101

That's only about the value in the stack, 102

102

but if we change something in the heap 103

103

that has nothing to do with const or let. 104

104

Now, what we can't do 105

105

is to assign a completely different object now 106

106

to marriedJessica. 107

107

So, for example, we could not say marriedJessica 108

108

is equal to this new empty object, so that will not work. 109

109

Because this new object 110

110

will be stored at a different position in memory, 111

111

and therefore the reference to that position in memory 112

112

will have to change here in this variable. 113

113

And therefore, that does not work. 114

114

Because that is in the stack and so, since it is a constant, 115

115

we cannot change that value in the stack. 116

116

So, we cannot change the value to a new memory address, 117

117

and therefore, this does not work. 118

118

If it was a let here, 119

119

then we could do this, what we have here. 120

120

But since it's a constant, again, it is not allowed. 121

121

So, as a conclusion, completely changing the object, 122

122

so, assigning a new object to it 123

123

is completely different than simply changing a property 124

124

as we did here. 125

125

Okay? 126

126

So, it's a fundamental difference. 127

127

So, please make sure to really understand this. 128

128

Anyway, what if we actually really wanted to copy the object 129

129

so that we could then change one of them 130

130

without changing the other? 131

131

So, let me show you a way in which we can do that. 132

132

Let's first add some comments here once more. 133

133

So, primitive types, 134

134

reference types, 135

135

and then, 136

136

let's now say, 137

137

copying 138

138

objects. 139

139

All right. 140

140

And actually let's create a new Jessica object, 141

141

let me in fact, copy it from here. 142

142

So, let's say, Jessica2. 143

143

And so now, if we really wanted to copy this object, 144

144

we could use a function called object.assign. 145

145

And what this function does 146

146

is to essentially merge two objects 147

147

and then return a new one. 148

148

So, we could do this, 149

149

object.assign. 150

150

And then again, we can use this function 151

151

to merge two objects. 152

152

And so, what we can do 153

153

is to simply merge an empty new object 154

154

with Jessica2. 155

155

And this will then create a completely new object 156

156

where all the properties are really copied. 157

157

All right? 158

158

So, the result of calling this function here 159

159

with these arguments will be a new object. 160

160

And so, let's store that in 161

161

JessicaCopy. 162

162

And now, let's say that JessicaCopy gets married. 163

163

So, the same situation as before 164

164

changing her last name to Davis. 165

165

And now, let's lock both to the console just like here. 166

166

So, Jessica2, 167

167

and then here it's 168

168

JessicaCopy. 169

169

So, let's see what happens now. 170

170

And so, it's these last two here from line 222 and 223, 171

171

right? 172

172

And so now indeed, 173

173

we can preserve the original last name Williams 174

174

after we change the last name on this other object here. 175

175

So, this JessicaCopy. 176

176

And what this means is that this object now 177

177

is indeed a real copy of the original. 178

178

So, all the properties were essentially copied 179

179

from one object to the other. 180

180

And so, behind the scenes, what that means 181

181

is that a new object was in fact created in the heap 182

182

and JessicaCopy is now pointing to that object. 183

183

So, it has a reference to that new object. 184

184

However, there is still a problem 185

185

because using this technique of object.assign 186

186

only works on the first level. 187

187

Or in other words, if we have an object inside the object, 188

188

then this inner object will actually still be the same. 189

189

So, it will still point to the same place in memory. 190

190

And that's why we say that this object.assign 191

191

only creates a shallow copy 192

192

and not a deep clone which is what we would like to have. 193

193

So, again, a shallow copy will only copy the properties 194

194

in the first level while a deep clone would copy everything. 195

195

And to illustrate this, 196

196

let me actually show you what I mean. 197

197

And so, let's add an array here in this original object. 198

198

So, an array of family. 199

199

And this is gonna work as an example 200

200

because an array is really just an object behind the scenes. 201

201

So, here I can prove my point to you with this. 202

202

So, we have now an array called family, okay? 203

203

And so, you'll see that now this array here 204

204

is indeed in both objects. 205

205

So, okay. 206

206

So far so good. 207

207

But now, let's actually change that array in JessicaCopy. 208

208

So, in this one, 209

209

because as Jessica married, she also increased her family. 210

210

And so, let's now add some more family members there. 211

211

So, JessicaCopy.family, 212

212

and then let's use the push method to add a new element 213

213

to the end of the array. 214

214

Let's add Mary and let's also add another one. 215

215

So, family.push, 216

216

and let's add John. 217

217

So, remember here we are manipulating the copied object, 218

218

which is actually a copy, 219

219

but now here we are manipulating an object 220

220

that's within the object. 221

221

So, that's this object. 222

222

And so, now as we save this, 223

223

it still looks the same, 224

224

but that's because we need to log, of course, 225

225

after this operation happens. 226

226

And so now, we see that both the objects 227

227

now have a family with four members. 228

228

Let's open this a little bit, give it some more space. 229

229

And so indeed, now before the marriage and after marriage, 230

230

the family has all these four members, all right? 231

231

So, the last name was of course, 232

232

as we already saw preserved. 233

233

So, the name before the marriage is Williams, 234

234

and that was preserved because that's in the first level 235

235

and object.assign here took care of copying that property. 236

236

And so that was not changed as we changed the last name 237

237

in the copy. 238

238

However, the family object is a deeply nested object. 239

239

And so therefore, object.assign did not really, 240

240

behind the scenes, copy it to the new object. 241

241

All right? 242

242

So in essence, both the objects, Jessica2 and JessicaCopy 243

243

have a property called family, 244

244

which points at the same object in the memory heap, 245

245

and that object is, of course, this array. 246

246

And so, when we change the array in one of them, 247

247

it's also gonna be changed in the other one. 248

248

Now, a deep clone is what we would need here, 249

249

but it is not easy to achieve, 250

250

and it would actually be beyond the scope of this video 251

251

to learn how to create a deep clone. 252

252

Usually, we do something like this 253

253

which is like really complex 254

254

using an external library, for example, like Lo-Dash, 255

255

and this library has a ton of helpful tools 256

256

and one of them is for deep cloning. 257

257

And actually, we will do that in a later section 258

258

just so you see how we can include an external library 259

259

to do this kind of stuff. 260

260

All right. 261

261

And with this, we actually finish this section 262

262

about how JavaScript works behind the scenes. 263

263

And it was a long one with so many things 264

264

and so many new concepts to learn. 265

265

And many of them were hard and probably confusing, 266

266

but that's not a problem. 267

267

Though it's always a part of learning, 268

268

and even if you did not understand 100% of everything, 269

269

you're still good to move on in the course 270

270

to the next section now. 271

271

But just reaching the end of this section 272

272

already gave you a big advantage over many other developers, 273

273

which have no idea about many of the things 274

274

that I showed you here in this section. 275

275

So, congratulations for sticking with it to the end 276

276

and for learning all of this valuable knowledge. 277

277

And now, I see you in the next section.