Using the ES6 spread operator

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 6 years ago

The spread operator allows you to "explode" an array into its individual elements.

Man 1: [00:00] The spread operator allows you to take an array and spread it out into its individual items. If I log out an array with one, two, three you can see I get an array, so you have the brackets with one, two, and three.

[00:12] If I put the three dots in front to say I want to spread this array and I hit run again, you can see I get one and two and three with no brackets around it. This actually allows us to push elements easily into other arrays. Before if I were to do first push second and log this out, you'll see, I'll get one two three and then another array inside of my array.

[00:40] But instead, if I spread out the second array and push that in, you can see I get the individual items pushed in. I could actually duplicate that and save and you can see I get one two three, four five six, four five six. So I'm pushing in the individual items over and over instead of pushing in arrays.

[01:02] This even works for doing things like pushing in an array of parameters. If I want to add three things and then push in my first collection there, hit run, you can see I get six, which is one plus two plus three. I just passed in first and then I spread it out into one, two, and three and I can do the same thing for second and run this and you'll see I'll get 6 and 15. 15 being 4 plus 5 plus 6, which is 4 plus 5 plus 6. Because, again, this, these three dots, are spreading the array out into its individual elements.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today