An introduction to ES6 Part 3: Destructuring

By: James Allardice

Tags:

  • es6
  • javascript

This is part 3 of a 10-part series of articles introducing you to some of the features of the upcoming ES6 specification. It may be helpful to start at the first part if you missed it.

Destructuring Assignment

Destructuring in the ES6 refers to the use of patterns to effectively match values to variables or properties. It’s hard to describe in words, so an example using the more common array pattern should help:

var [x, y, z] = [1, 2, 3];

  // is equivalent to...

var x = 1, y = 2, z = 3;

In this example the [x, y, z] part is the “pattern” (in this case it’s called an “array pattern”, due to the resemblance to an array literal), and the [1, 2, 3] part is an array literal containing the values. The pattern matches identifiers to array indicies in the right hand side. In ES5 that example would fail with a syntax error. In ES6 the grammar for assignment expressions has been extended (with an AssignmentPattern production) to allow the additional syntax.

A common use of the array pattern syntax is to make it easier to swap the values of two variables. In ES5 a temporary variable to store the original value of one of the two swapping variables is required. With destructuring assignment this is no longer necessary:

let [x, y] = [1, 2];
console.log(x, y); // 1, 2

[x, y] = [y, x]; // Swap the values of x and y
console.log(x, y); // 2, 1

It even works with nested arrays:

let [x, [y]] = [1, [2]];
console.log(x, y); // 1, 2

Object Patterns

As well as the array pattern syntax seen above, ES6 also has the ability to destructure objects. As you might expect, the object pattern syntax mimics that of object literals:

let { a: x, b: y } = { a: 1, b: 2 };
console.log(x, y); // 1, 2

In this case, the { a: x, b: y } is the pattern. The properties a and b match the properties of the object literal and their values are assigned to x and y appropriately. Instead of matching array indicies, it is matching property identifiers.

As with the array pattern, you can use nested objects too:

let { a: x, b: { c: y } } = { a: 1, b: { c: 2 } };
console.log(x, y); // 1, 2

Multiple Return Values

Another nice feature of destructuring assignment is the ability to return multiple values from a function. To do so you can simply return an array and use the array pattern assignment syntax to get each return value into its own variable:

function example() {
    return [1, 2, 3];
}

var [a, b, c] = example();
console.log(a, b, c); // 1, 2, 3

In fact, there’s more flexibility than that. If you only care about some of the return values you can modify the assignment pattern to exclude the others (the following example assumes the same example function from the previous snippet):

var [a, , b] = example();
console.log(a, b); // 1, 3

Come back soon for the next part, where we’ll have a look at exciting new ways to handle function parameters and arrays. Follow us on twitter to be notified when it’s posted, and don’t forget we’re hiring


About the Author

James Allardice

James Allardice is a Senior JavaScript Developer at Venntro. He is passionate about clean, maintainable JavaScript and is regularly on the lookout for ways to improve the JavaScript development process. He's currently interested in JSHint, Grunt, AngularJS and ECMAScript6.