L'opérateur de décomposition ('...')

L'opérateur de décomposition (anglais : spread syntax) permet d'étaler un tableau ou un objet en valeurs individuelles, et peut avoir plusieurs utilisations :

appeler une fonction avec des paramètres provenant d'un tableau
```
const out = f(a, ...iterableObj, b)
```

copier un tableau, en le modifiant éventuellement au passage :

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];  // -> ["head", "shoulders", "knees", "and", "toes"]

copier un objet, en le modifiant éventuellement au passage :

const obj2 = { ...obj1, key: 'value' }
const merge = { ...obj1, ...obj2, ...obj3 }  // Fusion de 3 objets

Cette dernière syntaxe peut être mise à profit dans l'écriture de composants React.

Note : l'ordre dans lequel on combine des tableaux / objets a une importance : on met en effet à jour les données de la gauche vers la droite :

const pays = {'fr': 'France', 'uk': 'Royaume-Uni'}

// Ici, on recopie l'objet "pays", et on met la copie à jour avec l'objet {'uk': 'Grande-Bretagne'}
const out = {...pays, 'uk': 'Grande-Bretagne'}  // -> {'fr': 'France', 'uk': 'Grande-Bretagne'}

// Ici, on met à jour l'objet {'uk': 'Grande-Bretagne'} avec les entrées de "pays"
const out = {'uk': 'Grande-Bretagne', ...pays}  // -> {'fr': 'France', 'uk': 'Royaume-Uni'}

Object.assign

Il existe une autre syntaxe pour parvenir au même résultat, Object.assign(o1, o2, o3, ...) : qui retourne o1, après l'avoir mis à jour à partir des éléments suivants o2, o3, ... de la gauche vers la droite. Mais l'opérateur ... est, en général, plus utile.

// Ici, on met à jour {} avec `pays`, puis avec {'uk': 'Grande-Bretagne'}
const out = Object.assign({}, pays, {'uk': 'Grande-Bretagne'})  // -> {'fr': 'France', 'uk': 'Grande-Bretagne'}

// Ici, on met à jour l'objet {'uk': 'Grande-Bretagne'} avec les entrées de `pays`
const out = Object.assign({'uk': 'Grande-Bretagne'}, pays)  // -> {'fr': 'France', 'uk': 'Royaume-Uni'}

Le clonage d'un objet ("shallow copy") est également possible :

const clone = {...original};
const clone = Object.assign({}, original);  // On met à jour un objet vide à partir de `original`