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.