Les techniques abrégées en JavaScript simplifient considérablement votre code et lui apportent meilleure lisibilité. Cet article explore quelques techniques puissantes de raccourcissement en JavaScript qui, en plus d’améliorer vos compétences en programmation, augmenteront aussi votre productivité.
Affectation par destructuration
L’affectation par destructuration décompose les valeurs des tableaux ou les propriétés des objets en variables distinctes, facilitant ainsi le travail avec des structures de données complexes.
// La version longue
const person = { firstName: 'John', lastName: 'Doe' };
const firstName = person.firstName;
const lastName = person.lastName;
// La version optimisée
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;Destructuration de tableaux
La déstructuration de tableau extrait des éléments individuels d’un tableau et les assigne à des variables distinctes.
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3Destructuration d’objets
Similaire à la déstructuration de tableaux, la déstructuration d’objets décompose les propriétés d’un objet en variables, simplifiant l’accès aux propriétés.
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(firstName); // 'John'
console.log(lastName); // 'Doe'Abréviation d’objets
L’abréviation d’objets simplifie le processus de création d’objets avec des propriétés ayant le même nom que des variables.
const name = 'Alice';
const age = 30;
const person = { name, age };
console.log(person); // { name: 'Alice', age: 30 }Propagation de tableaux
L’opérateur de propagation de tableaux peut être utilisé pour créer un nouveau tableau en fusionnant des tableaux existants ou en ajoutant des éléments à un tableau.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]Syntaxe de propagation
La syntaxe de propagation (…) décompacte les éléments des tableaux ou les propriétés des objets dans de nouveaux tableaux ou objets. Elle simplifie des tâches telles que le clonage de tableaux, la fusion et les arguments de fonctions.
const nombres = [1, 2, 3];
const clone = [...nombres];
const fusionTableau = [...nombres, 4, 5, 6];Propagation d’objets
Similairement à la propagation de tableaux, vous pouvez, avec la propagation d’objets, fusionner des objets ou d’ajouter des propriétés à un objet facilement.
const user = { nom: 'Eric', age: 45 };
const updatedUser = { ...user, age: 32 };
Les affectations par déstructuration, la syntaxe de propagation et l’abréviation d’objets vous facilitent la manipulation des structures de données complexes et de réduisent le code redondant. En appliquant ces techniques abrégées dans vos projets, vous constaterez une meilleure lisibilité et une productivité accrue dans votre parcours de développement JavaScript.
Vous souhaitez approfondir les techniques pour améliorer votre code JavaScript ? Consultez le dernier article de cette série, sur Async/Await, les fonctions fléchées et les exports/imports.
