Destructuring in ES2015

Destructuring is a new way to extract values from nested objects and arrays. It was introduced as a part of ES2015 a.k.a ES6, which is new standard for ECMAScript. This blog post describes how it works with suitable examples.

Syntax

Array destructuring

Below is a simple example showcasing array destructuring.

var foo = [1, 2, 3];

// without destructuring
var x = foo[1],
    y = foo[2],
    z = foo[3];

// with destructuring
var [x, y, z] = foo; // x = 1, y = 2, z = 3

Object destructuring

Below is a simple example showcasing array destructuring.

var name = {first: "John", last: "Doe"};

// without destructuring
var f = name.first,
    l = name.last;

// with destructuring
var {first: f, last: l} = name; // f = "John", l = "Doe"

Possible Uses

Swaping Variables

Below code will swap the values of the variables a and b. Without destructuring, this would require the use of a extra temporary variable.

var a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

Multiple Return Values

Destructuring make it very convinient to utilize multiple return values from a function.

function foo() {
  return [1, 2];
}
var [x, y] = foo(); // x = 1, y = 2

Ignoring values

Destructuring lets you select only the values you are intrested in, and ignore the remaining values.

function foo() {
  return [1, 2, 3];
}
var name = {first: "John", last: "Doe"};

var [a, , b] = foo(); // a = 1, b = 3
var [x, y] = foo(); // x = 1, y = 2
var {first: f} = name; // f = "John"

Nested Destructuring

Destructuring can also be used for nested objects/arrays.

var person = {
  name: {
    first: "John",
    last: "Doe"
  },
  age: 24,
  married: false
};

var {name: {first: f, last: l}, age: a} = person; // f = "John", l = "Doe", a = 24

Further Reading


  1. Destructuring and parameter handling in ECMAScript 6 – 2ality.com

  2. Destructuring assignment – Mozilla Developer Network

Leave a Reply