Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,350 --> 00:00:03,920
Let's now create a similar example
2
00:00:03,920 --> 00:00:06,075
to what we had in the last video,
3
00:00:06,075 --> 00:00:11,075
just so that we can actually see this happening in practice.
4
00:00:12,740 --> 00:00:14,370
And just like in a last video,
5
00:00:14,370 --> 00:00:17,393
let's start by mutating a primitive value.
6
00:00:18,553 --> 00:00:21,120
So, let's now use the last name
7
00:00:23,350 --> 00:00:27,130
and I'm gonna set it here to Williams.
8
00:00:27,130 --> 00:00:31,090
And so that's the initial value of this last name.
9
00:00:31,090 --> 00:00:33,600
Then, let's also copy it,
10
00:00:33,600 --> 00:00:35,860
and so that's because let's say
11
00:00:35,860 --> 00:00:37,870
that this person gets married
12
00:00:37,870 --> 00:00:40,870
and decides to change their last name.
13
00:00:40,870 --> 00:00:43,623
However, we still want to remember the old name.
14
00:00:44,720 --> 00:00:46,020
And so, we say oldLastName
15
00:00:48,130 --> 00:00:51,260
is equal to the current last name,
16
00:00:51,260 --> 00:00:53,390
at this position of the code.
17
00:00:53,390 --> 00:00:57,919
But then we mutate actually the last name to Davis.
18
00:00:57,919 --> 00:01:01,570
So, basically when this person gets married,
19
00:01:01,570 --> 00:01:04,347
they then change their last name to Davis.
20
00:01:04,347 --> 00:01:08,023
And of course, if we now check out both of them.
21
00:01:08,023 --> 00:01:13,023
So, first the last name and then the old last name,
22
00:01:13,664 --> 00:01:18,540
then we see that they are in fact different.
23
00:01:18,540 --> 00:01:21,530
So, Davis is the new last name.
24
00:01:21,530 --> 00:01:23,330
So, the one that we mutated here,
25
00:01:23,330 --> 00:01:27,630
and Williams is this old last name
26
00:01:27,630 --> 00:01:31,300
that was copied right here in this first line of code,
27
00:01:31,300 --> 00:01:33,660
or actually the second line of code.
28
00:01:33,660 --> 00:01:35,050
So, here, everything works
29
00:01:35,050 --> 00:01:38,310
as we would expect in an intuitive way.
30
00:01:38,310 --> 00:01:40,533
Now, remember, that it works this way
31
00:01:40,533 --> 00:01:44,190
because each primitive value will simply be saved
32
00:01:44,190 --> 00:01:48,580
into its own piece of memory in the stack, okay?
33
00:01:48,580 --> 00:01:52,010
But now, let's do the same thing with an object,
34
00:01:52,010 --> 00:01:55,670
which as we already know is a reference value
35
00:01:55,670 --> 00:01:58,510
because it is gonna be stored in the heap,
36
00:01:58,510 --> 00:02:01,320
and the stack then just keeps a reference
37
00:02:01,320 --> 00:02:02,890
to the memory position
38
00:02:02,890 --> 00:02:05,993
at which the object is stored in the heap.
39
00:02:09,500 --> 00:02:13,493
So, let's create an object called Jessica.
40
00:02:15,190 --> 00:02:17,633
And so, here we will have a first name,
41
00:02:20,767 --> 00:02:21,993
of Jessica,
42
00:02:22,890 --> 00:02:24,200
and a last name
43
00:02:26,353 --> 00:02:27,820
of Williams.
44
00:02:27,820 --> 00:02:31,750
Let's also give her an age of 27
45
00:02:31,750 --> 00:02:33,840
just to make it more complete.
46
00:02:33,840 --> 00:02:37,268
And now, let's again say that Jessica will get married
47
00:02:37,268 --> 00:02:40,160
and will therefore change her last name.
48
00:02:40,160 --> 00:02:43,330
And so this time, let's create a new object
49
00:02:43,330 --> 00:02:45,283
for the married Jessica.
50
00:02:47,130 --> 00:02:48,857
So, marriedJessica,
51
00:02:49,862 --> 00:02:51,470
and it should be equal
52
00:02:53,037 --> 00:02:54,060
to Jessica.
53
00:02:54,060 --> 00:02:56,370
So, we're copying the entire object here.
54
00:02:56,370 --> 00:02:59,920
At least that's what it looks like but behind the scenes
55
00:02:59,920 --> 00:03:02,380
we are actually just copying the reference,
56
00:03:02,380 --> 00:03:05,585
which will then point to the same object, remember that?
57
00:03:05,585 --> 00:03:10,083
And so now, as we change the last name on marriedJessica,
58
00:03:11,530 --> 00:03:16,400
so, last name let's change that to Davis,
59
00:03:16,400 --> 00:03:17,880
but as we already know,
60
00:03:17,880 --> 00:03:20,883
this will not give us the result that we expect.
61
00:03:22,770 --> 00:03:25,193
So, before marriage,
62
00:03:27,150 --> 00:03:31,523
let's log this original Jessica object, so to say.
63
00:03:32,470 --> 00:03:36,053
And then after marriage,
64
00:03:38,470 --> 00:03:41,033
and then here, the marriedJessica object.
65
00:03:42,760 --> 00:03:44,190
Giving it a save.
66
00:03:44,190 --> 00:03:45,920
And now as we see,
67
00:03:45,920 --> 00:03:49,090
we get before the marriage and after the marriage,
68
00:03:49,090 --> 00:03:53,030
both the last name of Davis, all right?
69
00:03:53,030 --> 00:03:55,640
So, the last name Davis is now also
70
00:03:55,640 --> 00:03:58,290
in the original Jessica object
71
00:03:58,290 --> 00:04:01,200
and not just in the one that we copied.
72
00:04:01,200 --> 00:04:05,420
And now at this point, we already know why this happened.
73
00:04:05,420 --> 00:04:08,800
So, just to remember that, it happened because
74
00:04:08,800 --> 00:04:12,900
when we attempted to copy the original Jessica object,
75
00:04:12,900 --> 00:04:17,900
it did in fact not create a new object in the heap.
76
00:04:17,917 --> 00:04:22,740
So, this one again, is not a new object in the heap.
77
00:04:22,740 --> 00:04:25,970
It's simply just another variable in the stack,
78
00:04:25,970 --> 00:04:29,445
which holds the reference to the original object.
79
00:04:29,445 --> 00:04:32,660
So, both of these two variables simply point
80
00:04:32,660 --> 00:04:36,210
to exactly the same memory address in the heap.
81
00:04:36,210 --> 00:04:38,020
And that's because in the stack,
82
00:04:38,020 --> 00:04:41,740
they both hold the same memory address reference.
83
00:04:41,740 --> 00:04:44,090
And so of course, it makes sense
84
00:04:44,090 --> 00:04:46,753
that if we change a property on marriedJessica,
85
00:04:47,690 --> 00:04:51,240
it will also change on Jessica itself.
86
00:04:51,240 --> 00:04:53,710
So, again, because they are essentially
87
00:04:53,710 --> 00:04:57,360
just two different names for the same thing.
88
00:04:57,360 --> 00:05:01,240
Now, this is also the reason why we can change properties
89
00:05:01,240 --> 00:05:03,410
in the marriedJessica object,
90
00:05:03,410 --> 00:05:07,260
which was declared using a const here.
91
00:05:07,260 --> 00:05:10,150
And const is supposed to be for constants.
92
00:05:10,150 --> 00:05:13,110
So, for things that we cannot change.
93
00:05:13,110 --> 00:05:16,120
However, what actually needs to be constant
94
00:05:16,120 --> 00:05:18,320
is the value in the stack.
95
00:05:18,320 --> 00:05:21,600
And in this deck, the value only holds the reference,
96
00:05:21,600 --> 00:05:24,330
which we are not actually changing.
97
00:05:24,330 --> 00:05:27,908
The only thing that we are changing is the underlying object
98
00:05:27,908 --> 00:05:30,020
that is stored in the heap.
99
00:05:30,020 --> 00:05:31,840
And that is okay to change,
100
00:05:31,840 --> 00:05:35,740
that has nothing to do with const or let, all right?
101
00:05:35,740 --> 00:05:38,900
That's only about the value in the stack,
102
00:05:38,900 --> 00:05:40,950
but if we change something in the heap
103
00:05:40,950 --> 00:05:44,750
that has nothing to do with const or let.
104
00:05:44,750 --> 00:05:46,040
Now, what we can't do
105
00:05:46,040 --> 00:05:49,490
is to assign a completely different object now
106
00:05:49,490 --> 00:05:51,293
to marriedJessica.
107
00:05:52,720 --> 00:05:56,220
So, for example, we could not say marriedJessica
108
00:05:56,220 --> 00:06:00,930
is equal to this new empty object, so that will not work.
109
00:06:00,930 --> 00:06:02,310
Because this new object
110
00:06:02,310 --> 00:06:05,120
will be stored at a different position in memory,
111
00:06:05,120 --> 00:06:08,680
and therefore the reference to that position in memory
112
00:06:08,680 --> 00:06:11,600
will have to change here in this variable.
113
00:06:11,600 --> 00:06:13,940
And therefore, that does not work.
114
00:06:13,940 --> 00:06:18,050
Because that is in the stack and so, since it is a constant,
115
00:06:18,050 --> 00:06:20,700
we cannot change that value in the stack.
116
00:06:20,700 --> 00:06:23,830
So, we cannot change the value to a new memory address,
117
00:06:23,830 --> 00:06:26,533
and therefore, this does not work.
118
00:06:26,533 --> 00:06:28,458
If it was a let here,
119
00:06:28,458 --> 00:06:31,730
then we could do this, what we have here.
120
00:06:31,730 --> 00:06:36,660
But since it's a constant, again, it is not allowed.
121
00:06:36,660 --> 00:06:40,270
So, as a conclusion, completely changing the object,
122
00:06:40,270 --> 00:06:42,830
so, assigning a new object to it
123
00:06:42,830 --> 00:06:46,143
is completely different than simply changing a property
124
00:06:46,143 --> 00:06:48,380
as we did here.
125
00:06:48,380 --> 00:06:49,213
Okay?
126
00:06:49,213 --> 00:06:50,920
So, it's a fundamental difference.
127
00:06:50,920 --> 00:06:54,558
So, please make sure to really understand this.
128
00:06:54,558 --> 00:06:59,558
Anyway, what if we actually really wanted to copy the object
129
00:07:00,150 --> 00:07:02,480
so that we could then change one of them
130
00:07:02,480 --> 00:07:04,550
without changing the other?
131
00:07:04,550 --> 00:07:07,880
So, let me show you a way in which we can do that.
132
00:07:07,880 --> 00:07:10,130
Let's first add some comments here once more.
133
00:07:13,600 --> 00:07:15,023
So, primitive types,
134
00:07:16,970 --> 00:07:18,970
reference types,
135
00:07:18,970 --> 00:07:19,963
and then,
136
00:07:22,230 --> 00:07:24,050
let's now say,
137
00:07:24,050 --> 00:07:24,910
copying
138
00:07:26,730 --> 00:07:28,110
objects.
139
00:07:28,110 --> 00:07:29,610
All right.
140
00:07:29,610 --> 00:07:32,880
And actually let's create a new Jessica object,
141
00:07:32,880 --> 00:07:35,223
let me in fact, copy it from here.
142
00:07:39,410 --> 00:07:41,207
So, let's say, Jessica2.
143
00:07:43,070 --> 00:07:46,310
And so now, if we really wanted to copy this object,
144
00:07:46,310 --> 00:07:50,660
we could use a function called object.assign.
145
00:07:50,660 --> 00:07:52,100
And what this function does
146
00:07:52,100 --> 00:07:54,730
is to essentially merge two objects
147
00:07:54,730 --> 00:07:57,220
and then return a new one.
148
00:07:57,220 --> 00:07:58,603
So, we could do this,
149
00:08:00,337 --> 00:08:02,373
object.assign.
150
00:08:03,300 --> 00:08:05,790
And then again, we can use this function
151
00:08:05,790 --> 00:08:07,700
to merge two objects.
152
00:08:07,700 --> 00:08:08,680
And so, what we can do
153
00:08:08,680 --> 00:08:12,000
is to simply merge an empty new object
154
00:08:12,000 --> 00:08:14,085
with Jessica2.
155
00:08:14,085 --> 00:08:17,670
And this will then create a completely new object
156
00:08:17,670 --> 00:08:20,930
where all the properties are really copied.
157
00:08:20,930 --> 00:08:21,763
All right?
158
00:08:21,763 --> 00:08:23,940
So, the result of calling this function here
159
00:08:23,940 --> 00:08:27,000
with these arguments will be a new object.
160
00:08:27,000 --> 00:08:29,590
And so, let's store that in
161
00:08:31,966 --> 00:08:32,966
JessicaCopy.
162
00:08:33,850 --> 00:08:38,248
And now, let's say that JessicaCopy gets married.
163
00:08:38,248 --> 00:08:41,170
So, the same situation as before
164
00:08:41,170 --> 00:08:43,353
changing her last name to Davis.
165
00:08:46,310 --> 00:08:49,703
And now, let's lock both to the console just like here.
166
00:08:53,500 --> 00:08:54,667
So, Jessica2,
167
00:08:56,100 --> 00:08:57,050
and then here it's
168
00:08:58,579 --> 00:09:00,243
JessicaCopy.
169
00:09:01,490 --> 00:09:03,293
So, let's see what happens now.
170
00:09:05,248 --> 00:09:09,013
And so, it's these last two here from line 222 and 223,
171
00:09:10,063 --> 00:09:11,090
right?
172
00:09:11,090 --> 00:09:12,600
And so now indeed,
173
00:09:12,600 --> 00:09:16,230
we can preserve the original last name Williams
174
00:09:16,230 --> 00:09:20,490
after we change the last name on this other object here.
175
00:09:20,490 --> 00:09:22,270
So, this JessicaCopy.
176
00:09:22,270 --> 00:09:25,370
And what this means is that this object now
177
00:09:25,370 --> 00:09:28,670
is indeed a real copy of the original.
178
00:09:28,670 --> 00:09:31,540
So, all the properties were essentially copied
179
00:09:31,540 --> 00:09:33,830
from one object to the other.
180
00:09:33,830 --> 00:09:36,060
And so, behind the scenes, what that means
181
00:09:36,060 --> 00:09:39,630
is that a new object was in fact created in the heap
182
00:09:39,630 --> 00:09:43,700
and JessicaCopy is now pointing to that object.
183
00:09:43,700 --> 00:09:47,160
So, it has a reference to that new object.
184
00:09:47,160 --> 00:09:49,830
However, there is still a problem
185
00:09:49,830 --> 00:09:53,634
because using this technique of object.assign
186
00:09:53,634 --> 00:09:56,620
only works on the first level.
187
00:09:56,620 --> 00:10:01,260
Or in other words, if we have an object inside the object,
188
00:10:01,260 --> 00:10:05,650
then this inner object will actually still be the same.
189
00:10:05,650 --> 00:10:08,820
So, it will still point to the same place in memory.
190
00:10:08,820 --> 00:10:11,796
And that's why we say that this object.assign
191
00:10:11,796 --> 00:10:14,830
only creates a shallow copy
192
00:10:14,830 --> 00:10:18,878
and not a deep clone which is what we would like to have.
193
00:10:18,878 --> 00:10:22,870
So, again, a shallow copy will only copy the properties
194
00:10:22,870 --> 00:10:27,610
in the first level while a deep clone would copy everything.
195
00:10:27,610 --> 00:10:29,230
And to illustrate this,
196
00:10:29,230 --> 00:10:31,810
let me actually show you what I mean.
197
00:10:31,810 --> 00:10:36,810
And so, let's add an array here in this original object.
198
00:10:37,330 --> 00:10:38,963
So, an array of family.
199
00:10:40,216 --> 00:10:43,032
And this is gonna work as an example
200
00:10:43,032 --> 00:10:47,423
because an array is really just an object behind the scenes.
201
00:10:48,782 --> 00:10:52,920
So, here I can prove my point to you with this.
202
00:10:52,920 --> 00:10:56,736
So, we have now an array called family, okay?
203
00:10:56,736 --> 00:10:59,953
And so, you'll see that now this array here
204
00:10:59,953 --> 00:11:03,040
is indeed in both objects.
205
00:11:03,040 --> 00:11:04,500
So, okay.
206
00:11:04,500 --> 00:11:06,210
So far so good.
207
00:11:06,210 --> 00:11:11,150
But now, let's actually change that array in JessicaCopy.
208
00:11:11,150 --> 00:11:12,420
So, in this one,
209
00:11:12,420 --> 00:11:17,400
because as Jessica married, she also increased her family.
210
00:11:17,400 --> 00:11:21,363
And so, let's now add some more family members there.
211
00:11:24,286 --> 00:11:27,920
So, JessicaCopy.family,
212
00:11:27,920 --> 00:11:31,100
and then let's use the push method to add a new element
213
00:11:31,100 --> 00:11:32,373
to the end of the array.
214
00:11:33,570 --> 00:11:37,543
Let's add Mary and let's also add another one.
215
00:11:39,310 --> 00:11:40,313
So, family.push,
216
00:11:43,875 --> 00:11:45,890
and let's add John.
217
00:11:45,890 --> 00:11:50,060
So, remember here we are manipulating the copied object,
218
00:11:50,060 --> 00:11:52,440
which is actually a copy,
219
00:11:52,440 --> 00:11:55,480
but now here we are manipulating an object
220
00:11:55,480 --> 00:11:57,103
that's within the object.
221
00:11:58,190 --> 00:11:59,863
So, that's this object.
222
00:12:00,750 --> 00:12:02,303
And so, now as we save this,
223
00:12:03,456 --> 00:12:05,370
it still looks the same,
224
00:12:05,370 --> 00:12:08,350
but that's because we need to log, of course,
225
00:12:08,350 --> 00:12:10,053
after this operation happens.
226
00:12:11,560 --> 00:12:14,880
And so now, we see that both the objects
227
00:12:14,880 --> 00:12:17,643
now have a family with four members.
228
00:12:20,247 --> 00:12:24,050
Let's open this a little bit, give it some more space.
229
00:12:24,050 --> 00:12:28,095
And so indeed, now before the marriage and after marriage,
230
00:12:28,095 --> 00:12:32,325
the family has all these four members, all right?
231
00:12:32,325 --> 00:12:34,800
So, the last name was of course,
232
00:12:34,800 --> 00:12:36,773
as we already saw preserved.
233
00:12:37,680 --> 00:12:40,240
So, the name before the marriage is Williams,
234
00:12:40,240 --> 00:12:43,605
and that was preserved because that's in the first level
235
00:12:43,605 --> 00:12:48,605
and object.assign here took care of copying that property.
236
00:12:48,960 --> 00:12:52,780
And so that was not changed as we changed the last name
237
00:12:52,780 --> 00:12:54,290
in the copy.
238
00:12:54,290 --> 00:12:59,130
However, the family object is a deeply nested object.
239
00:12:59,130 --> 00:13:03,370
And so therefore, object.assign did not really,
240
00:13:03,370 --> 00:13:06,910
behind the scenes, copy it to the new object.
241
00:13:06,910 --> 00:13:07,743
All right?
242
00:13:07,743 --> 00:13:10,790
So in essence, both the objects, Jessica2 and JessicaCopy
243
00:13:12,790 --> 00:13:15,060
have a property called family,
244
00:13:15,060 --> 00:13:18,810
which points at the same object in the memory heap,
245
00:13:18,810 --> 00:13:22,810
and that object is, of course, this array.
246
00:13:22,810 --> 00:13:25,250
And so, when we change the array in one of them,
247
00:13:25,250 --> 00:13:28,410
it's also gonna be changed in the other one.
248
00:13:28,410 --> 00:13:31,358
Now, a deep clone is what we would need here,
249
00:13:31,358 --> 00:13:33,760
but it is not easy to achieve,
250
00:13:33,760 --> 00:13:37,300
and it would actually be beyond the scope of this video
251
00:13:37,300 --> 00:13:40,620
to learn how to create a deep clone.
252
00:13:40,620 --> 00:13:42,800
Usually, we do something like this
253
00:13:42,800 --> 00:13:45,070
which is like really complex
254
00:13:45,070 --> 00:13:49,090
using an external library, for example, like Lo-Dash,
255
00:13:49,090 --> 00:13:52,460
and this library has a ton of helpful tools
256
00:13:52,460 --> 00:13:54,960
and one of them is for deep cloning.
257
00:13:54,960 --> 00:13:57,750
And actually, we will do that in a later section
258
00:13:57,750 --> 00:14:01,550
just so you see how we can include an external library
259
00:14:01,550 --> 00:14:03,451
to do this kind of stuff.
260
00:14:03,451 --> 00:14:04,820
All right.
261
00:14:04,820 --> 00:14:07,810
And with this, we actually finish this section
262
00:14:07,810 --> 00:14:11,140
about how JavaScript works behind the scenes.
263
00:14:11,140 --> 00:14:14,500
And it was a long one with so many things
264
00:14:14,500 --> 00:14:16,853
and so many new concepts to learn.
265
00:14:16,853 --> 00:14:20,750
And many of them were hard and probably confusing,
266
00:14:20,750 --> 00:14:22,470
but that's not a problem.
267
00:14:22,470 --> 00:14:24,505
Though it's always a part of learning,
268
00:14:24,505 --> 00:14:29,505
and even if you did not understand 100% of everything,
269
00:14:29,520 --> 00:14:31,870
you're still good to move on in the course
270
00:14:31,870 --> 00:14:33,840
to the next section now.
271
00:14:33,840 --> 00:14:35,970
But just reaching the end of this section
272
00:14:35,970 --> 00:14:40,110
already gave you a big advantage over many other developers,
273
00:14:40,110 --> 00:14:43,430
which have no idea about many of the things
274
00:14:43,430 --> 00:14:45,840
that I showed you here in this section.
275
00:14:45,840 --> 00:14:49,189
So, congratulations for sticking with it to the end
276
00:14:49,189 --> 00:14:52,580
and for learning all of this valuable knowledge.
277
00:14:52,580 --> 00:14:55,123
And now, I see you in the next section.
20326
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.