WEBVTT 1 00:00:01.200 --> 00:00:03.510 Let's now create a similar example 2 00:00:03.510 --> 00:00:06.360 to the one that we had in the last video 3 00:00:06.360 --> 00:00:10.350 so that we can explore this idea of object references 4 00:00:10.350 --> 00:00:13.230 that we just learned about in the previous lecture, 5 00:00:13.230 --> 00:00:15.543 but now by writing some code. 6 00:00:16.770 --> 00:00:18.960 So let's start this lecture simply 7 00:00:18.960 --> 00:00:21.930 by just writing an object. 8 00:00:21.930 --> 00:00:24.390 I'm gonna call this object jessica, 9 00:00:24.390 --> 00:00:28.890 because it will contain some information about this person, 10 00:00:28.890 --> 00:00:30.210 so this Jessica. 11 00:00:30.210 --> 00:00:34.620 So the first name is indeed Jessica. 12 00:00:34.620 --> 00:00:38.403 Then the last name is Williams. 13 00:00:40.740 --> 00:00:44.430 And I believe we have used actually this person before. 14 00:00:44.430 --> 00:00:47.910 And let's say the age is 27. 15 00:00:47.910 --> 00:00:49.320 Now, as we already know, 16 00:00:49.320 --> 00:00:52.260 this object will now be stored in the heap 17 00:00:52.260 --> 00:00:56.250 inside the JavaScript engine of our browser right here. 18 00:00:56.250 --> 00:00:59.670 So this case, this browser that I'm running this code in. 19 00:00:59.670 --> 00:01:02.460 And then the call stack will hold a reference 20 00:01:02.460 --> 00:01:05.010 to the memory address at which the object 21 00:01:05.010 --> 00:01:07.500 is stored in the heap. 22 00:01:07.500 --> 00:01:10.830 All right, and so let's now again see in action, 23 00:01:10.830 --> 00:01:14.490 what we just saw in the slides in the previous lecture. 24 00:01:14.490 --> 00:01:18.340 And so what I want to do now is to copy this object here 25 00:01:19.440 --> 00:01:20.880 into another object. 26 00:01:20.880 --> 00:01:24.090 So let's pretend that this Jessica did marry 27 00:01:24.090 --> 00:01:26.763 and changed her last name to something else. 28 00:01:28.230 --> 00:01:33.230 So let's say marriedJessica should be equal to Jessica. 29 00:01:34.890 --> 00:01:37.410 As we already know, this is not really gonna work, 30 00:01:37.410 --> 00:01:39.990 but again, we want to actually see that problem 31 00:01:39.990 --> 00:01:43.530 that we just talked about here in practice. 32 00:01:43.530 --> 00:01:45.550 So let's say marriedJessica.lastname 33 00:01:48.360 --> 00:01:51.453 should now change to Davis. 34 00:01:52.320 --> 00:01:57.320 And so then let's log to the console, 35 00:01:57.330 --> 00:01:59.043 the result of these two things. 36 00:02:00.330 --> 00:02:05.330 So before, and then just jessica, 37 00:02:05.520 --> 00:02:07.650 and I'm not sure if we ever did this, 38 00:02:07.650 --> 00:02:09.990 so logging two things to the console, 39 00:02:09.990 --> 00:02:12.540 but this is a nice trick that I like to use, 40 00:02:12.540 --> 00:02:16.350 which is first to log a string basically as a label 41 00:02:16.350 --> 00:02:18.810 of what I'm logging then here second. 42 00:02:18.810 --> 00:02:22.170 So this function, this console.log function accepts 43 00:02:22.170 --> 00:02:23.790 also multiple arguments 44 00:02:23.790 --> 00:02:26.340 and then all of them will be logged to the console. 45 00:02:27.600 --> 00:02:32.600 So here then after should be marriedJessica. 46 00:02:34.200 --> 00:02:36.270 And now before saving this code 47 00:02:36.270 --> 00:02:37.890 and reloading the browser, 48 00:02:37.890 --> 00:02:41.400 try to guess what the output will be. 49 00:02:41.400 --> 00:02:42.750 So did you do that? 50 00:02:42.750 --> 00:02:46.110 Well then let's save and let's see. 51 00:02:46.110 --> 00:02:48.360 And so here the after object, 52 00:02:48.360 --> 00:02:50.760 indeed we get the last name as Davis 53 00:02:50.760 --> 00:02:52.890 as we just changed it here. 54 00:02:52.890 --> 00:02:54.780 But then the strange thing again 55 00:02:54.780 --> 00:02:57.750 is that the last name also changed to Davis 56 00:02:57.750 --> 00:03:00.600 in the original object. 57 00:03:00.600 --> 00:03:01.920 So this one here before, 58 00:03:01.920 --> 00:03:05.400 so this original jessica object, right? 59 00:03:05.400 --> 00:03:09.420 So this is extremely strange, right? 60 00:03:09.420 --> 00:03:11.220 Well not for you anymore, 61 00:03:11.220 --> 00:03:14.430 because you already learned in the previous lecture 62 00:03:14.430 --> 00:03:16.890 why exactly this is happening. 63 00:03:16.890 --> 00:03:18.330 So this is happening 64 00:03:18.330 --> 00:03:22.499 because when we tried to copy the original jessica object, 65 00:03:22.499 --> 00:03:25.260 so right here, 66 00:03:25.260 --> 00:03:29.130 it did actually not create a new object in the heap. 67 00:03:29.130 --> 00:03:32.460 Instead this marriedJessica is simply 68 00:03:32.460 --> 00:03:35.700 the exact same reference as jessica. 69 00:03:35.700 --> 00:03:40.200 And so now marriedJessica and jessica are two variables 70 00:03:40.200 --> 00:03:43.890 that point to the exact same object in the heap. 71 00:03:43.890 --> 00:03:46.620 And so of course it makes total sense 72 00:03:46.620 --> 00:03:50.809 that if we change a property here on marriedJessica, 73 00:03:50.809 --> 00:03:53.550 then that change will also get reflected 74 00:03:53.550 --> 00:03:57.660 in the variable Jessica, so this one right here, 75 00:03:57.660 --> 00:04:01.860 again, because they are essentially just two different names 76 00:04:01.860 --> 00:04:04.050 for the same thing. 77 00:04:04.050 --> 00:04:05.490 Now by the way, 78 00:04:05.490 --> 00:04:08.580 this is actually also the reason why we can change 79 00:04:08.580 --> 00:04:11.820 properties on the marriedJessica object, 80 00:04:11.820 --> 00:04:14.100 which was declared using a const, 81 00:04:14.100 --> 00:04:17.100 and also on the Jessica object itself. 82 00:04:17.100 --> 00:04:21.810 So again, these two were actually declared using const, 83 00:04:21.810 --> 00:04:24.660 which we learned earlier are for constants. 84 00:04:24.660 --> 00:04:27.330 So we learned back then that we cannot change 85 00:04:27.330 --> 00:04:30.000 the value of a constant, right? 86 00:04:30.000 --> 00:04:32.580 But we can still change the property values 87 00:04:32.580 --> 00:04:35.910 like we just did here, right? 88 00:04:35.910 --> 00:04:38.851 And so again, that's because we're not actually changing 89 00:04:38.851 --> 00:04:42.330 the memory address, so the reference to the object, 90 00:04:42.330 --> 00:04:45.270 that is stored here in the constant. 91 00:04:45.270 --> 00:04:46.630 What we could not do 92 00:04:48.090 --> 00:04:51.180 would to actually assign it a brand new object. 93 00:04:51.180 --> 00:04:54.720 So we could not do actually this. 94 00:04:54.720 --> 00:04:57.510 So we could not do, jessica should be equal 95 00:04:57.510 --> 00:05:00.363 some new object with x 23. 96 00:05:01.440 --> 00:05:03.330 So here we would get an error: 97 00:05:03.330 --> 00:05:05.220 Assignment to constant variable. 98 00:05:05.220 --> 00:05:08.682 But we can do something like this. 99 00:05:08.682 --> 00:05:12.720 Age should be equal 30. 100 00:05:12.720 --> 00:05:14.220 So here it's not a problem 101 00:05:14.220 --> 00:05:16.170 because we're not changing the reference 102 00:05:16.170 --> 00:05:20.070 that is stored inside this jessica constant. 103 00:05:20.070 --> 00:05:23.460 All right, so again, just to make this completely clear, 104 00:05:23.460 --> 00:05:25.950 what we did here is not okay, 105 00:05:25.950 --> 00:05:28.770 because this year is a brand new object 106 00:05:28.770 --> 00:05:32.040 and so it will get a new reference in the heap. 107 00:05:32.040 --> 00:05:35.310 And so then here we are attempting to assign 108 00:05:35.310 --> 00:05:38.940 that brand new reference to this variable here, 109 00:05:38.940 --> 00:05:40.290 which is a constant. 110 00:05:40.290 --> 00:05:41.820 And so here we're really trying 111 00:05:41.820 --> 00:05:44.700 to change the value itself this time. 112 00:05:44.700 --> 00:05:47.760 And so this is not allowed in a constant. 113 00:05:47.760 --> 00:05:51.330 It would be allowed if this was a let. 114 00:05:51.330 --> 00:05:53.940 So then here we wouldn't get any problem. 115 00:05:53.940 --> 00:05:58.293 But again, if it is a const, we cannot do this. 116 00:05:59.430 --> 00:06:02.400 So this is a fundamental very important difference. 117 00:06:02.400 --> 00:06:03.480 And so please make sure 118 00:06:03.480 --> 00:06:06.210 that you really understand this part. 119 00:06:06.210 --> 00:06:09.420 Now let's just make this here slightly more interesting 120 00:06:09.420 --> 00:06:12.453 by actually transforming this here into a function. 121 00:06:14.370 --> 00:06:16.110 So just so you see that the same thing 122 00:06:16.110 --> 00:06:20.100 will also happen when we pass an object to a function. 123 00:06:20.100 --> 00:06:22.950 So let's say marryPerson, 124 00:06:22.950 --> 00:06:27.191 and so this will then receive the person object 125 00:06:27.191 --> 00:06:30.210 with a new last name. 126 00:06:30.210 --> 00:06:33.210 So we're basically gonna create a reusable way 127 00:06:33.210 --> 00:06:35.493 of doing what we had here. 128 00:06:37.440 --> 00:06:40.680 So here then the person that it will receive, 129 00:06:40.680 --> 00:06:42.600 and let's actually call this function first, 130 00:06:42.600 --> 00:06:45.390 which many times makes it easier to see 131 00:06:45.390 --> 00:06:47.220 how to actually do this. 132 00:06:47.220 --> 00:06:51.420 So again, we basically want to replace these two lines here. 133 00:06:51.420 --> 00:06:52.540 And so let's say 134 00:06:56.190 --> 00:06:59.508 that we want the marriedJessica to be equal 135 00:06:59.508 --> 00:07:01.713 of calling this function. 136 00:07:03.000 --> 00:07:06.273 And then with the original person, 137 00:07:07.830 --> 00:07:10.162 which is Jessica, and then with the new last name, 138 00:07:10.162 --> 00:07:15.162 which remember was David, or Davis. 139 00:07:15.420 --> 00:07:18.150 So here, let's call it actually originalPerson 140 00:07:18.150 --> 00:07:20.100 just to make this a bit more clear. 141 00:07:20.100 --> 00:07:24.090 And then here we just do what we did earlier here. 142 00:07:24.090 --> 00:07:27.000 So we just say originalPerson.lastName 143 00:07:28.260 --> 00:07:31.740 should be equal, the newLastName. 144 00:07:31.740 --> 00:07:35.583 And then we just return the originalPerson. 145 00:07:36.690 --> 00:07:40.950 So basically we just changed the last name here. 146 00:07:40.950 --> 00:07:44.162 And so now here we get again the last name Davis 147 00:07:44.162 --> 00:07:45.960 after the marriage, 148 00:07:45.960 --> 00:07:49.890 but also in the original Jessica object, 149 00:07:49.890 --> 00:07:52.050 which is this one right here. 150 00:07:52.050 --> 00:07:54.120 So what this means, again, 151 00:07:54.120 --> 00:07:56.790 is that we have the same situation as before, 152 00:07:56.790 --> 00:07:59.400 even though this time we didn't manually copy 153 00:07:59.400 --> 00:08:01.410 the object like we did here. 154 00:08:01.410 --> 00:08:02.610 But what we did do 155 00:08:02.610 --> 00:08:05.760 was to pass the object into the function here. 156 00:08:05.760 --> 00:08:10.530 And so this originalPerson then becomes this object here, 157 00:08:10.530 --> 00:08:12.570 but it will, just like before, 158 00:08:12.570 --> 00:08:15.240 be the exact same object in the heap. 159 00:08:15.240 --> 00:08:18.510 So only the reference is copied 160 00:08:18.510 --> 00:08:20.970 or passed into the function. 161 00:08:20.970 --> 00:08:24.150 And then as we change this originalPerson object, 162 00:08:24.150 --> 00:08:27.873 what we're actually changing is this jessica object 163 00:08:27.873 --> 00:08:30.510 that we passed in into the function. 164 00:08:30.510 --> 00:08:33.270 And so then we get the last name Davis 165 00:08:33.270 --> 00:08:36.063 in the original and in the marriedJessica. 166 00:08:37.470 --> 00:08:40.140 All right, so very important to understand 167 00:08:40.140 --> 00:08:43.590 that here in this situation as we call the function, 168 00:08:43.590 --> 00:08:46.980 basically the same thing happens as right here. 169 00:08:46.980 --> 00:08:49.596 And since this situation here is way more common, 170 00:08:49.596 --> 00:08:51.840 it's important to keep that in mind. 171 00:08:51.840 --> 00:08:55.680 So objects are not really copied when we pass them 172 00:08:55.680 --> 00:08:59.730 into a function, but instead we only pass the reference, 173 00:08:59.730 --> 00:09:03.720 and so it is still the same object in the heap 174 00:09:03.720 --> 00:09:05.130 inside the function 175 00:09:05.130 --> 00:09:08.103 as it is outside the function like here. 176 00:09:09.300 --> 00:09:12.960 All right, but now what if we actually wanted to 177 00:09:12.960 --> 00:09:16.260 really, really copy the object itself, 178 00:09:16.260 --> 00:09:20.370 so that we could then change one without changing the other? 179 00:09:20.370 --> 00:09:23.460 Or in other words, let's say that we now want to create 180 00:09:23.460 --> 00:09:26.250 a brand new object in the heap, 181 00:09:26.250 --> 00:09:30.120 but which looks exactly like the original object. 182 00:09:30.120 --> 00:09:34.140 So again, that's actually what we wanted to do here 183 00:09:34.140 --> 00:09:35.700 but couldn't really do, 184 00:09:35.700 --> 00:09:40.700 because this is not how we create a true copy of an object. 185 00:09:40.830 --> 00:09:45.240 So for this, let's actually create a new object. 186 00:09:45.240 --> 00:09:46.980 So I will just copy that one 187 00:09:46.980 --> 00:09:50.790 and then we will add another property here, 188 00:09:50.790 --> 00:09:53.730 which is gonna be the family. 189 00:09:53.730 --> 00:09:55.653 And here let's specify an array. 190 00:09:58.380 --> 00:10:03.380 And let's say that Alice and Bob are the family of Jessica. 191 00:10:03.510 --> 00:10:05.523 Let's call this here, jessica2. 192 00:10:06.660 --> 00:10:10.230 And so this is the object that we now want to really copy. 193 00:10:10.230 --> 00:10:13.290 So creating again, a brand new array 194 00:10:13.290 --> 00:10:16.410 or a brand new object actually in the heap, 195 00:10:16.410 --> 00:10:20.223 but which contains basically the exact same properties. 196 00:10:21.870 --> 00:10:23.893 So let's say jessicaCopy. 197 00:10:27.870 --> 00:10:29.640 And then here the way we do this 198 00:10:29.640 --> 00:10:33.120 is by using something called the spread operator 199 00:10:33.120 --> 00:10:37.230 and more about what the spread operator actually is. 200 00:10:37.230 --> 00:10:39.930 But the way we use it is to create, 201 00:10:39.930 --> 00:10:42.540 as we just said before, a brand new object. 202 00:10:42.540 --> 00:10:45.540 And then we can use these three dots 203 00:10:45.540 --> 00:10:47.910 and then here jessica2. 204 00:10:47.910 --> 00:10:50.180 And actually let's change the names here. 205 00:10:50.180 --> 00:10:53.697 So I want to call this one here, jessica1. 206 00:10:55.320 --> 00:11:00.320 Let's then change that here and here and here, 207 00:11:00.420 --> 00:11:02.400 and then this one here, just Jessica, 208 00:11:02.400 --> 00:11:06.333 so to keep our code a bit more readable in here. 209 00:11:07.770 --> 00:11:11.580 Okay, so again here, this is the spread operator, 210 00:11:11.580 --> 00:11:14.370 which basically places all the properties 211 00:11:14.370 --> 00:11:17.850 of this jessica object here into a brand new object, 212 00:11:17.850 --> 00:11:19.710 which is what we're specifying here 213 00:11:19.710 --> 00:11:21.660 with these new curly braces. 214 00:11:21.660 --> 00:11:23.850 So these are creating a brand new object, 215 00:11:23.850 --> 00:11:27.540 and then all the properties of jessica are placed in there. 216 00:11:27.540 --> 00:11:31.080 And so then really a new object is created in the heap, 217 00:11:31.080 --> 00:11:33.240 and the reference to that object 218 00:11:33.240 --> 00:11:36.120 will be stored here in jessicaCopy. 219 00:11:36.120 --> 00:11:39.160 And so now if we do jessicaCopy.lastName 220 00:11:42.540 --> 00:11:46.323 and set it again to Davis. 221 00:11:47.760 --> 00:11:50.430 So that's again, log to the console. 222 00:11:50.430 --> 00:11:53.310 And now let's just log both of them at the same time here, 223 00:11:53.310 --> 00:11:57.003 so jessica and jessicaCopy. 224 00:11:58.680 --> 00:12:01.890 Well then here we get an unexpected result. 225 00:12:01.890 --> 00:12:05.940 Ah, but that's because here I created .newLastName. 226 00:12:05.940 --> 00:12:09.120 So that was a mistake, maybe you saw that. 227 00:12:09.120 --> 00:12:12.029 So here it should of course be a lastName, 228 00:12:12.029 --> 00:12:13.401 so just like here. 229 00:12:13.401 --> 00:12:17.249 So we're changing the last name to Davis. 230 00:12:17.249 --> 00:12:19.590 And so yeah, here we actually get the result 231 00:12:19.590 --> 00:12:21.240 that we were looking for. 232 00:12:21.240 --> 00:12:24.900 So the original keeps the Williams as the last name 233 00:12:24.900 --> 00:12:27.300 and then the new one, so the copy, 234 00:12:27.300 --> 00:12:29.660 has Davis as the last name, 235 00:12:29.660 --> 00:12:31.620 so as we changed it here. 236 00:12:31.620 --> 00:12:34.470 And so with this, we kept the original object 237 00:12:34.470 --> 00:12:38.340 completely intact because in fact we now only 238 00:12:38.340 --> 00:12:40.260 mutated the last name. 239 00:12:40.260 --> 00:12:41.370 So we updated 240 00:12:41.370 --> 00:12:44.700 or changed this last name on the copy, 241 00:12:44.700 --> 00:12:48.060 which is a brand new object in the heap. 242 00:12:48.060 --> 00:12:50.850 However, this is still not perfect. 243 00:12:50.850 --> 00:12:52.440 So there is still a problem. 244 00:12:52.440 --> 00:12:55.530 So let's experiment with something here 245 00:12:55.530 --> 00:12:57.960 so that I can show you what I mean. 246 00:12:57.960 --> 00:13:00.910 So let's say jessicaCopy 247 00:13:02.820 --> 00:13:04.980 and then .family, 248 00:13:04.980 --> 00:13:08.400 which remember is this array right here, 249 00:13:08.400 --> 00:13:13.233 and then let's place a few more names in here. 250 00:13:14.370 --> 00:13:16.920 Because basically when Jessica marries, 251 00:13:16.920 --> 00:13:20.103 she gets some more new members into her family. 252 00:13:21.300 --> 00:13:22.870 So let's also add Mary 253 00:13:24.090 --> 00:13:28.713 and also another one. 254 00:13:29.580 --> 00:13:33.273 So let's say John here. 255 00:13:34.380 --> 00:13:36.480 All right, then let's log it to the console. 256 00:13:36.480 --> 00:13:39.513 Let's maybe get rid of this earlier one here. 257 00:13:41.400 --> 00:13:44.940 And I'm just gonna grab this one. 258 00:13:44.940 --> 00:13:49.517 So here it's now jessica and jessicaCopy. 259 00:13:52.230 --> 00:13:55.380 So remember how we pushed these two elements here 260 00:13:55.380 --> 00:13:58.860 into the family array of jessicaCopy. 261 00:13:58.860 --> 00:14:03.330 So only this jessicaCopy should be affected, right? 262 00:14:03.330 --> 00:14:06.840 Well, let's see if that is actually the case. 263 00:14:06.840 --> 00:14:10.863 So give ourselves a bit more space. 264 00:14:13.050 --> 00:14:14.460 Open up these two, 265 00:14:14.460 --> 00:14:18.510 and now notice how both the after, 266 00:14:18.510 --> 00:14:21.360 so after the marriage and the before, 267 00:14:21.360 --> 00:14:25.470 both have Mary and John added to the family. 268 00:14:25.470 --> 00:14:28.020 Well, that's very strange, right? 269 00:14:28.020 --> 00:14:32.940 Didn't we just create a brand new object in here? 270 00:14:32.940 --> 00:14:34.650 Well, yes we did. 271 00:14:34.650 --> 00:14:39.270 But remember how I said that what this does is basically 272 00:14:39.270 --> 00:14:41.100 to copy all the properties 273 00:14:41.100 --> 00:14:44.430 of this Jessica object into the new object. 274 00:14:44.430 --> 00:14:48.960 But notice that this family here is actually an object, 275 00:14:48.960 --> 00:14:53.070 because remember, our arrays are just objects. 276 00:14:53.070 --> 00:14:55.800 And so this is essentially just like a variable 277 00:14:55.800 --> 00:14:57.990 inside the Jessica object, 278 00:14:57.990 --> 00:15:02.250 which means that this object here is again in the heap, 279 00:15:02.250 --> 00:15:07.250 and this here just holds a reference to this other object. 280 00:15:07.470 --> 00:15:09.210 So this is what's happening here. 281 00:15:09.210 --> 00:15:11.160 We have an object. 282 00:15:11.160 --> 00:15:14.070 And so then in that object we have a primitive, 283 00:15:14.070 --> 00:15:16.530 another primitive and another primitive, 284 00:15:16.530 --> 00:15:18.810 so here everything is straightforward. 285 00:15:18.810 --> 00:15:21.420 But then here we have another object, 286 00:15:21.420 --> 00:15:23.400 so basically a nested object. 287 00:15:23.400 --> 00:15:26.820 And so this will get a brand new object in the heap, 288 00:15:26.820 --> 00:15:29.490 and this family property will point, 289 00:15:29.490 --> 00:15:34.170 so it will create an object reference to this object. 290 00:15:34.170 --> 00:15:37.580 And so what we did here when we copied the properties 291 00:15:37.580 --> 00:15:41.640 of the jessica object was to also copy the reference 292 00:15:41.640 --> 00:15:45.390 to this array, so to this object right here, 293 00:15:45.390 --> 00:15:47.430 which means that both jessica 294 00:15:47.430 --> 00:15:50.520 and jessicaCopy have the family property, 295 00:15:50.520 --> 00:15:54.600 which both point to the same object in the heap. 296 00:15:54.600 --> 00:15:58.350 So essentially what we did here, so this, 297 00:15:58.350 --> 00:16:00.090 a copy that we made here, 298 00:16:00.090 --> 00:16:03.240 only copied the first level of the object, 299 00:16:03.240 --> 00:16:05.730 but not the nested object. 300 00:16:05.730 --> 00:16:09.930 So since we only copied the first level of the object, 301 00:16:09.930 --> 00:16:12.960 so basically these primitives right here, 302 00:16:12.960 --> 00:16:15.150 which were really copied, 303 00:16:15.150 --> 00:16:18.420 then this is what we call a shallow copy, 304 00:16:18.420 --> 00:16:20.580 so again, only the first level. 305 00:16:20.580 --> 00:16:22.680 And shallow copy is a term 306 00:16:22.680 --> 00:16:25.980 that you will hear a lot in JavaScript. 307 00:16:25.980 --> 00:16:29.550 So again, this other nested object here 308 00:16:29.550 --> 00:16:31.710 hasn't really been copied. 309 00:16:31.710 --> 00:16:36.710 So jessica and or actually jessicaCopy and jessica, 310 00:16:37.620 --> 00:16:40.350 they're both having their family property 311 00:16:40.350 --> 00:16:42.540 pointing to the exact same array. 312 00:16:42.540 --> 00:16:46.050 And so therefore as we push these two elements 313 00:16:46.050 --> 00:16:49.380 into the array using the jessicaCopy variable, 314 00:16:49.380 --> 00:16:54.363 the same thing will appear in the original jessica object. 315 00:16:55.200 --> 00:17:00.000 So let's write that here, 316 00:17:00.000 --> 00:17:01.860 so that we have a shallow copy, 317 00:17:01.860 --> 00:17:05.580 which didn't really solve the problem that we wanted 318 00:17:05.580 --> 00:17:08.310 to solve in the first place, right? 319 00:17:08.310 --> 00:17:12.480 We wanted really a complete copy of this entire thing, 320 00:17:12.480 --> 00:17:14.910 not just the first level. 321 00:17:14.910 --> 00:17:18.960 And so in other words, what we wanted is a deep copy, 322 00:17:18.960 --> 00:17:21.780 which is also called a deep clone. 323 00:17:21.780 --> 00:17:24.750 And so this then copies the entire object, 324 00:17:24.750 --> 00:17:28.260 including all the nested objects. 325 00:17:28.260 --> 00:17:29.820 And in the real world, 326 00:17:29.820 --> 00:17:32.850 oftentimes this is exactly what we want. 327 00:17:32.850 --> 00:17:36.600 So oftentimes we need to deeply clone an object, 328 00:17:36.600 --> 00:17:38.130 for example, when we want 329 00:17:38.130 --> 00:17:42.000 to manipulate some big object in our code while ensuring 330 00:17:42.000 --> 00:17:44.943 that the original data always stays the same. 331 00:17:46.320 --> 00:17:48.243 So let's do that here. 332 00:17:49.200 --> 00:17:52.060 So, now let's do the deep copy 333 00:17:53.760 --> 00:17:57.420 or a deep clone as we could also call it. 334 00:17:57.420 --> 00:17:59.720 So let's call this one here, the jessicaClone. 335 00:18:00.960 --> 00:18:03.750 So it could be called a copy or a clone. 336 00:18:03.750 --> 00:18:05.880 You'll hear both of these terms. 337 00:18:05.880 --> 00:18:07.200 And so for that, 338 00:18:07.200 --> 00:18:10.860 we now have the new structured clone function 339 00:18:10.860 --> 00:18:13.980 that is now available in all modern browsers. 340 00:18:13.980 --> 00:18:16.260 So again, this is actually pretty new. 341 00:18:16.260 --> 00:18:19.020 And so in older browsers this will not work, 342 00:18:19.020 --> 00:18:21.630 but don't worry about that for now. 343 00:18:21.630 --> 00:18:25.517 So again, it is called structuredClone. 344 00:18:27.480 --> 00:18:29.640 So actually just that suggestion 345 00:18:29.640 --> 00:18:31.140 that was there on the screen. 346 00:18:31.140 --> 00:18:35.100 And then we just pass it the object that we want to clone. 347 00:18:35.100 --> 00:18:37.500 So that is indeed jessica. 348 00:18:37.500 --> 00:18:39.993 And so let's now try this exact same thing, 349 00:18:40.830 --> 00:18:42.993 but with the clone. 350 00:18:45.570 --> 00:18:46.893 So Clone, 351 00:18:48.720 --> 00:18:51.210 and then also this one here, 352 00:18:51.210 --> 00:18:54.153 so that we don't have to type so much. 353 00:18:56.820 --> 00:19:00.360 Here just to distinguish it from the other ones, 354 00:19:00.360 --> 00:19:03.003 let's say after the clone, 355 00:19:05.490 --> 00:19:08.050 or actually just, let's just say clone here 356 00:19:09.780 --> 00:19:14.160 and maybe original. 357 00:19:14.160 --> 00:19:16.510 So here we get for jessicaClone. 358 00:19:19.841 --> 00:19:20.674 And let's see. 359 00:19:21.600 --> 00:19:23.013 So this is the original. 360 00:19:25.080 --> 00:19:26.370 This is the clone. 361 00:19:26.370 --> 00:19:29.250 And as you see, we still have the Mary 362 00:19:29.250 --> 00:19:30.930 and John here from earlier. 363 00:19:30.930 --> 00:19:32.790 So it's been added here and here, 364 00:19:32.790 --> 00:19:36.180 but this is still from this part. 365 00:19:36.180 --> 00:19:40.380 So let's comment out maybe all of this. 366 00:19:40.380 --> 00:19:43.650 And for this, I'm actually using a VS Code shortcut. 367 00:19:43.650 --> 00:19:45.630 I'm not sure if I mentioned this earlier. 368 00:19:45.630 --> 00:19:48.630 It is just Command or Control on Windows, 369 00:19:48.630 --> 00:19:52.620 and then the slash, so this right here. 370 00:19:52.620 --> 00:19:55.620 So that's a bit easier than just typing it out. 371 00:19:55.620 --> 00:19:57.360 And so let's see that again. 372 00:19:57.360 --> 00:19:59.460 And so now beautiful. 373 00:19:59.460 --> 00:20:03.900 Our original nested object here stays the same. 374 00:20:03.900 --> 00:20:07.110 So it is still only this original, 375 00:20:07.110 --> 00:20:10.290 but then in our clone we actually get Mary 376 00:20:10.290 --> 00:20:14.430 and John added to it without it being added to the original. 377 00:20:14.430 --> 00:20:16.950 So that was the problem we had here earlier, 378 00:20:16.950 --> 00:20:20.940 but now our structured clone solved that problem. 379 00:20:20.940 --> 00:20:23.550 So this function here can be pretty important. 380 00:20:23.550 --> 00:20:27.150 And so this is one of the big takeaways of this lecture. 381 00:20:27.150 --> 00:20:30.330 Besides understanding how this whole thing works, 382 00:20:30.330 --> 00:20:33.150 also keep in mind that with this function here, 383 00:20:33.150 --> 00:20:36.900 you can create deep clones of objects. 384 00:20:36.900 --> 00:20:40.200 And this was actually a lot harder a few years ago 385 00:20:40.200 --> 00:20:41.640 because back then we had 386 00:20:41.640 --> 00:20:44.940 to use an external library like Lodash 387 00:20:44.940 --> 00:20:47.250 if we wanted to create deep clones. 388 00:20:47.250 --> 00:20:50.760 But now we have this structuredClone function, 389 00:20:50.760 --> 00:20:52.350 which has been added to browsers, 390 00:20:52.350 --> 00:20:54.693 which makes our lives a lot easier. 391 00:20:55.740 --> 00:20:58.740 So this is the big difference between a shallow copy 392 00:20:58.740 --> 00:21:00.510 and a deep copy. 393 00:21:00.510 --> 00:21:02.040 And always keep this in mind 394 00:21:02.040 --> 00:21:05.040 because you will hear about this a lot when you work 395 00:21:05.040 --> 00:21:07.143 with JavaScript in the future.