Jusqu’à présent on voyait les crochets [] qui servent à definir un array qu’à la droit du signe =
Par exemple:
const nombres = [1,2,3];
Si on voulait créer des nouvelles variables a et b à partir du array nombres, on pouvait faire ça:
const nombres = [1,2,3];
const a = nombres[0];
const b = nombres[1];
console.log(a); // 1
console.log(b); // 2
Maintenant on peut destructurer notre array pour définir des nouvelles variables.
Remarquez que nos crochets sont passés du côté gauche du signe = !
const nombres = [1,2,3];
const [a,b] = nombres;
console.log(a); // 1
console.log(b); // 2
On a créé les variables a et b à partir du array nombres.
De la même manière on aurait pu créer la variable c
const nombres = [1,2,3];
const [a,b,c] = nombres;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Que se passe-t’il si on déclare plus de variables que celles contenues dans le array ?
const nombres = [1,2,3];
const [a,b,c,d] = nombres;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined
On peut combiner le destructuring avec les valeurs par défaut.
const nombres = [1,2,3];
const [a,b,c,d = 10] = nombres;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 10
Si on souhaite déclarer quelques variables et mettre toutes les autres dans un array on peut utiliser les paramètres REST
const nombres = [1,2,3];
const [a, ...b] = nombres;
console.log(a); // 1
console.log(b); // [2,3]
On peut également décider de sauter une valeur
const nombres = [1,2,3];
const [a,,c] = nombres;
console.log(a); // 1
console.log(c); // 3
On n’est pas obligé de créer le array et ensuite de le destructurer pour créer des variables.
On peut tout faire en même temps !
const [a,,c] = [1,2,3];
console.log(a); // 1
console.log(c); // 3
Le destructuring peut être assez utile si on veut intervertir 2 valeurs
let a = 1;
let b = 2;
[b,a] = [a,b];