ES6, ES2015 : the destructuring

The destructuring is a feature that helps you assign variables from an object or an array based on their structure.

// Let's consider this object `myObject`
var myObject = {
  foo: 1,
  bar: 2
};

// With ES5, you need to do
var foo = myObject.foo;
var bar = myObject.bar;

foo; // 1
bar; // 2

// With ES6, you can write the same with
const { foo, bar } = myObject;
foo; // 1
bar; // 2

// We can even destructure the value returned by a function (if this one
// returns a function or an array)
const getMyObject = function() {
  return {
    foo: 1,
    bar: 2
  };
};
const { foo, bar } = getMyObject();
foo; // 1
bar; // 2

#Different syntaxes

#Array

// For an array, we can use a syntax that is similar to a literal declaration
// of an array
// You might notice that you can ignore an item by just put nothing between the
// commas
const [first, second, , fourth] = [1, 2, 3, 4];
first; // 1
second; // 2
fourth; // 4

#Use a different name for the key

For an object, the default behavior is that the name of a variable will match the name of the key. So if you have already a variable with this name, you can choose another one.

var myObject = {
  foo: 1,
  bar: 2
};
const { foo: renamedFoo } = myObject;
renamedFoo; // 1

This syntax doesn't offer a good readability.

#Function arguments

// We can use destructuring directing in a function declaration
function myFunction({ title, text }) {
  return title + ": " + text;
}

myFunction({ title: "foo", text: "bar" }); // "foo: bar"

#Nested destructuring

We can also nest the assignments.

var myObject = {
  foo: {
    bar: 1
  }
};
const { foo: { bar } } = myObject;
bar; // 1

Be careful, if the destructuring of the first level should return undefined (if the value doesn't exist), be sure that you will have a nesting error, since a value will try to be retrieved from an undefined property. To prevent this issue, you will need to define defaults values.