Syntaxe de 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 octobre 2015.

En savoir plus
Voir la compatibilit complte

La syntaxe de dcomposition permet d'tendre un itrable (par exemple une expression de tableau ou une chane de caractres) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs lments (pour les littraux de tableaux) ou de paires cls-valeurs (pour les littraux d'objets).

Exemple interactif

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

Syntaxe

Pour l'utilisation de la dcomposition dans les appels de fonction :

f(...objetIterable);

Pour les littraux de tableaux :

[...objetIterable, 4, 5, 6];

Pour les littraux objets (nouvelle fonctionnalit pour ECMAScript, actuellement en proposition de niveau 4, finalise) :

let objClone = { ...obj };

Exemples

Utiliser la dcomposition dans les appels de fonction

Amliorer la fonction `apply()`

Il arrive souvent qu'on veuille utiliser Function.prototype.apply avec un tableau parmi les arguments de la fonction utilise :

function f(x, y, z) {}
var args = [0, 1, 2];
f.apply(null, args);

avec la dcomposition, on peut dsormais crire :

function f(x, y, z) {}
var args = [0, 1, 2];
f(...args);

Tout argument pass une fonction peut tre dcompos grce cette syntaxe et cette syntaxe peut tre utilise pour plusieurs arguments.

function f(v, w, x, y, z) {}
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

Utiliser `apply()` avec l'oprateur `new`

Avec ES5, il n'est pas possible d'utiliser new avec apply (selon ES5 apply effectue un appel [[Call]] et pas un appel [[Construct]]). Avec ES2015, la syntaxe de dcomposition permet de le faire naturellement :

var champsDate = lireChampsDate(maBaseDeDonnes);
var d = new Date(...champsDate);

Afin d'utiliser new avec un tableau de paramtres, sans utiliser la dcomposition, il faudrait l'employer indirectement grce une application partielle :

function applyAndNew(constructor, args) {
  function partial() {
    return constructor.apply(this, args);
  }
  if (typeof constructor.prototype === "object") {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

function monConstructeur() {
  console.log("arguments.length: " + arguments.length);
  console.log(arguments);
  this.prop1 = "val1";
  this.prop2 = "val2";
}

var mesArguments = ["bi", "bop", "bup", null];
var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);

console.log(new monConstructeurAvecArguments());
// (log fourni par monConstructeur):           arguments.length: 4
// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}

Utiliser la dcomposition dans les littraux de tableau

Amliorer les littraux de tableau

l'heure actuelle, sans la dcomposition, si on a un tableau et qu'on souhaite crer un nouveau tableau compos du premier, on ne peut pas utiliser un littral de tableau et il faut utiliser des fonctions comme push(), splice(), concat(), etc. Avec la syntaxe de dcomposition, cela devient plus succinct :

var articulations = ["paules", "genoux"];
var corps = ["ttes", ...articulations, "bras", "pieds"];
// ["ttes", "paules", "genoux", "bras", "pieds"]

Comme pour les fonctions, la syntaxe peut tre utilis plusieurs fois.

Copier un tableau

var arr = [1, 2, 3];
var arr2 = [...arr];
arr2.push(4);

console.log(arr2); // [1, 2, 3, 4]
console.log(arr); // [1, 2, 3] (inchang)

Note : Lorsqu'on utilise la dcomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par consquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqus dans d'autres tableaux) comme le montre l'exemple suivant (il en va de mme avec Object.assign() et la dcomposition).

var a = [[1], [2], [3]];
var b = [...a]; // b vaut [[1], [2], [3]]

b.shift().shift(); // *a* vaut dsormais [[], [2], [3]];

Une meilleure faon de concatner des tableaux

concat est souvent utilis afin de concatner un tableau la suite d'une autre. Avec ES5, on aurait le code suivant :

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// On ajoute les lments de arr2 aprs ceux de arr1
var nouveauTableau = arr1.concat(arr2);

Avec ES2015 et la dcomposition, on peut crire :

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]

unshift est souvent utilis afin d'insrer des valeurs d'un tableau au dbut d'un autre tableau. Avec ES5, on peut crire :

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// On ajoute tous les lments
// de arr2 au dbut de arr1
Array.prototype.unshift.apply(arr1, arr2); // arr1 vaut [3, 4, 5, 0, 1, 2]

Avec ES2015 et la dcomposition, on peut crire :

var arr1 = [4, 5, 6];
var arr2 = [1, 2, 3];
arr1 = [...arr2, ...arr1];
// arr1 vaut dsormais [1, 2, 3, 4, 5, 6]

Note : Il y a une diffrence avec unshift() : ici, on cre un nouveau tableau qui est affect arr1, le tableau original de arr1 n'est pas modifi "sur place".

Utiliser la dcomposition avec les littraux objet

La proposition relative la dcomposition des proprits (actuellement au stade de proposition de niveau 4) vise ajouter la dcomposition des proprits pour les littraux objets. Cela permet de copier les proprits numrables directement rattaches un objet source sur un nouvel objet.

Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc tre obtenue avec une syntaxe plus concise que celle utilisant Object.assign().

var profil = { prenom: "Sarah", profilComplet: false };
var profilMisAJour = { nom: "Dupont", profilComplet: true };

var clone = { ...profil };
// Object { prenom: 'Sarah', profilComplet: false }

var fusion = { ...profil, ...profilMisAJour };
// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };

On notera que Object.assign() dclenche les mutateurs, ce qui n'est pas le cas pour la syntaxe de dcomposition.

Il n'est pas possible de remplacer ou de recopier le comportement de la fonction Object.assign() :

var profil = { prenom: 'Sarah', profilComplet: false };
var profilMisAJour = { nom: 'Dupont', profilComplet: true };

const fusionner = ( ...objets) => {...objets};
var nouveauProfil = fusionner(profil, profilMisAJour);
// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }

var autreNouveauProfil = fusion({}, obj1, obj2);
// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }

Dans l'exemple prcdent, la syntaxe de dcomposition ne fonctionne pas comme on pourrait s'y attendre : il dcompose les arguments en un tableau grce au paramtre du reste.

La dcomposition ne s'applique qu'aux itrables

Pour rappel : la syntaxe de dcomposition ne s'applique qu'aux objets itrables :

var obj = { cl1: "valeur1" };
function maFonction(x) {
  console.log(x); // undefined
}
maFonction(...obj);
var args = [...obj];
console.log(args, args.length); //[] 0

Utiliser la dcomposition avec de nombreuses valeurs

Lorsqu'on utilise la dcomposition (comme dans les exemples prcdents), il faut faire attention ne pas dpasser le nombre maximal d'arguments du moteur JavaScript. En effet, la dcomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter Function.prototype.apply.

Les paramtres du reste

La syntaxe des paramtres du reste ressemble la syntaxe de dcomposition mais est utilise afin de destructurer des tableaux et des objets. D'une certaine faon, la syntaxe du reste est l'oppose de la dcomposition : la premire collecte plusieurs lments et les condense en un seul lment tandis que la seconde explose les lments. Pour plus d'informations, voir la page sur les paramtres du reste.

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification # prod-SpreadElement
ECMAScript 2027 LanguageSpecification # prod-ArgumentList
ECMAScript 2027 LanguageSpecification # prod-PropertyDefinition