Simplifier son code JS avec la déstructuration

Qu’est-ce que la déstructuration ?

Extraction de valeurs

La déstructuration en programmation est une fonctionnalité qui permet d’extraire des valeurs depuis des objets ou des tableaux, puis de les assigner au sein de variables distinctes.

En extrayant uniquement les valeurs souhaitées d’un objet ou d’un tableau, il n’est alors plus nécessaire de faire référence à l’objet ou au tableau entier.

En JavaScript, la déstructuration est largement utilisée pour les bénéfices qu’elle apporte en termes de simplification et de lisibilité du code.

Déstructurer un objet

Voici un exemple de déstructuration d’objet :

const user = {
	firstname: "James",
	lastname: "Bond",
	premium: true
};

const { firstname, lastname } = user;

console.log(firstname, lastname); // Affiche "James Bond"

Les propriétés firstname et lastname de l’objet data sont assignées dans des variables du même nom.

const user = { ... };

const { firstname, lastname, premium = false } = user;

Déstructurer un tableau

Voici un exemple de déstructuration de tableau :

const fruits = ["Pomme", "Poire", "Banane"];

const [f1, f2, f3] = fruits;

console.log(f1, f2, f3); // Affiche "Pomme Poire Banane"

Les éléments du tableau fruits sont extraits dans les variables f1, f2, et f3. L’ordre d’extraction est déterminé par l’indice des valeurs du tableau.

Une histoire de sucre syntaxique

Le sucre syntaxique caractérise une syntaxe alternative plus « Developer Friendly » (DX), pour une fonctionnalité spécifique dans un langage de programmation.

Et en ce qui concerne la déstructuration, il serait difficile de s’en passer !

Sans sucre syntaxique pour la déstructuration en JavaScript, vous devriez en réalité faire vos assignations de manière plus explicite.

Par exemple, si vous avez un objet pour lequel vous souhaitez assigner certaines de ses valeurs à des variables, vous devriez accéder à chaque propriété individuellement. Voici un exemple sans déstructuration :

const user = {
	firstname: "James",
	lastname: "Bond",
	premium: true
};

const firstname = user.firstname;
const lastname = user.lastname;

Avec la déstructuration, cela peut être simplifié en const { firstname, lastname } = user, et ça, c’est beau. 🌈

La déstructuration, au-delà du JavaScript

La déstructuration, telle que présentée en JavaScript, existe également dans d’autres langages de programmation tels que Python, Ruby ou encore Swift.

Si chaque langage possède bien entendu sa propre syntaxe et ses propres règles pour la déstructuration, le concept général demeure similaire.