Hi everyone. And let's talk about the spread operator. Now, the spread and rest operators introduced in ES6 look familiar, but they work in different contexts and let's go over the spread operator. And some of it's used cases. Now the spread operator will will spread or expand an array into its set of items. And what this means is that the spread operator will allow an expression to be expanded in places where multiple elements or arguments are expected. And the syntax afford. The spread operator Is just these three dots. So the spread operator operator spreads out the items of let's say, an inner array in the outer array. And let's go ahead and basically look at an example to check this out. So I'm going to declare an array. So let array one Is equal to let's say 1, 2, 3. And then the spread operator And I am going to now have an inner array with two numbers of four and 5. So nested within array, one is another array containing the numeric values of four and five. We would like to expand on the items in the nested array. Therefore we've used the spread operator which is donated by um donated by These three dots out here, right just before the nested array. So let's actually now console dot log to see the contents of a one. So control us to save and let's go here and there you go. So the spread operator spreads out the items of the inner array in the outer array and it's not going to mutate the original array. So the goal should be to keep data structures such as array of objects in their unchanged states that is immutable. Um in mutate herbal. And basically that means fewer states or things are changing and this means that when there are fewer states or things changing in your code there will be less things to track and worry about. So anyways out here, you can see that we have the numeric values 1234 and five. So the contents of the inner array, four and five was spread out and they are now in one array. Okay, so let's take a look at a few more use cases of the spread operator. And starting with emerging arrays. Okay, so the spread operator can also be used to merge the values of two arrays, and this can basically be used in place of the contact method. So for example, let's say let greeting um is equal to an array of hay and we have another value which is there and then I have another variable. So let devin greeting is equal to also An array of two string values. So Hello and ruled. Right, okay, so let's go ahead and use uh the spread operator to spread the individual items of the greeting and deaf greeting arrays into one array. And because the spread operator is not going to mutate the original array, we do have to declare a new variable. So let greeting full is equal to and now we're going to spread the contents of greeting array and also spread the contents of the devil greeting array. Right. And as usual we can console dot log greeting full to verify our results. Right? And now let's go ahead and check this out in the browser console and there you go. So we see. Hey there. Hello and ruled. So um take note that for larger arrays with more items, the spread syntax is slow, so when you're dealing with larger datasets, it's better to use the contact method. Now another use case for the spread operator is for copying arrays. So let's come back here and out here, I'll say merging the bridging race. Right. And then another use case is a copy to copy arrays. Right, So we can copy a race with the spread operator without mutating the original array, for example, um let's declare a variable. So let every numb Is equal to a couple of the numbers. So let's say 1, 1.89 and then just another random number and then let's say 30,000. Okay, so now we're going to copy the elements from array numb into another array, which we will call, let copying them. And the way we do this is copy number is going to be an array with all the elements of the array. Numb spread out. So now there you go. Sorry numb. And if I cancel a dot log copy now, we can verify that indeed the values of Raynham have been copied into this new array that we've called copy number, but let's go ahead and check it out here and let the other console logs but it doesn't matter and there you go. So the value or the result of copy is the copy number rate are all these values which were originally also they're also in the array in nam array. Right, so let's add another numeric value to arraign um basically what we'll do is I'm going to push another number, array num dot of push. And let's just push this number here. So what do you think the value of the copy number, array will be? So copy number remember contains all the elements copied over from the arena. So do you think it's going to contain this new value of 8200, which is pushed to the array? Numb array. Right, so anyways, so let's just go ahead and we can actually uh console dot log array in numb to the console and check its value and there you go. And let's um let's actually write a message here. This is array num plus arena because we have so many console dot logs. So let's just go back here and then there you go. So this is a rain um and so you can see that we mutated the original array but the contents of the array copy have not changed. And basically um You know, copy number is still going to be all these numbers without 80 200. Okay, now let's go ahead and basically talk talk about another use case. But before we do that, let's take a look um on, let's take a look at copy number just to verify. So coming back here, this is a rain um and then uh console dot log uh copying them. Okay, so I'm going to just go ahead and control s and then let's come back here. So out here you see copy number does not have this number 80 200. Right, Okay, so one thing to keep track of also is where the order of pushing. Now I made the copy and then I pushed but if I make, if I push before I make the copy then both Raynham and copy number basically have the number which is pushed 8200 and let's go ahead and check this out and there you go. So the order of when you add your new value also matters another youth case off. The spread operator is converting a strength into an array of characters. So using the spread operator, we can convert a string into an array of the strings characters. And this is much faster and more convenient than looping through the characters in the string and accessing them at each index. So for example, let's just check this out. I'm going to say, well let game is equal to a strength and let's say it's animal. Um Crossing New Horizon. So just this island game where you can grow veggies, fruits and talk to other Islanders anyways. So and then I'm going to declare another variable. So let uh cars is equal to spread operator and game. So the spread operator will return an array of characters including any wide space contained in the string. And let's go ahead and check this out by console dot logging the vary the value of the variable, Curse and control. S And then let's go back here and there you go. So you can see all the Now we have an array of all the individual characters in the string. Animal crossing new horizons, including any white space. And it becomes much easier to manipulate the characters in the string. For example, we can use the filter method which will filter the array elements representing the white space from the array. And that's pretty much it for the spread operator, which basically allows you to spread the individual items uh in an array. Right? So it allows more specifically, it is going to expand and array into its set of items.