1 00:00:02,320 --> 00:00:06,670 We also have another nice feature in Javascript which we don't really need in this app but which we 2 00:00:06,670 --> 00:00:09,760 will need in general from time to time in Javascript 3 00:00:09,880 --> 00:00:13,660 and that's the spread operator in combination with objects. 4 00:00:13,660 --> 00:00:20,320 Now we saw the spread operator in combination with arrays but we can also use it in combination with 5 00:00:20,380 --> 00:00:24,610 objects and I will actually show this here in the console because there isn't really a great place to 6 00:00:24,610 --> 00:00:26,440 apply it in this dummy project. 7 00:00:27,370 --> 00:00:36,330 So let's say here we have an object, good old person and that person has a name, Max and maybe has some 8 00:00:36,330 --> 00:00:44,040 hobbies which is an array where I have sports and cooking, close the array, close the object and we're 9 00:00:44,040 --> 00:00:44,940 done, 10 00:00:44,940 --> 00:00:46,370 so that's my person here. 11 00:00:46,560 --> 00:00:54,780 Now if we want to copy that, for example into a new person, so another person here, then we can try it 12 00:00:54,780 --> 00:00:58,650 like this but as you learned, objects are reference values 13 00:00:58,650 --> 00:01:05,310 so if I now set person.age equal to 30 and I add this new property, another person will also have have it 14 00:01:05,310 --> 00:01:09,300 because it points at the very same property in memory. 15 00:01:09,350 --> 00:01:16,040 Now we can avoid this if we want to by using the spread operator. For that if I create yet another 16 00:01:16,040 --> 00:01:24,950 constant, person2, however you want to name it, you can create a new object with curly braces and then 17 00:01:24,950 --> 00:01:32,210 use the three dots just as you do it on arrays and then add that other object you want to spread into 18 00:01:32,210 --> 00:01:33,710 this object. 19 00:01:33,710 --> 00:01:41,540 What this does is it takes all key-value pairs of that object you pass after the spread operator and 20 00:01:41,540 --> 00:01:44,840 merge these key-value pairs into this object. 21 00:01:45,440 --> 00:01:52,460 So it creates a new object but copies over the values you have in the keys of the old object and not 22 00:01:52,460 --> 00:01:59,960 only values but also the key names. If you do that and I set person.age to 31, you will see that person2 23 00:01:59,960 --> 00:02:05,680 still has that age of 30 and didn't get that new value because now we created a copy. 24 00:02:05,710 --> 00:02:06,680 Now beware, 25 00:02:06,700 --> 00:02:12,190 just as with the arrays example earlier in the course, if you have other reference values inside of your 26 00:02:12,190 --> 00:02:17,230 object, like the hobbies array, an array is an object and therefore is also a reference value, 27 00:02:17,230 --> 00:02:20,500 then this will not be copied, instead 28 00:02:20,500 --> 00:02:26,770 well it's of course kind of copied over into the new object but the object is not cloned, it's not copied, 29 00:02:26,770 --> 00:02:30,000 it's still the same array object in memory. 30 00:02:30,040 --> 00:02:40,000 So if I go to person.hobbies and I push a new hobby of coding, you will see that person2 also has 31 00:02:40,000 --> 00:02:46,830 that on his hobbies if he expand this, here we also see coding now and that's just something which I 32 00:02:46,830 --> 00:02:49,380 explained in the arrays section already. 33 00:02:49,380 --> 00:02:55,920 This is normal, this is how reference values behave and the spread operator does not do a deep copy where 34 00:02:55,920 --> 00:03:01,500 it goes through all level of nested reference values you might have in this object or array and then 35 00:03:01,500 --> 00:03:07,680 copies it from scratch, instead it just copies the top level key-value pairs into a brand new object 36 00:03:07,920 --> 00:03:11,570 and any nested reference values are kept, 37 00:03:11,580 --> 00:03:17,730 the addresses there are kept, there are no hobbies created. If you would want to copy those as well, you 38 00:03:17,730 --> 00:03:23,820 would have to do it manually by assigning a new hobbies array where you copy over the old array and that's 39 00:03:23,820 --> 00:03:25,450 actually quite interesting to see so 40 00:03:25,460 --> 00:03:27,420 let me show you how that would work. 41 00:03:27,480 --> 00:03:34,500 We have person3 and again, I copy person let's say but I want to make sure that hobbies is actually overwritten 42 00:03:34,500 --> 00:03:40,020 with a new array and we can not just use this technique if we want to overwrite another nested reference 43 00:03:40,020 --> 00:03:46,080 value but whenever we want to overwrite a value. So let's say we also want to overwrite age, well then we 44 00:03:46,080 --> 00:03:50,480 just add age here and set this to let's say 30 or 29 45 00:03:50,480 --> 00:03:56,310 and what this will do is it will pull all key-value pairs from person, including age but since then you 46 00:03:56,310 --> 00:04:02,430 again add age after this finished, the age that was pulled out of person will be overwritten with this 47 00:04:02,430 --> 00:04:09,210 value and the same of course can be applied to hobbies. I set hobbies here to a new array and now we can 48 00:04:09,210 --> 00:04:15,120 use a spread operator here in the array which you also learned and for example spread everything 49 00:04:15,120 --> 00:04:21,840 we find in person.hobbies, so all the array elements in person.hobbies, into this new array and 50 00:04:21,840 --> 00:04:25,600 therefore we now create a clone of that old array as well. 51 00:04:25,650 --> 00:04:32,010 So now we create a brand new array here instead of copying the old array address and hence now we would 52 00:04:32,010 --> 00:04:35,130 have a new object with a new array in there. 53 00:04:35,310 --> 00:04:41,070 Now it's not a must do that you always do that if you have nested reference values, you don't always 54 00:04:41,070 --> 00:04:42,320 need to copy everything, 55 00:04:42,660 --> 00:04:49,080 it's just an option that you can do that if you then plan on changing hobbies for example on person 56 00:04:49,320 --> 00:04:55,200 and you don't want that reflected on your copy persons, then you would have to use that approach, if you 57 00:04:55,200 --> 00:05:00,690 don't plan on changing hobbies ever, then you of course don't need to create that deep copy because 58 00:05:00,750 --> 00:05:04,460 ultimately, every operation costs a little bit of performance. 59 00:05:04,590 --> 00:05:11,130 So if I now hit enter here and we have a look at person, we see there age is 31, hobbies is an array of 60 00:05:11,130 --> 00:05:17,820 three items, person3 also has an array of three items but age is 29 because we overwrote it 61 00:05:17,820 --> 00:05:24,990 here and if we then go to person and there, to hobbies and we pop off the last element, we see that 62 00:05:25,160 --> 00:05:31,890 for person, now hobbies has two elements, for person3, we still have three elements in the array because 63 00:05:31,890 --> 00:05:39,780 we did create a brand new array and copy over the old array values as well. So that can be a nice feature, 64 00:05:39,780 --> 00:05:45,790 being able to use that spread operator on key-value pairs in objects as well, 65 00:05:45,840 --> 00:05:51,180 perfect for creating copies and then as you see copies where you can still overwrite certain parts of 66 00:05:51,180 --> 00:05:52,050 the things you copied.