ES6, ES2015 : le destructuring

Le principe

Le destructuring consiste à assigner des variables provenant d'un objet ou tableau en reposant sur leur structure.

// Partons d'un objet `myObject`
var myObject = {
  foo: 1,
  bar: 2,
};

// Avec ES5, vous deviez par exemple faire
var foo = myObject.foo;
var bar = myObject.bar;

foo; // 1
bar; // 2

// Avec ES6, vous pouvez désormais l'écrire sous la forme
const { foo, bar } = myObject;
foo; // 1
bar; // 2

// On peut bien entendu destructurer la valeur retournée par une
// fonction, pour peu qu'il s'agisse d'un objet ou d'un tableau
const getMyObject = function() {
  return {
    foo: 1,
    bar: 2,
  };
};
const { foo, bar } = getMyObject();
foo; // 1
bar; // 2

Les différentes syntaxes

Tableau

// Pour un tableau, on utilise une forme proche de la déclaration litérale de
// tableau, vous remarquerez que pour ignorer un item, il suffit de ne rien
// placer entre les virgules
const [first, second, , fourth] = [1, 2, 3, 4];
first; // 1
second; // 2
fourth; // 4

Utiliser un nom différent de la clé

Pour un objet, par défaut, le nom de la variable correspond au nom de la clé. Si, par exemple, vous avez déjà une variable portant le nom de la clé dans le scope, vous pouvez choisir de nommer différemment votre variable.

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

Cette syntaxe est, il faut tout de même le noter, peu lisible.

Arguments de fonctions

// On peut directement utiliser le destructuring dans une déclaration de
// fonction
function myFunction({ title, text }) {
  return title + ": " + text;
}

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

Nested destructuring

On peut aussi imbriquer les assignements.

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

Attention cependant, si le destructuring au premier niveau ne fera que retourner undefined si la valeur n'existe pas, vous aurez bel et bien une erreur avec le nesting, puisqu'il essaiera d'aller chercher une propriété d'undefined. Pour pallier ces soucis, rendez-vous pour l'article sur les defaults.