WEBVTT 1 00:00:01.285 --> 00:00:03.135 Hey there, in this video I'm going 2 00:00:03.135 --> 00:00:05.898 to show you a new operator in JavaScript, 3 00:00:05.898 --> 00:00:08.989 and that's the spread operator. 4 00:00:08.989 --> 00:00:12.730 So the new spread operator is a very convenient way 5 00:00:12.730 --> 00:00:15.983 to expand elements of an array in places like 6 00:00:15.983 --> 00:00:18.343 arguments and function calls. 7 00:00:18.343 --> 00:00:22.984 So let me show you what I mean by expand elements. 8 00:00:22.984 --> 00:00:25.222 Let's first create a simple function 9 00:00:25.222 --> 00:00:29.389 which simply adds four values, let's say for ages. 10 00:00:30.237 --> 00:00:32.237 So function addFourAges, 11 00:00:35.675 --> 00:00:38.925 and I'm gonna call them a, b, c, and d, 12 00:00:41.012 --> 00:00:43.216 and we simply return the sum 13 00:00:43.216 --> 00:00:45.822 of all of these elements, 14 00:00:45.822 --> 00:00:47.322 plus c and plus d. 15 00:00:49.245 --> 00:00:53.647 All right, so let's now test if this actually works. 16 00:00:53.647 --> 00:00:57.564 sum1 because I'm gonna use this multiple times, 17 00:00:58.742 --> 00:01:00.986 so I'm gonna start with sum1. 18 00:01:00.986 --> 00:01:03.319 So addFourAges and let's say 19 00:01:04.661 --> 00:01:06.244 18, 30, 12, and 21. 20 00:01:11.220 --> 00:01:14.720 Okay, then I'm gonna console.log this sum. 21 00:01:18.947 --> 00:01:20.447 Okay, and it's 81. 22 00:01:21.556 --> 00:01:24.937 Now imagine that we had these four numbers in an array 23 00:01:24.937 --> 00:01:27.919 instead of, for example, four different variables. 24 00:01:27.919 --> 00:01:32.086 So how would we pass that entire array into that function? 25 00:01:33.056 --> 00:01:37.223 Let's start with ES5, and the first thing is, of course, 26 00:01:38.386 --> 00:01:40.469 to create the ages array, 27 00:01:41.861 --> 00:01:43.694 so 18, 30, 12, and 21. 28 00:01:46.509 --> 00:01:51.437 Now remember that we have the bind, call, and apply methods. 29 00:01:51.437 --> 00:01:55.466 And we used the bind and the call methods already, 30 00:01:55.466 --> 00:01:57.912 but we didn't really use the apply method. 31 00:01:57.912 --> 00:02:00.543 And remember that the apply method what it does 32 00:02:00.543 --> 00:02:04.407 is to receive an array, and it calls the function 33 00:02:04.407 --> 00:02:07.556 that the apply method is used on by using the elements 34 00:02:07.556 --> 00:02:10.403 of the array as the arguments. 35 00:02:10.403 --> 00:02:13.879 And so we're gonna make use of that here, okay. 36 00:02:13.879 --> 00:02:16.000 So let me show you how that works. 37 00:02:16.000 --> 00:02:19.417 So now it's sum2, and we say addFourAges, 38 00:02:21.486 --> 00:02:24.236 and then we use the apply method. 39 00:02:25.852 --> 00:02:28.736 And remember we have to specify the dis variable as well 40 00:02:28.736 --> 00:02:30.996 such as in bind and call. 41 00:02:30.996 --> 00:02:32.957 But we're not really interested in that 42 00:02:32.957 --> 00:02:36.528 and so we can just say that it's null. 43 00:02:36.528 --> 00:02:39.996 And then we pass ages into here. 44 00:02:39.996 --> 00:02:43.890 And so once again what the apply method will do is to take 45 00:02:43.890 --> 00:02:48.017 this array and then call this function here using 46 00:02:48.017 --> 00:02:51.203 these elements of the array as the arguments, 47 00:02:51.203 --> 00:02:53.818 which is exactly what we want to do here, right. 48 00:02:53.818 --> 00:02:57.000 Because again this function does receive an array, 49 00:02:57.000 --> 00:03:01.172 but instead it receives these four arguments here. 50 00:03:01.172 --> 00:03:05.339 So let's now see if sum2 is also 81, which it should be. 51 00:03:11.023 --> 00:03:13.856 sum2, and alright, so this worked. 52 00:03:15.592 --> 00:03:19.759 But once again, there is a better way of doing this in ES6, 53 00:03:21.105 --> 00:03:23.355 and it's as simple as this. 54 00:03:25.230 --> 00:03:29.582 So now I'm gonna call it max3, and we now are going 55 00:03:29.582 --> 00:03:32.275 to use the spread operator. 56 00:03:32.275 --> 00:03:35.263 So addFourAges and the spread operator, 57 00:03:35.263 --> 00:03:37.837 and then simply ages, and that's it. 58 00:03:37.837 --> 00:03:40.426 And this what expanding means. 59 00:03:40.426 --> 00:03:45.079 What this operator here does is to expand this array 60 00:03:45.079 --> 00:03:49.246 into its components, so in this case 18, 30, 12, and 21. 61 00:03:51.611 --> 00:03:55.684 So this here is now exactly the same as writing 62 00:03:55.684 --> 00:04:00.571 18, 30, 21, and 21 such as we did here in this case. 63 00:04:00.571 --> 00:04:03.738 This is what the spread operator does, 64 00:04:07.526 --> 00:04:10.423 and now we're just gonna test it. 65 00:04:10.423 --> 00:04:12.264 And this is of course not max3. 66 00:04:12.264 --> 00:04:15.764 I don't know why I did that, so it's sum3. 67 00:04:17.853 --> 00:04:20.976 And I'll check the 81 again, and it is. 68 00:04:20.976 --> 00:04:25.467 So of course, this method here works exactly the same 69 00:04:25.467 --> 00:04:29.145 but here it's more easy to write, more easy to read, 70 00:04:29.145 --> 00:04:30.529 and also to memorize. 71 00:04:30.529 --> 00:04:33.083 So instead of using this apply and null, 72 00:04:33.083 --> 00:04:36.435 you can simply use the new spread operator to call 73 00:04:36.435 --> 00:04:40.093 this function like this with these arguments. 74 00:04:40.093 --> 00:04:42.793 And there are actually more use cases, 75 00:04:42.793 --> 00:04:44.839 for example for joining arrays. 76 00:04:44.839 --> 00:04:47.945 Imagine that we have two arrays, 77 00:04:47.945 --> 00:04:50.278 one is for the Smith family. 78 00:04:53.336 --> 00:04:57.503 Going back to our person examples here, so we have John, 79 00:05:00.623 --> 00:05:02.290 Jane, and then Mark, 80 00:05:06.440 --> 00:05:09.690 and we have an array for another family 81 00:05:10.805 --> 00:05:13.138 let's say Miller and in here 82 00:05:14.309 --> 00:05:15.392 we have Mary, 83 00:05:18.377 --> 00:05:19.460 Bob, and Ann. 84 00:05:23.356 --> 00:05:26.571 Now to join these two arrays, we can once again use 85 00:05:26.571 --> 00:05:30.321 the spread operator, so now it's a bigFamily. 86 00:05:33.853 --> 00:05:38.020 And so we say that we want to spread the familySmith 87 00:05:41.946 --> 00:05:43.696 and the familyMiller. 88 00:05:47.740 --> 00:05:50.557 So what this does is to expand this array 89 00:05:50.557 --> 00:05:53.156 into the three single elements. 90 00:05:53.156 --> 00:05:56.881 It basically takes them out of the array and puts them here. 91 00:05:56.881 --> 00:06:00.631 It is the same, of course, with familyMiller. 92 00:06:05.600 --> 00:06:08.600 And just to make sure that it works, 93 00:06:10.670 --> 00:06:13.731 so here we have the array with all of the elements. 94 00:06:13.731 --> 00:06:18.386 And we can also just put another element here in the middle, 95 00:06:18.386 --> 00:06:20.750 for example, or somewhere else. 96 00:06:20.750 --> 00:06:25.194 Let's say that there's a new element like a new child, 97 00:06:25.194 --> 00:06:28.995 then we can, of course, put it right here like this, 98 00:06:28.995 --> 00:06:30.578 and now here it is. 99 00:06:32.342 --> 00:06:35.608 And yet another use case is that we can actually use 100 00:06:35.608 --> 00:06:38.376 this on other structures so not just array but, 101 00:06:38.376 --> 00:06:41.479 for example, also on a node list. 102 00:06:41.479 --> 00:06:43.645 So remember the node list is what 103 00:06:43.645 --> 00:06:46.204 the querySelectorAll returns. 104 00:06:46.204 --> 00:06:49.229 So let's see an example of that. 105 00:06:49.229 --> 00:06:51.762 I'm gonna select this heading here. 106 00:06:51.762 --> 00:06:55.485 Okay, and then the boxes, and then I want to change 107 00:06:55.485 --> 00:06:58.014 the text color of all these four elements 108 00:06:58.014 --> 00:06:59.931 to let's say to purple. 109 00:07:01.071 --> 00:07:02.619 So I'm gonna start with the heading, 110 00:07:02.619 --> 00:07:05.452 so h = document.querySelector 111 00:07:12.597 --> 00:07:14.514 and it's an h1 element. 112 00:07:16.049 --> 00:07:19.429 Let me show it to you, so it's an h1 element. 113 00:07:19.429 --> 00:07:22.124 I'm not gonna select it by class or by ID 114 00:07:22.124 --> 00:07:24.289 but simply by its element name, 115 00:07:24.289 --> 00:07:28.456 and so we don't need the point or the hash symbol here. 116 00:07:31.159 --> 00:07:34.159 Okay and now we also want the boxes. 117 00:07:43.025 --> 00:07:47.192 And we did this one before, so it's just like this. 118 00:07:48.864 --> 00:07:51.970 And now we could, of course, change the text color 119 00:07:51.970 --> 00:07:55.721 of this element and then loop through all of these here 120 00:07:55.721 --> 00:07:57.861 and change the text colors as well. 121 00:07:57.861 --> 00:08:00.679 But it's easier if you simply put all of them 122 00:08:00.679 --> 00:08:02.640 in the same structure, right? 123 00:08:02.640 --> 00:08:05.454 So we can use the spread operator here once again, 124 00:08:05.454 --> 00:08:07.903 because remember they don't only work on arrays 125 00:08:07.903 --> 00:08:11.008 but also other structures like node lists 126 00:08:11.008 --> 00:08:13.538 which is what we have here. 127 00:08:13.538 --> 00:08:14.971 So let's do that. 128 00:08:14.971 --> 00:08:18.304 I'm gonna call it all and then we want h 129 00:08:19.714 --> 00:08:22.297 and we want to spread to boxes. 130 00:08:23.515 --> 00:08:27.682 Okay, because h is not a node list, it's simply a node 131 00:08:28.742 --> 00:08:31.519 because it's a querySelector and not querySelectorAll. 132 00:08:31.519 --> 00:08:33.893 But in here we have this node list and so we use 133 00:08:33.893 --> 00:08:36.586 the spread operator to expand it, and then we have 134 00:08:36.586 --> 00:08:40.878 the four elements all here as stored in this node list 135 00:08:40.878 --> 00:08:42.545 in the all variable. 136 00:08:43.509 --> 00:08:46.544 And so now all we need to do is to transform this node list 137 00:08:46.544 --> 00:08:48.989 into an array and then we can loop through it 138 00:08:48.989 --> 00:08:51.483 with the forEach method. 139 00:08:51.483 --> 00:08:53.127 And as we learned in the last lecture 140 00:08:53.127 --> 00:08:56.155 or one of the previous lectures, it's very easy 141 00:08:56.155 --> 00:08:59.835 to convert a node list to an array, right. 142 00:08:59.835 --> 00:09:02.995 So we simply write Array and then from, 143 00:09:02.995 --> 00:09:07.162 which is the new method, and all, and this returns an array. 144 00:09:08.644 --> 00:09:12.811 And so now on this we can use of course forEach method, 145 00:09:13.792 --> 00:09:17.179 and we want the current element, and now I'm sure 146 00:09:17.179 --> 00:09:19.673 that you're already getting used to this new syntax 147 00:09:19.673 --> 00:09:21.510 that we've been using all time now, 148 00:09:21.510 --> 00:09:24.008 which is the arrow function. 149 00:09:24.008 --> 00:09:26.924 So the current is the argument to the function, 150 00:09:26.924 --> 00:09:31.134 and now what we want to do is change the style 151 00:09:31.134 --> 00:09:32.520 of each of the elements. 152 00:09:32.520 --> 00:09:36.687 So cur.style.color, which is a CSS property for styling 153 00:09:38.849 --> 00:09:43.016 text colors, and now I simply use the CSS color name purple. 154 00:09:44.774 --> 00:09:48.942 And that's it, that's all we have to do change 155 00:09:48.942 --> 00:09:51.836 all of these colors, so let's see and it works, 156 00:09:51.836 --> 00:09:53.830 so they're all purple now. 157 00:09:53.830 --> 00:09:57.997 Not very beautiful, but that's not what matters here. 158 00:09:58.952 --> 00:10:01.072 So these were a couple of use cases for the new spread 159 00:10:01.072 --> 00:10:05.408 operator and I hope that you see how useful it can be. 160 00:10:05.408 --> 00:10:07.908 So now let's move on together.