1 00:00:02,450 --> 00:00:07,130 So that's it for the spread operator, another nice feature which I can show you here in our little 2 00:00:07,130 --> 00:00:10,040 app is object destructuring. 3 00:00:10,070 --> 00:00:16,490 You might remember array destructuring which helped us pull out elements of an array and store it in 4 00:00:16,490 --> 00:00:17,350 variables, 5 00:00:17,360 --> 00:00:24,320 well you can do the same for objects and we have a great example here actually where we render all movies. 6 00:00:24,320 --> 00:00:31,220 I go through all my movies here with ForEach, right and I go through my filtered movies there of course and 7 00:00:31,280 --> 00:00:37,730 in there, I then have this for/in loop where I go through movie.info and I also extract the title 8 00:00:37,730 --> 00:00:40,520 from movie.info and the key from movie.info, 9 00:00:40,910 --> 00:00:43,860 so I always repeat movie.info. 10 00:00:44,000 --> 00:00:51,200 So in the end here, you could say I'm really just interested in the info property of movie, 11 00:00:51,200 --> 00:00:56,000 I'm not interested in the other properties of movie or the other property of movie which would be the 12 00:00:56,000 --> 00:00:57,470 ID. 13 00:00:57,530 --> 00:01:06,410 So here, we can use object destructuring to pull out that key-value pair and store it in a new variable, 14 00:01:06,410 --> 00:01:13,460 for example here we could add a constant and now just as with array destructuring, a syntax you haven't 15 00:01:13,460 --> 00:01:14,120 seen before 16 00:01:14,120 --> 00:01:18,740 where you in this case have curly braces on the left side of the equal sign, something we didn't 17 00:01:18,740 --> 00:01:25,100 do before and now on the right side, point at the object where you want to pull something out of it, 18 00:01:25,130 --> 00:01:32,360 so in this case movie. Now between the curly braces on the left, you now enter a key name which exists 19 00:01:32,390 --> 00:01:33,740 in that object on the right, 20 00:01:33,740 --> 00:01:40,850 so for example info and of course you have to enter a key name here which exists there. In array destructuring, 21 00:01:40,850 --> 00:01:46,940 you could use any names between the square brackets you had there because in arrays, you access values 22 00:01:46,940 --> 00:01:52,880 by index and not by name and therefore you could assign any name because the order was important there 23 00:01:52,910 --> 00:01:58,100 for pulling elements out of the array. For pulling properties out of objects, 24 00:01:58,100 --> 00:02:00,560 the order does absolutely not matter, 25 00:02:00,560 --> 00:02:07,070 instead the key matters. So you can only use info here if you have an info property name, an info key 26 00:02:07,220 --> 00:02:09,480 in your movie. 27 00:02:09,500 --> 00:02:11,470 So now with that here, we therefore 28 00:02:11,540 --> 00:02:16,910 pull out everything which is in info which happens to be another object but it would also work if that 29 00:02:16,910 --> 00:02:19,090 would be a string or anything like that 30 00:02:19,190 --> 00:02:26,450 and now we have a constant named info available which we can use here instead of movie.info. So I can use 31 00:02:26,480 --> 00:02:34,550 info here, info here and info down there because this is now a constant which will hold the value that 32 00:02:34,550 --> 00:02:37,670 was stored in movie.info which is my object. 33 00:02:37,670 --> 00:02:45,950 Hence if we save that and we reload and again add Javascript - The Complete Guide here, 34 00:02:45,950 --> 00:02:52,670 level 5, that works just as before but I'm not done with object destructuring. 35 00:02:52,910 --> 00:03:00,230 Just as with array destructuring, you can also use a rest parameter, three dots, and then in this case any 36 00:03:00,230 --> 00:03:04,510 name of your choice, other props or however you want to name it 37 00:03:05,050 --> 00:03:12,040 and this will now collect all properties which you didn't pull out by name and give you a new object 38 00:03:12,130 --> 00:03:15,640 with all these collected remaining properties. 39 00:03:15,670 --> 00:03:22,060 So here if I console log other props, you'll see this will be an object which in our case should only include 40 00:03:22,210 --> 00:03:29,670 the ID because that is the only other property we have in there. So if I now save that and reload and 41 00:03:29,850 --> 00:03:34,080 again try to add a new movie, to save some time I'll just name it 42 00:03:34,080 --> 00:03:39,600 Javascript, you will see if this works and here in the console indeed we have an object with only the 43 00:03:39,600 --> 00:03:48,130 ID key which is this object with the combined remaining properties. Now of course 44 00:03:48,130 --> 00:03:52,150 we can also use the object destructuring here to for example pull out the title. 45 00:03:52,530 --> 00:03:57,010 Now there is nothing wrong with accessing it like this and since this is the only place where I access 46 00:03:57,010 --> 00:04:02,580 the title here, it would be perfectly fine to keep the dot notation but to practice this object 47 00:04:02,600 --> 00:04:10,150 destructuring a bit more, here we could also use it on the info constant here which holds an object right 48 00:04:10,160 --> 00:04:12,560 because info is just an object here, 49 00:04:12,610 --> 00:04:16,190 if it wouldn't be an object we couldn't use that but info is an object, 50 00:04:16,240 --> 00:04:24,790 so of course we can destructure that as well with the syntax and in info, we have the title and then 51 00:04:24,790 --> 00:04:34,240 whatever the user entered here. So here, I can also pull out the title from info and store this in a constant. 52 00:04:34,240 --> 00:04:40,390 Now we can still then use a for/in loop on info because this doesn't destroy the info constant or anything 53 00:04:40,390 --> 00:04:40,910 like that, 54 00:04:40,960 --> 00:04:47,320 it's still available so if we then want to use info in other parts of our code, we can do so but I 55 00:04:47,320 --> 00:04:52,930 can also pull something out of it here and then use just title here if I wish to. Now you can 56 00:04:52,930 --> 00:04:55,460 actually also assign a new name here, 57 00:04:55,570 --> 00:04:59,140 you have to pull it out by name because that's how objects work, 58 00:04:59,140 --> 00:05:04,810 you don't pull out by order but if you want to use a different name because maybe otherwise you would 59 00:05:04,810 --> 00:05:11,110 have a clash with another variable name you're using or anything like that, then you can assign a new 60 00:05:11,110 --> 00:05:11,920 name to that 61 00:05:11,920 --> 00:05:14,440 pulled out value by adding a colon here. 62 00:05:14,500 --> 00:05:20,440 So inside of the curly braces on the left side of the equal sign, inside of this destructuring syntax, 63 00:05:20,470 --> 00:05:26,530 you can add a colon and now not to create a new object where you have a key name and a value but 64 00:05:26,530 --> 00:05:33,610 instead to assign a new name to that extracted property, for example here, movie title and now we could 65 00:05:33,610 --> 00:05:40,480 use movie title here because that will now hold the title value, so the value of that title property in 66 00:05:40,480 --> 00:05:48,550 that info object and hence if I reload this one more time and we try adding this, we should see that 67 00:05:48,550 --> 00:05:50,820 that still works just fine, 68 00:05:50,890 --> 00:05:57,080 as you can tell everything is output correctly here and we're taking object destructuring to the max. 69 00:05:57,100 --> 00:06:04,870 So a really useful feature to shorten code, write short and concise code and also be able to get exactly 70 00:06:04,870 --> 00:06:10,180 what you want out of an object, especially useful if you use the same property over and over again in 71 00:06:10,180 --> 00:06:11,170 multiple places.