Image de couverture - Simplifier son Code JS avec la Déstructuration

Simplifier son Code JS avec la Déstructuration

Découvrez le pouvoir de la déstructuration en JavaScript. Simplifiez votre code et améliorez sa lisibilité en maîtrisant cette technique de développement essentielle.

Icône de calendrier
Icône de chronomètre 3 min

La déstructuration en JavaScript est une fonctionnalité puissante qui simplifie la manipulation d’objets et de tableaux. Explorons les bases de la déstructuration, sa syntaxe et découvrons comment elle contribue à améliorer l’expérience de développement en JavaScript.

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 :

copié !
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.

Affectation par défaut

La possibilité d’affecter des valeurs par défaut lors de la déstructuration est utile pour les valeurs optionnelles.

copié !
const user = { ... };

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

Ici, si user.premium, n’est pas défini, alors premium vaudra false.

Déstructurer un tableau

Voici un exemple de déstructuration de tableau :

copié !
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 :

copié !
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.

En conclusion, la déstructuration en JavaScript est un procédé essentiel pour améliorer la lisibilité de votre code lors de la manipulation d’objets et de tableaux.

Que vous soyez novice ou expérimenté, maîtriser cette fonctionnalité ouvrira de nouvelles perspectives dans votre approche du langage JavaScript et au-delà, dans d’autres langages de programmation.

Lire aussi