Déstructuration et création de variable

Déstructuration

Bonjour à vous !
Aujourd’hui petit cours théorique sur la déstructuration d’objet pour créer des variables en javascript !

Principe de déstructuration

Déstructuration d'un gateau
Déstructuration d’un gateau

Tout d’abord, je vous ai parlé de déstructuration d’objets dans l’introduction. Je n’ai pas été assez précis car il est également possible de déstructurer les tableaux.

Je pense que la plupart d’entre vous connaissent les objets et tableaux en javascript, ainsi je ne vais pas m’attarder dessus.
Retenons simplement que les deux sont des structures de données permettant de stocker plusieurs valeurs. L’une à l’aide de couple clé/valeur (object), l’autre sous forme d’une liste (tableaux).

Ce sont donc des structures de données. C’est à dire des données structurées dans une variable.
Ainsi, quand on parle de déstructuration, cela correspond à extraire des données afin de déstructurer la structure de donnée et ainsi obtenir plusieurs variables.

Ça fait beaucoup de fois structure et j’en suis désolé. Je vais essayé de vous l’éviter au mieux pour la suite !

Tableaux et déstructuration

Comme un exemple vaut mieux que milles mots, voici un exemple de code:

// Créons un tableaux avec 3 race de chien
const races = ['labrador','Chihuahua','lévrier'];

// Maintenant on déstructure le tableau pour obtenir trois variables: 
const [premiereRace, deuxiemeRace, troisiemeRace] = races;

// On obtiens trois variables contenant chacune une des races du tableaux
console.log(premiereRace); // labrador
console.log(deuxiemeRace); // Chihuahua
console.log(troisiemeRace); // lévrier

On peux même déstructurer les tableaux retournés par des fonctions ! Comme dans ce cas:

const [premiereRace, secondeRace] = 'Labrador Tekkel'.split(' ');

console.log(premiereRace); // Labrador
console.log(secondeRace); // Tekkel

Puissant non ? Et c’est pas fini !
Je vous ai dis que ça fonctionnait sur les objets et tableaux ? Eh bien ce n’est pas tout à fait vrai, en fait ça fonctionne sur tout itérable !
Ainsi, on peux déstructurer des chaines de caractère de la même manière, mais également les Set, les Map

const [a, b, c, d] = ''wouah';

const [i, j, k, f] = new Set([1,2,3,4]);

const myMap = new Map();
myMap.set('A', "valeur 1");
myMap.set('B', "valeur 2");
myMap.set('C', "valeur 3");
myMap.set('D', "4");


const [l, m, n, o] = myMap;

Échanger des variables

Swap par déstructuration !
Swap par déstructuration !

Plein d’autres choses sont possibles avec la déstructuration. On peux échanger les valeurs de variables en une seule ligne :

const a = 1;
const b = 2;
const c = 3;

[c, b, a] = [a, c, b]; // c=1, b= 3 et a = 2 

Valeurs par défaut

Mais aussi définir des valeurs par défaut :

const [nom = "Dupont", prenom = "Arthur"] = ["LeBorgne"];

console.log(nom);    // LeBorgne -> provient du tableau
alert(prenom); // Arthur -> la valeur par défaut

Ignorer des éléments

On est presque au bout ! Mais attendez, ceci est super utile !
Vous pouvez ignorer des valeurs en ne renseignant tout simplement aucune variable entre deux virgules:

const [a, , b] = ["Labrador", "chien", "Affectueux", "qui aime les enfants"];

console.log(a); // Labrador
console.log(b); // Affectueux

Et le reste ??

On a vu comment récupérer certains éléments en détail, mais comment récupérer tout ce qui reste ensuite ?
Eh bien grâce à l’opérateur de décomposition écrit: …

const [A, B, ...C] = ["Labrador", "Tekkel", "Chihuahua", "sont des races de chien"];

console.log(A); // Labrador
console.log(B); // Tekkel

console.log(C); // ["Chihuahua", "sont des races de chien"]

Important !

La déstructuration n’est pas destructive !! Ainsi, l’objet déstructuré existe toujours avec les mêmes valeurs !
Le processus de déstructuration ne fait que copier vers de nouvelles variables !

Objets et déstructuration

Cela fonctionne de la même manière qu’avec les tableaux, voici un exemple basique:

const chien = {
  race: "Labrador",
  nom: "Médor",
  appetit: "vorace"
};

let {race, nom, appetit} = chien;

console.log(race);  // Labrador
console.log(nom);  // Médor
console.log(appetit); // vorace

Conclusion

Pour le reste, retrouve les mêmes fonctionnalités qu’avec les tableaux. C’est pour cette raison que je vais terminer cet article pour éviter que vous fassiez une overdose ! N’hésitez pas à chercher, il est possible de faire plein de choses avec ça, notamment renommer les variables obtenus par déstructuration de l’objet.


Sources


Articles récents

Déstructuration et création de variable

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut