Affecter par dcomposition

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis aot 2016.

En savoir plus
Voir la compatibilit complte

L'affectation par dcomposition (destructuring en anglais) est une expression JavaScript qui permet d'extraire (unpack en anglais) des donnes d'un tableau ou d'un objet grce une syntaxe dont la forme ressemble la structure du tableau ou de l'objet.

Exemple interactif

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

Syntaxe

let 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 considr comme un bloc et non comme un objet littral.

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

Description

Ces expressions utilisant des littraux pour les objets ou les tableaux permettent de crer simplement des donnes regroupes. Une fois cres, on peut les utiliser de n'importe quelle faon, y compris comme valeur renvoye par une fonction.

const x = [1, 2, 3, 4, 5]; // On cre un "paquet" de donnes
const [y, z] = x; // On utilise l'affectation par dcomposition
console.log(y); // 1
console.log(z); // 2

L'intrt de l'assignation par dcomposition est de pouvoir lire une structure entire 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 fonctionnalits offertes par des langages tels que Perl et Python.

Dcomposition d'un tableau

Exemple simple

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

// sans utiliser la dcomposition
const un = toto[0];
const deux = toto[1];
const trois = toto[2];

// en utilisant la dcomposition
const [un, deux, trois] = toto;

Affectation sans dclaration

L'affectation par dcomposition peut tre effectue sans qu'il y ait de dclaration directement dans l'instruction d'affectation. Par exemple :

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

Valeurs par dfaut

On peut dfinir une valeur par dfaut au cas o la valeur extraite du tableau soit undefined. Par exemple :

let a, b;

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

change de variables

Une fois le fragment de code excut, on aura b gal 1 et a gal 3. S'il n'avait pas t possible d'utiliser l'affectation par dcomposition, l'change des valeurs aurait ncessit une variable temporaire (pour des donnes binaires, on aurait pu utiliser une permutation XOR).

let a = 1;
let b = 3;

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

Renvoyer plusieurs valeurs

Grce l'affectation par dcomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il tait dj possible de renvoyer un tableau mais cela ajoute un nouveau degr de flexibilit.

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

Les valeurs de retour sont dclares via une syntaxe semblable celle utilise pour dclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhait. Dans cet exemple, f() renvoie les valeurs [1, 2].

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

L'instruction [a, b] = f() assigne, dans l'ordre, les rsultats de la fonction aux variables reprsentes entre les crochets. Ainsi, ici a vaut 1 et b vaut 2.

On peut galement rcuprer la valeur de retour comme un tableau :

const 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 renvoyes qu'on ne souhaiterait pas traiter :

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

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

Aprs avoir excut ce code, on aura a gal 1 et b gal 3. La valeur 2 est ignore. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :

[, ,] = f();

Exploiter les rsultats d'une expression rationnelle

Lorsque la mthode exec(), lies aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complte de la chane qui correspond puis ensuite les diffrentes portions correspondant aux diffrents groupes. L'affectation par dcomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier lment qui est la correspondance complte :

function parseProtocol(url) {
  const 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"]

  const [, 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 dcomposition d'un tableau afin d'en affecter une partie une variable :

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

Un exception SyntaxError sera leve si une virgule est laisse la fin de l'lment du reste du tableau de gauche :

const [a, ...b,] = [1, 2, 3];
// SyntaxError : un lment du reste ne peut pas avoir
//               de virgule  la fin

Dcomposer un objet

Exemple simple

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

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

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

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

Affectation sans dclaration

Il est possible d'effectuer une affectation par dcomposition mme si aucune dclaration n'est directement utilise dans l'instruction d'affectation. Par exemple :

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

Note : Les parenthses ( ... ) utilises autour de l'instruction sont ncessaires pour que la partie gauche soit bien interprte comme un objet littral et non comme un bloc. Il est galement ncessaire d'avoir un point-virgule avant les parenthses de l'instruction car sinon, ces parenthses peuvent tre interprtes comme un appel de fonction.

Affecter avec un nom diffrent

Lorsqu'on dcompose un objet, on peut affecter la variable obtenue sur une variable qui possde un autre nom (que celui de la proprit) :

const o = { p: 42, q: true };
const { p: toto, q: truc } = o;

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

Ici, par exemple, const {p: toto} = o prend la proprit p de l'objet o pour l'affecter une variable locale intitule toto.

Valeurs par dfaut

Une variable peut recevoir une valeur par dfaut lors de la dcomposition si la proprit correspondante de l'objet vaut undefined.

const { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

Affecter de nouveaux noms aux variables et fournir des valeurs par dfaut

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

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

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

Arguments par dfaut d'une fonction

Version ES5

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

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

Version ES2015

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

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

Note : Dans la signature de la fonction dessinGrapheES2015 ci avant, la valeur dcompose gauche utilise un objet vide comme oprande droit ({size = 'big', coords = { 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 appele sans paramtre.

Dcomposition imbrique avec objets et tableaux

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

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

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

Dcomposition et utilisation de for of

const personnes = [
  {
    nom: "Alain Dupont",
    famille: {
      mere: "Isabelle Dupont",
      pere: "Jean Dupont",
      soeur: "Laure Dupont",
    },
    age: 35,
  },
  {
    nom: "Luc Marchetoile",
    famille: {
      mere: "Patricia Marchetoile",
      pere: "Antonin Marchetoile",
      frere: "Yann Marchetoile",
    },
    age: 25,
  },
];

for (const {
  nom: n,
  famille: { pere: f },
} of personnes) {
  console.log("Nom : " + n + ", Pre : " + f);
}

// "Nom : Alain Dupont, Pre : Jean Dupont"
// "Nom : Luc Marchetoile, Pre : Antonin Marchetoile"

Dcomposer les proprits d'objets passs en arguments

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

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

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

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

Cela permet d'accder directement id, displayName et firstName depuis l'objet user.

Les noms de proprits calculs et la dcomposition

Il est possible d'utiliser des noms de proprits calculs, comme avec les littraux objets, avec la dcomposition.

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

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

Syntaxe du reste et dcomposition d'un objet

La proposition de dcomposition des proprits et de la syntaxe du reste dans ECMAScript ajoute la syntaxe du reste pour la dcomposition. La proprit du reste permet de collecter les proprits numrables restantes qui n'auraient pas t extraites par la dcomposition :

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 proprits

Si besoin, on peut galement utiliser la dcomposition pour fournir un alias des noms de proprits qui ne seraient pas des identifiants valides. Par exemple :

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

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

Combiner la dcomposition de tableaux et d'objets

Il est possible de dcomposer un tableau et un objet simultanment. Dans l'exemple qui suit, on accde ainsi la proprit nom du troisime lment du tableau props:

const props = [
  { id: 1, nom: "Toto" },
  { id: 2, nom: "Truc" },
  { id: 3, nom: "Bidule" },
];

const [, , { nom }] = props;
console.log(nom); // Bidule

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification # sec-destructuring-assignment
ECMAScript 2027 LanguageSpecification # sec-destructuring-binding-patterns

Compatibilit des navigateurs

Voir aussi

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 2 dc. 2025 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu