Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Using the ES6 spread operator

1:40 JavaScript lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

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

console.log([ 1, 2, 3]); // [1, 2, 3]

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 1, 2, 3 with no brackets around it.

console.log(...[ 1, 2, 3]) // 1 2 3

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, [ 1, 2, 3, [ 4, 5, 6] ].

let first = [ 1, 2, 3];
let second = [ 1, 2, 3];

first.push(second);

console.log(first); // [ 1, 2, 3, [ 4, 5, 6] ]

But instead, if I spread out the second array and push that in, you can see I get the individual items pushed in.

first.push(...second);

console.log(first); // [1, 2, 3, 4, 5, 6]

I could actually duplicate that and save and you can see I get [ 1, 2, 3, 4, 5, 6, 4, 5, 6]. So I'm pushing in the individual items over and over instead of pushing in arrays.

This even works for doing things like pushing in an array of parameters. If I want to addThreeThings and then push in my first collection there, hit run, you can see I get six, which is one plus two plus three.

function addThreeThings( a, b, c){
  let result = a + b + c;
  console.log(result); // 6
}

addThreeThings(...first);

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?