L'affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d'extraire (unpack en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.

Syntaxe

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({a, b} = {a: 10, b: 20});
console.log(a); // 10
console.log(b); // 20

// Proposition de syntaxe (niveau 4)
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Note : {a, b} = {a:1, b:2} n'est pas syntaxiquement valide en tant que tel, en effet {a, b} est ici considéré comme un bloc et non comme un objet littéral.

Cependant, ({a, b} = {a:1, b:2}) sera valide comme pour la forme var {a, b} = {a:1, b:2}.

Description

Ces expressions utilisant des littéraux pour les objets ou les tableaux permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.

var x = [1, 2, 3, 4, 5]; // On crée un "paquet" de donnée
var [y, z] = x; // On utilise l'affectation par décomposition
console.log(y); // 1
console.log(z); // 2

L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.

Cette syntaxe est semblable aux fonctionnalités offertes par Perl et Python.

Décomposition d'un tableau

Exemple simple

var toto = ["un", "deux", "trois"];

// sans utiliser la décomposition
var un    = toto[0];
var deux  = toto[1];
var trois = toto[2];

// en utilisant la décomposition
var [un, deux, trois] = toto;

Affectation sans déclaration

L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :

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

Valeurs par défaut

On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit undefined. Par exemple :

var a, b;

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

Échange de variables

Une fois le fragment de code exécuté, on aura b égal à 1 et a égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une permutation XOR).

var a = 1;
var b = 3;

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

Renvoyer plusieurs valeurs

Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.

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

Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, f() renvoie les valeurs [1, 2].

var a, b;
[a, b] = f();
console.log("A vaut " + a + " B vaut " + b);

L'instruction [a, b] = f() assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici a vaut 1 et b vaut 2.

On peut également récupérer la valeur de retour comme un tableau :

var x = f();
console.log("X vaut " + x);

Et on aura x qui sera égal au tableau contenant 1 et 2.

Ignorer certaines valeurs

On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :

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

var [a, , b] = f();
console.log("A vaut " + a + " B vaut " + b);

Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :

[,,] = f();

Exploiter les résultats d'une expression rationnelle

Lorsque la méthode exec(), liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :

function parseProtocol(url) { 
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"

Affecter le reste d'un tableau à une variable

On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :

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

Un exception SyntaxError sera levée si une virgule est laissée à la fin de l'élément du tableau de gauche :

var [a, ...b,] = [1, 2, 3] 
// SyntaxError : un élément du reste ne peut pas avoir
//               de virgule à la fin

Décomposer un objet

Exemple simple

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

// Assign new variable names
var {p: toto, q: truc} = o;

console.log(toto); // 42
console.log(truc); // true 

Affectation sans déclaration

Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :

var a, b;
({a, b} = {a:1, b:2});

Note : Les parenthèses ( ... ) utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.

Affecter de nouveaux noms aux variables et fournir des valeurs par défaut

Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut undefined.

var {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

Arguments par défaut d'une fonction

Version ES5

function dessinGrapheES5(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // seulement ensuite on dessine le graphe
}

dessinGrapheES5({
  cords: { x: 18, y: 30 },
  radius: 30
});

Version ES2015

function dessinGrapheES2015({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
{
  console.log(size, cords, radius);
  // on dessine le graphe
}

dessinGrapheES2015({
  cords: { x: 18, y: 30 },
  radius: 30
});

Note : Dans la signature de la fonction dessinGrapheES2015 ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit ({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », dessinGrapheES2015() pourra être appelée sans paramètre.

Décomposition imbriquée avec objets et tableaux

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

Décomposition et utilisation de for of

var personnes = [
  {
    nom: "Alain Dupont",
    famille: {
      mère: "Isabelle Dupont",
      père: "Jean Dupont",
      sœur: "Laure Dupont"
    },
    âge: 35
  },
  {
    nom: "Luc Marchetoile",
    famille: {
      mère: "Patricia Marchetoile",
      père: "Antonin Marchetoile",
      frère: "Yann Marchetoile"
    },
    âge: 25
  }
];

for (var {nom: n, famille: { père: f } } of personnes) {
  console.log("Nom : " + n + ", Père : " + f);
}

// "Nom : Alain Dupont, Père : Jean Dupont"
// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"

Interpréter les propriétés d'objets passés en arguments

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " est " + name);
}

var user = { 
  id: 42, 
  displayName: "jbiche",
  fullName: { 
      firstName: "Jean",
      lastName: "Biche"
  }
};

console.log("userId: " + userId(user)); w// "userId: 42"
whois(user); // "jbiche est Jean"

Cela permet d'accéder directement à id, displayName et firstName depuis l'objet user.

Les noms de propriétés calculés et la décomposition

Il est possible d'utiliser des noms de propriétés calculés, comme avec les littéraux objets, avec la décomposition.

let clé = "z";
let { [clé]: toto } = { z: "truc" };

console.log(toto); // "truc"

Syntaxe du « reste » et décomposition d'un objet

La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript ajoute la syntaxe du reste pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :

let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
a; // 10
b; // 20
reste; // { c: 30, d: 40 }

Gestion des identifiants invalides comme noms de propriétés

Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :

const toto = {'truc-bidule': true}
const {'truc-bidule': trucBidule } = toto;

console.log(trucBidule);  // "true"

Spécifications

Spécification État Commentaires
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Destructuring assignment' dans cette spécification.
Standard Définition initiale.
ECMAScript Latest Draft (ECMA-262)
La définition de 'Destructuring assignment' dans cette spécification.
Projet  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simpleChrome Support complet 49Edge Support complet 14Firefox Support complet 41
Notes
Support complet 41
Notes
Notes Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
IE Aucun support NonOpera Support complet OuiSafari Support complet 8WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14Firefox Android Support complet 41
Notes
Support complet 41
Notes
Notes Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
Opera Android Support complet OuiSafari iOS Support complet 8Samsung Internet Android Support complet 5.0nodejs Support complet 6.0.0
Computed property namesChrome Support complet 49Edge Support complet 14Firefox Support complet 34IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14Firefox Android Support complet 34Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet 5.0nodejs Support complet Oui
Rest in arraysChrome Support complet 49Edge Support complet 14
Désactivée
Support complet 14
Désactivée
Désactivée From version 14: this feature is behind the Enable experimental Javascript features preference.
Firefox Support complet 34IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14
Désactivée
Support complet 14
Désactivée
Désactivée From version 14: this feature is behind the Enable experimental Javascript features preference.
Firefox Android Support complet 34Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet 5.0nodejs Support complet 6.0.0
Rest in objects
Expérimentale
Chrome Support complet 60Edge Aucun support NonFirefox Support complet 55IE Aucun support NonOpera Support complet OuiSafari Support complet 11.1WebView Android Support complet 60Chrome Android Support complet 60Edge Mobile Aucun support NonFirefox Android Support complet 55Opera Android Support complet OuiSafari iOS Support complet 11.1Samsung Internet Android Aucun support Nonnodejs Support complet 8.3.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, flawyte, db0sch, YugzLess, jMoulis, nicolas-zozol, blackfox, cdr
Dernière mise à jour par : SphinxKnight,