Destructuring Arrays

Section Progression:


 
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];