Décomposition

Affectation par décomposition pour un objet

const karim = {
   name: 'Bernardet',
   firstname: 'Karim',
   id: 1,
   username: 'karim',
}

/* Plus tard */
const {id, username} = karim
id // 1
username // 'karim'

Affectation par décomposition par position (pour un Array)

const numbers = [1, 2, 3, 4]


/* Plus tard */
const [first, second] = numbers

first // 1
second // 2

const [,, third] = numbers

third // 3

// Affectation par décomposition (plus de détails juste après)
const [first, second, ...leReste] = numbers

first // 1
second // 2
leReste // [3, 4]

La syntaxe de décomposition

Depuis ES6, une nouvelle syntaxe existe : la syntaxe de décomposition ... qui sert à plusieurs choses, et dont le sens change en fonction de là où elle est utilisée.

Avec les Array

const names = ["Scar", "Jafar", "Hook", "Shere Khan"]
const [first, second, ...leReste] = names // Ici, les ... sont forcément en dernier !
first // 'Scar'
second // 'Jafar'
leReste // ['Hook', 'Shere Khan']
const newNames = [
 ...names, // Ici, les ... peuvent être n'importe où, l'ordre des éléments du tableau en dépendra
 'Cruella'
]
newNames // ['Scar', 'Jafar', 'Hook', 'Shere Khan', 'Cruella']

Avec les objets

const scar = {name: 'Scar', animal: 'Lion', details: 'Bad guy'}
const { name, ...leResteObj } = scar // Les ... forcément en dernier
name // 'Scar'
leResteObj // { animal: 'Lion', details: 'Bad guy' }
const mufasa = {
 ...scar,
 name: 'Mufasa', // Écrasement de la propriété 'name' de scar
 details: 'Good guy' // et de la propriété 'details'
}
mufasa // { name: 'Mufasa', animal: Lion, details: 'Good guy' }

Avec les fonctions

const addOrConcat = (arg1, arg2, ...args) => arg1 + arg2 + args // les ... forcément en dernier
addOrConcat(1, 2, 3, 4) // args contiendra [3,4]
addOrConcat(1, 2, [3, 4]) // args contiendra [[3,4]]
addOrConcat(...[1, 2], ...[3, 4]) // args contiendra [3, 4]
addOrConcat(...[1, 2, 3, 4, 5]) // args contiendra [3, 4, 5]