Future of JavaScript – ECMAScript 6 (ES2015) Arrow and Spread Operator

  • Article

This tutorial series will take a look at the future of JavaScript. It will take an in-depth look at ECMAScript 6 (ECMAScript 2015), the latest version of the standard for JavaScript. Throughout the series, you will learn about new language features and what you can build with them. You are expected to have an understanding of JavaScript.

Level: Intermediate to Advanced.

Part 4 – Introducing the Arrow and Spread Operator

The arrow and spread operator are very visible additions to JavaScript, and their usage has spread like wildfire. The arrow operator reduces the amount of “boilerplate” code one needs to write, and the spread operator makes manipulating arrays simpler.

The Arrow Operator

How often do you write short functions that do one statement or return a value? It seems like every utility library (e.g. underscore, lo-dash, jQuery) has you writing short callback functions. The arrow operator => was introduced to reduce the amount of useless boilerplate code one writes in JavaScript. The arrow operator => is a shorthand for a function. Example:

function ( x ) { return x + x ; } becomes x => x + x ;

function ( x ) { return x . y ; } becomes x => x . y;

function ( x , y ) { return x + y ; } becomes ( x , y ) => x + y ;

function () { doSomething (); } becomes () => { doSomething ();}

There is one significant difference between writing functions and using the arrow operator. The code body in the arrow operator shares the same lexical this, as opposed to a new function scope. If you need a primer on block scoping in JavaScript, you can read this article. For example, this is scoped to the parent function:

function dog () {

    this. name = "boo" ;

    setInterval(() => { console . log (this. name + " woofed!" ); }, 1000 );

}

Other languages like C#, Java and CoffeeScript inspired the new arrow operator.

The Spread Operator

The spread operator is a handy way to expand expressions. The spread operator can be used to expand an iterable object as the arguments to a function. You can spread an iterable object into another array,t. thus performing a splice, concat or push with the language syntax. In the current specification, ES2015, it does not support objects and other things.

This is an example of expanding an array as the arguments to a function which is equivalent to calling apply() on that function:

var args = [ "arg1" , "arg2" ];

doSomething ( …args );

This is an example of spreading an array in the middle of another array which is the equivalent to a splice() on that array:

var missing_numbers = [ 3 , 4 ];

var numbers = [ 1 , 2 , ... missing_numbers , 5 , 6 ];

This is an example of a push() and a concat():

var zero = [ 0 ];

var three = [ 3 ];

var numbers = [... zero , 1 , 2 , ... three ];

Wrapping Up

The new keywords & features introduced in ES2015 make it easier for developers to recreate some of the programming patterns from other languages like C#, Java or C++. These features allow you to reduce a lot of the boilerplate code you had to write previously thus increasing programmer productivity.

What's Next?

In the next parts of this tutorial series, I will be discussing different language features such as generators & iterators, proxies, and more. I will also be sharing strategies for how best to manage a transition to ES6 either through transcompilation or using shims for different features. Stay tuned for the next edition!

You can always reach me through Twitter or LinkedIn.

Missed the Previous Parts?

You can read the previous parts here:

Other Resources