Exploring ECMAScript 6 - Array manipulation

February 6, 2016, 6:38 pm
Author: James Griffiths

ECMAScript 6, commonly referred to as ES6, is the latest ECMAScript language specification that defines the standards for implementing JavaScript in web browsers. ES6 brings with it lots of powerful new features that provide developers with more flexibility than ever when crafting their applications.

In the following article we're going to take a look at manipulating arrays in ES6.

Destructuring Arrays

Say we wanted to console log the values for an array - in ES5 we might have accomplished this by extracting values through array index as follows:

var films             = ["Bourne Identity", 
                         "John Wick", 
                         "The Equalizer", 
                         "Punisher: Warzone"],
    bourneIdentity    = films[0],
    johnWick          = films[1],
    taken             = films[2],
    equalizer         = films[3],
    punisher          = films[4];

console.log('Films: ' + bourneIdentity + ' | ' + johnWick + ' | ' + taken + ' | ' + equalizer + ' | ' + punisher);
// Films: Bourne Identity | John Wick | Taken | The Equalizer | Punisher: Warzone

In ES6 we can, instead, directly extract the array values and assign those to their own variables through a process termed destructuring like so:

var [bourneIdentity, johnWick, taken, equalizer, punisher]                = films;

This means our script would now look something like this:

var films             = ["Bourne Identity", 
                         "John Wick", 
                         "The Equalizer", 
                         "Punisher: Warzone"],
    [bourneIdentity, johnWick, taken, equalizer, punisher]                = films;

console.log('Films:'  +  bourneIdentity + ' | ' + johnWick + ' | ' + taken + ' | ' + equalizer + ' | ' + punisher);
// Films: Bourne Identity | John Wick | Taken | The Equalizer | Punisher: Warzone

Pretty neat - just programmatically assign each array value to a variable and access those without having to resort to reference by array index.

Faster and less error prone - definitely a plus for development.

Destructuring certain values

We can take destructuring a step further and choose to ignore certain items in our array and only return the remaining values like so:

var [bourneIdentity, , taken, , punisher]                = films;

console.log('Films:'  +  bourneIdentity + ' | ' + taken + ' | ' + punisher);
// Films: Bourne Identity | Taken | Punisher: Warzone

Which also works regardless of whether the first and last array values are returned:

var [, johnWick, taken, Equalizer,]                = films;

console.log('Films:'  +  johnWick + ' | ' + taken + ' | ' + Equalizer);
// Films: John Wick | Taken | The Equalizer

Quite flexible and developer friendly!

Using the spread operator

Okay, so destructuring is useful but what if you have a large array and don't want to assign all values to individual variables OR simply can't remember all the values in that array?

Simple - use the spread operator (...):

var [johnWick, ...others]                = films;

In the above we assign the remaining items in our array to a variable titled others using the spread operator (...).

This would now modify our script as follows:

var [johnWick, ...others]                = films;

console.log('Films:'  +  johnWick + ' | ' + others);
// Films:John Wick | Taken,The Equalizer,Punisher: Warzone

The spread operator is, as you can see, an effective shorthand way of managing array destructuring assignment.

Creating new arrays

Destructuring is great but ES6 also brings with it a new way to generate array objects from existing arrays or collections using the from method.

We could take our films array and create a new array from this like so:

var films             = ["Bourne Identity", 
                         "John Wick", 
                         "The Equalizer", 
                         "Punisher: Warzone"],
    movies            = Array.from(films);


// Outputs:
// Array (5)
// 0"Bourne Identity"
// 1"John Wick"
// 2"Taken"
// 3"The Equalizer"
// 4"Punisher: Warzone"

As you can see this makes the duplication of existing arrays ridiculously quick and simple to accomplish.

In addition to the above example we can also create arrays from HTML collections:


Which depending on our HTML page will output to the browser console something akin to the following:

[<html class=" js no-touch svg inlinesvg svgclippaths no-ie8compat">, 
 <script>, <script>, <head>, <script>, …] (1597) = $2

This makes the from method quite a powerful and flexible tool for array generation.


In the above we've barely even scratched the surface of what ES6 is capable of but, if you haven't already started experimenting with the latest JavaScript language standard, it should be obvious how much more leverage JavaScript developers now have when crafting their applications.


« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.