Use Cases for the Spread Operator

One of the coolest features of ES6 is the Spread Operator. The syntax looks a bit like:

let a = [4, 5, 6];
let b = [7, …a, 8];

console.log(b);

This will give us:

View post on imgur.com

The spread operator replaces the concat function in ES5:

“use strict“;
var a = [4, 5, 6];
var b = [7].concat(a, [8]);

console.log(b);

This is a great little feature, but what can we do with it?

Some Uses for the Spread Operator

We can do a lot with the spread operator.

Combine Arrays

You can use the spread operator to combine arrays:

let test = () => {
  let arr1 = ['foo', 'bar', 'baz'];
  let arr2 = ['fizz', 'buzz'];
  arr1.push(...arr2); // Will append the contents of arr2 to arr1
};

test(); // Runs function

Copying Arrays

We’ve used Array.prototype.slice to make copies of arrays. Now we can do that with the spread operator.

let arr = [7, 8, 9];
let arr2 = […arr];
arr2.push(10); // Will return a deep copy of the array with 10 appended to the end
//of the values

More At the MDN

You can find more uses for the spread operator at the MDN

Concise, Modular JavaScript

Working with JavaScript again at Treehouse, I went over the Arrow Syntax again1.

Before it really wasn’t making much sense. I mean, I thought I had it down, but really, it was too fast and too complicated for me at the time. I wanted to learn ES2015 and write, clean, concise, modular javascript.

So What’s Different?

I actually rewatched the videos with Andrew Chalkley this time2.

Take a look at this code:

Here we are taking no arguments passed to the function sayName()3. With arrow functions, we can write modular, clean code4. We can get rid of the function keyword and replace it with =>. Pretty nifty, eh?

Single Argument Functions

Take a look at this code:

When we have a single argument passed to a function, much like the no arguments function, we replace the function keyword with an =>. But we can also remove the curly brackets, the parens, and the return statement.5

This is getting pretty awesome.

Multiple Argument Functions

Take another gander at this gist:

Here, we can do pretty much the same thing as in the single argument function, only we need to keep the parens. Still, you can get rid of the curly braces, and the one line of code in the block.

It’s Really All The Same

Check out this gist:

It’s just a cleaner, more modular way to write code. I hear you can write modular JavaScript with Promises but I am not there yet.

Enrolled in Coursera Course

I am doing their Java Data Structures and Algorithms course. They waived the tuition and so I am starting soon. The capstone is what I am really looking forward to. I need to put in the work: 4-6 hours a week. Not too bad.

Thoughts?

Have anything to add? Leave me a comment. 🙂


  1. I called them lambda functions in this post. I don’t think they’re the same, however. 
  2. I actually rewatched them a couple times and downloaded the completed workspace. 
  3. Learning ES2015 and so we are now using const
  4. Much to the rejoicing of Uncle Bob Martin
  5. As stated in the comment, you can only do this when there is one line of code in the code block and one argument.