Spread

[00:00:00]
>> One more fancy thing. While we're talking about fancy syntax, we've talked about fancy syntax for array functions, we've talked about fancy syntax for string literals. One more piece of fancy syntax related to arrays and iterables more generally, like strings too, is something in JavaScript called spread or the spread syntax, which is dot, dot, dot, three dots.

[00:00:23]
And I think this came up in a question earlier if I'm remembering, and so hopefully whoever was asking that earlier is still around. So here's another neat trick. Basically, what spread that is that it lets us take the contents of something like an array and spread them around.

[00:00:40]
So we take the items in the array and spread them out like Regina George spreading pages from the burned book all over school in Mean Girls. So for example, we could use this to expand an array into another array. So for example, here I have a couple of arrays.

[00:01:02]
I have some old burned, some old slang for burning somebody. Like, you're a square, or like that's wack from back in the 90s. I have some new burns calling somebody basic, dusty, or sus, what have you. And I could make a burn book of all the burns I know by expanding both of these arrays with the spread operator.

[00:01:23]
And what this does is something very equivalent to, remember our concat method? The concatenate two arrays? So depending on which one feels more comfortable, this can be a more comfortable way to concatenate an array onto another one, is we can expand the array element with the dot, dot, dot.

[00:01:46]
And what it does is essentially what it's going to do is take the value of this array, which is this here, and it's going to take each thing within the array, and it's almost as if we had written it out with commas in between each of those things.

[00:02:03]
So if I go back over to my console and I run this, we'll see that burnBook, it's basically exactly the same as if I had manually typed out each of those things with commas inside of them. So the dot, dot, dot does that for us. It essentially says expand this array, spread the items of this array into the context where I am using it, and one of the places I can use it is inside brackets in order to put all of the items inside of that array into this new array I'm creating.

[00:02:44]
Okay, so another place that we can use this is when we're passing arguments into a function, which is another place where we might put values separated by commas. And so for example, we had our push method, we can actually pass multiple values in here. And so it's not the same as our concat version earlier because what is the difference between concat and push?

[00:03:11]
What does push do that concat does not do? Anybody remember?
>> Modifies the variable
>> Modifies the, when we say variable, we mean the?
>> Values.
>> Elements.
>> The elements in the original array. It modifies the original array. Push mutates the array, changes what's inside of the original array, concat creates a new one.

[00:03:36]
But, so anyway, so push here, if I have an array of skills like HTML, CSS, and JavaScript, and I'm about to go on and JavaScript is now in there because you all know JavaScript. And we wanna go on and learn some new skills like React or TypeScript or Node, which is back end JavaScript, we can call skills.push...newSkills, and this is gonna be equivalent to calling skills.push(React, TypeScript, Node).

[00:04:11]
So we're gonna expand all of those things. And then, similarly remember how we can pass in commas to our console.log and put spaces between values. We could use the dot, dot, dot there, and we could log out on one line all of the things separated by spaces instead of logging them as an array with those brackets around it.

[00:04:32]
So just to prove this to ourselves, My gosh. To prove this to ourselves, we can run this. Let me just do this separately, okay? So when we do skills.push...newSkills, it returns 6. That's gonna be the new length of the array that it modified. And so skills now has all of that stuff in it.

[00:05:00]
This is different than concat cuz skills got changed. And then if I wanna console.log skills here, I get them all printed out on one line as opposed to if I had logged the array without spreading it, it would log the array object itself. So what this is equivalent to is like if I did console.log("HTML", "CSS", "JS") and so on and so forth, yeah?

[00:05:31]
So spread is a fun little piece of syntax that y'all might also run into and might find useful when you're like, ugh, I wish I didn't have to loop over this array and pull out every single element. If you're passing in things to either array brackets or arguments to a function or a method like this, you can dot, dot, dot to just pass in all of those as if they were with commas between them.

[00:05:56]
Spread it out. We have done a bunch of stuff, we have finished a project, look at us go. We have two projects, actually. We finished two projects, Tic-Tac-Toe and our quiz. And we've learned a ton of stuff including some very fancy syntax and lots of different ways to loop over arrays and make decisions in our code, in our conditionals.

[00:06:17]
We have the fancy syntax for the ternary operator with the question mark and stuff. And we have fancy syntax for working with strings with our template literals, and we have fancy syntax for functions with our arrows. So we have a bunch of tricks up our sleeve now as we continue our magical learning journey here.