3.0 Destructuration
Après l'opérateur spread/rest, nous découvrons une autre fonctionnalité essentielle du JavaScript moderne : la destructuration. Elle permet d'extraire facilement des éléments d'un tableau ou les propriétés d'un objet, et de les stocker dans des variables, le tout en une seule ligne. C'est une syntaxe très pratique et omniprésente en React.
Destructuration : deux cas d'usage
- Tableaux : on cible par position (crochets).
- Objets : on cible par nom de propriété (accolades).
- Permet d'omettre des éléments avec une virgule.
- Très utilisée pour récupérer les props en React.
Pour un tableau, la destructuration utilise des crochets à gauche du signe égal : const [a, b] = [1, 2]. L'ordre des éléments détermine quelle variable reçoit quelle valeur. Pour un objet, on utilise des accolades : const { name } = { name: "Mathieu", age: 21 }. Ici, c'est le nom de la propriété qui sert de clé, l'ordre n'a aucune importance.
// Destructuration de tableau
const numbers = [1, 2, 3];
const [num1, num2] = numbers; // num1 = 1, num2 = 2
// Sauter un élément avec une virgule
const [num1, , num3] = numbers; // num1 = 1, num3 = 3
// Destructuration d'objet
const person = { name: "Mathieu", age: 21 };
const { name } = person; // name = "Mathieu"La destructuration est différente de l'opérateur spread : spread extrait tous les éléments pour les redistribuer ailleurs, alors que destructure cible des éléments précis pour les stocker dans des variables nommées. En React, vous utiliserez la destructuration pour extraire les props (ex: const { title, amount } = props) ou récupérer des états des hooks comme useState.
En résumé
La destructuration en JavaScript permet d'extraire de manière élégante des éléments spécifiques de tableaux ou des propriétés d'objets pour les assigner directement à des variables. Contrairement à l'opérateur spread qui distribue tous les éléments, la destructuration vous permet de sélectionner uniquement ceux dont vous avez besoin. Elle fonctionne pour les tableaux (en utilisant l'ordre) et pour les objets (en utilisant les noms de propriétés).
Points clés
- La destructuration extrait des éléments ou propriétés spécifiques, tandis que l'opérateur spread les distribue tous dans un nouveau tableau ou objet
- Pour les tableaux : l'ordre des variables compte ; on peut sauter des éléments en laissant des virgules vides (ex: const [a, , c] = [1, 2, 3])
- Pour les objets : on cible par NOM de propriété, pas par ordre, avec la syntaxe const { propriété } = objet
- Si une propriété n'existe pas lors de la destructuration d'objet, la variable sera undefined
- Syntaxe tableaux : const [a, b] = [valeur1, valeur2]
- Syntaxe objets : const { name, age } = objet
Questions fréquentes
Quelle est la différence entre la destructuration et l'opérateur spread?
L'opérateur spread distribue TOUS les éléments ou propriétés dans un nouveau tableau ou objet. La destructuration, elle, extrait uniquement les éléments ou propriétés spécifiques pour les assigner à des variables distinctes, ce qui est plus sélectif et utile quand on n'a besoin que de certaines valeurs.
Peut-on sauter des éléments lors de la destructuration de tableaux?
Oui, absolument. On peut laisser des virgules vides pour ignorer des éléments. Par exemple, const [a, , c] = [1, 2, 3] extrait uniquement le 1er et le 3e élément (1 et 3), en sautant le 2e.
Comment fonctionne la destructuration pour les objets, et que se passe-t-il si une propriété n'existe pas?
Pour les objets, on utilise des accolades et on cible les propriétés par leur NOM. Par exemple, const { name, age } = objet extrait les propriétés 'name' et 'age'. Si une propriété n'existe pas dans l'objet, la variable correspondante sera undefined.