Let's talk about the spread operator. Those are those three apathetic dots,
... , that you'll often see in front of an array or any iterable. What is the spread operator? It takes every single item from an iterable.
Now hold on. What's an iterable?
An iterable is anything that you can loop over with our
for of loop and that includes arrays, strings, DOM nodes, arguments object, and includes
Set which we are going to learn about later.
We'll use strings and arrays, because that's the simplest and most of the uses cases where you'll actually use spread.
It's going to take every single item from an iterable, from array and apply it to the containing element or the containing array.
Where is that useful? Let's say we've got a couple of arrays of pizza.
const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];
featured and the specialty. I want to make a third array called pizzas, just combine them together. You might think, OK, we're going to use something like:
const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = featured.concat(specialty);
That will work, and you can
console.log(pizzas) to see all six pizzas in an array.
What if you wanted to put a veg pizza right in the middle of that? How would do that? Well, you'd have to say:
let pizzas = ; pizzas = pizzas.concat(featured); pizzas.push('veg'); pizzas = pizzas.concat(specialty); console.log(pizzas);
That just becomes a big headache for having to manage that. What you can do is take every single item in the array and spread into a new array.
Let's take a quick example with a string first.
If I have the string of
wes, what is every item in a string? Every item in a string is just each character. What you can do is you pop an array around it, and that just gives you an array of one thing,
What if I wanted every single item of that iterable to be its own item of the array? We can use the spread operator in front of the array.
That's going to spread each item into the actual array. I have
['w', 'e', 's'] as the entire array here. Similarly, what we can do is, we can take these existing arrays and spread the items, like
featured, and spread the items of
specialty into the new
const pizzas = [...featured, ...specialty];
Now I have the
pizzas array, which has absolutely every single pizza inside of it. Similarly, I can just also add
vegetable in the middle of the array:
const pizzas = [...featured, 'veg', ...specialty];
It's not a problem because I'm essentially just saying, add every single item from
'veg', add every single item from
specialty. If we call the
pizzas array, we see that our
'veg' pizza being added right in the middle.
What's also nice about that is that, is say we wanted to take a copy of these pizzas:
const pizzas = [...featured, 'veg', ...specialty]; const fridayPizzas = pizzas; console.log(fridayPizzas)
What if I wanted to change the first
'Deep Dish' to something like
fridayPizzas = 'Canadian'; console.log(fridayPizzas);
fridayPizzas starts with
'Canadian', but if we
console.log(pizzas), we've overwritten the original array!
That's a pain, because what we did there is we didn't actually copy the
pizzas array, we just referenced it. Both
fridayPizzas are the exact same thing in this case.
What you used to have to be able to do is you just create a blank array and then you would
pizzas one right into it:
let fridayPizzas = .concat(pizzas);
That would just take a actual copy of the array rather then reference it. That's weird as well.
What you can do is, you just take a brand new array and then you spread every single item from
pizzas into this hot, fresh new array:
const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg', 'specialty']; const fridayPizzas = [...pizzas]; fridayPizzas = 'Canadian'; console.log(fridayPizzas); console.log(pizzas);
If we take a look in the console, we can see that
'Canadian' as its first pizza, but our
pizzas still lists
'Deep Dish'. We were able to change
fridayPizzas without being destructive to the initial
Again, a spread will take every single item from an iterable and apply it into the new array.