Join Carl Peaslee for an in-depth discussion in this video Spread operator, part of React: ES6, ES2016, and Beyond.
- [Instructor] Perhaps one of my favorite bits of syntax is the spread operator. The spread operator allows you to pull apart the values of an array and make use of them as though they were instead a series or collection of values, rather than a traditional array. Let's go into our examples file and see what we have. I've got a spreadOperator.js file and I'm going to go in index, and I'm going to import it. And then I'm going to run it. I'll save that file, then we can go back into it.
So, here at the top is... Basic example of me using the spread operator. You can see that I've got two arrays, one called sauces and one called dressings, and I'm combining them together in this variable called superSecretSauce, and I'm using the ellipses to indicate that I want to pull apart that array. So I'm saying, add all of the contents of sauces and add all of the contents of dressings into this one array. So, we can save this and we can go and look in our terminal and see what happens.
Here you can see that we have one array that contains all of your objects, so the two different arrays were disassembled and reassembled into one. Now, you should also know that sometimes people will use the spread operator with objects as well. So, here you can see an example. I've got this variable called favoriteToppings, which is an object, and I've got this object called sandwich and I want to spread all of the key value pairs of favorite toppings into my sandwich object. Now we will save this and look in our terminal, and you can see that all of my key value pairs have been added into my sandwich object.
So, let's go down here, on lines 37 and 39. We'll uncomment those. And you can see that I'm making another variable, called sameSandwich, and I'm doing Object.assign on this variable, breadSlices, and then I'm bringing in my favoriteToppings. And if you were to look in your browser, you'd see that you get the same result as this here. So, Object.assign essentially takes two objects and combines them into one, and actually, you can have as many objects as you want. Here in the favoriteToppings area, you can have an array of objects, and it'll combine them all into one larger object.
Alright, so that's how the spread operator works, and we're going to be using it throughout our project. Before we finish this video, though, I want to clue you up to a bit of reactuated syntax that uses the spread operator that you might see and can throw you off if you're not familiar with it. So sometimes, in a react app, you'll see a component have something like this inside of it. It'll say ...props. And what this does is it's essentially saying, pass all of the props on to this component.
So, it's using the spread operator to pass along all the props of the parent component to the child component. So that's an instance where we use spread operator. It can be confusing sometimes, so I just wanted to call that out. Okay, so that's spread operator. It's very useful for helping you disassemble arrays, and in some cases, objects, and if you don't have the spread operator available to you for objects, you can use Object.assign. And before we move on, we're just going to comment back out everything in our files. Again, I encourage you to try out the spread operator, mess with these exercise files, but we're just going to take them out of our project for now.
Save our file.
- Using const and let
- Importing and exporting modules
- Arrow functions
- Destructing assignments
- Arguments and template literals
- Extended parameter handling with the spread operator
- Generating custom styles
- Classes, getters and setters