Fonctionnalités ES6 de JavaScript

ECMAScript 6 (ES6) est une mise à jour majeure du langage JavaScript qui a introduit de nombreuses nouvelles fonctionnalités, rendant JavaScript plus puissant et plus efficace. Ce guide propose une exploration détaillée d'ES6, avec des explications complètes et de nombreux exemples de code pour vous aider à maîtriser ces nouvelles capacités.

Introduction à ES6

ES6, également connu sous le nom d'ECMAScript 2015, a apporté de nombreuses améliorations et de nouvelles fonctionnalités à JavaScript. ECMAScript est la spécification officielle que JavaScript implémente, et ES6 en a été la révision la plus importante depuis 1999. Ces changements ont rendu le langage plus moderne et plus facile à utiliser, en améliorant à la fois la lisibilité et la maintenabilité.

Ce guide présente les fonctionnalités que vous utiliserez le plus souvent :

• Déclarations de variables — let et const
• Fonctions — fonctions fléchées et paramètres par défaut
• Chaînes de caractères — littéraux de gabarit
• Travail sur les données — déstructuration, littéraux d'objet améliorés, rest/spread
• Code asynchrone — promesses
• Code orienté objet — classes et modules
• Nouvelles collections et primitives — Map, Set, WeakMap, WeakSet, Symbol, itérateurs, générateurs et proxys

Aujourd'hui, tous les navigateurs modernes ainsi que Node.js prennent en charge ES6 nativement, vous pouvez donc utiliser ces fonctionnalités sans étape de build. Chaque exemple ci-dessous est exécutable—modifiez-le et appuyez sur exécuter pour expérimenter.

Let et Const

L'une des évolutions les plus notables d'ES6 est l'introduction de let et const pour la déclaration de variables. Avant ES6, la seule option était var, qui est à portée de fonction et fait l'objet d'un hoisting qui produit souvent des bugs surprenants. let et const sont à portée de bloc et se comportent de manière plus prévisible, ce qui explique pourquoi le code moderne n'utilise pratiquement plus jamais var.

Let

Le mot-clé let permet de déclarer des variables dont la portée est limitée au bloc, à l'instruction ou à l'expression dans lesquels elles sont utilisées.

Dans l'exemple ci-dessus, x déclaré à l'intérieur du bloc if est une variable distincte du x déclaré à l'extérieur. Cela illustre la portée de bloc offerte par let. Avec var, les deux affectations auraient fait référence à la même variable, et le console.log extérieur aurait affiché 20.

let et const sont également soumis à la zone morte temporelle (TDZ) : la variable existe dès le début du bloc, mais ne peut pas être lue ni assignée avant l'exécution de sa déclaration. La référencer plus tôt lève une ReferenceError, ce qui permet de détecter des fautes de frappe que var aurait silencieusement transformées en undefined.

Const

Le mot-clé const est utilisé pour déclarer des variables dont la valeur n'est jamais censée changer. Il a une portée de bloc, tout comme let.

Dans cet exemple, la tentative de réaffecter une valeur à y provoque une erreur, car const déclare une constante dont la valeur ne peut pas être modifiée.

Une source fréquente de confusion : const empêche la réaffectation de la liaison, mais pas la mutation de la valeur. Un objet ou un tableau déclaré avec const peut toujours voir son contenu modifié—vous ne pouvez simplement pas faire pointer la variable vers un objet différent.

Fonctions fléchées

Les fonctions fléchées offrent une syntaxe concise pour écrire des expressions de fonction. Elles lient également this de manière lexicale, ce qui les rend particulièrement utiles pour écrire des fonctions courtes.

Ici, la fonction fléchée add prend deux paramètres et retourne leur somme. Lorsque le corps de la fonction est une expression unique, vous pouvez omettre les accolades et le mot-clé return—la valeur de l'expression est retournée automatiquement.

Le principal avantage est que les fonctions fléchées n'ont pas leur propre this ; elles héritent de celui de la portée englobante. Avant les fonctions fléchées, les callbacks perdaient fréquemment la valeur de this attendue, et les développeurs contournaient le problème avec const self = this ou .bind(this). Les fonctions fléchées rendent ce code répétitif inutile :

Littéraux de gabarit

Les littéraux de gabarit facilitent la création de chaînes de caractères, en particulier lorsqu'il s'agit d'intégrer des variables ou des expressions. Ils utilisent des accents graves (```) au lieu de guillemets.

Cet exemple montre comment les littéraux de gabarit permettent d'intégrer directement la variable name dans la chaîne, améliorant ainsi la lisibilité et la commodité. L'espace réservé ${ ... } peut contenir n'importe quelle expression, pas seulement une variable—par exemple `Total: ${price * qty}`. Les littéraux de gabarit peuvent également s'étendre sur plusieurs lignes sans \n, ce qui permet d'écrire une sortie formatée ou de petits extraits HTML directement en ligne.

Paramètres par défaut

Les paramètres par défaut permettent d'initialiser les paramètres d'une fonction avec des valeurs par défaut si aucune valeur n'est fournie.

Dans cet exemple, la fonction multiply attribue une valeur par défaut de 1 à b si aucun second argument n'est fourni, garantissant que la fonction renvoie toujours un résultat valide.

Affectation par déstructuration

La déstructuration est un moyen pratique d'extraire des valeurs de tableaux ou d'objets dans des variables distinctes.

Déstructuration de tableau

Cet exemple montre comment la déstructuration de tableau permet d'affecter les valeurs du tableau numbers à des variables individuelles a, b et c.

Déstructuration d'objet

Dans cet exemple, la déstructuration d'objet extrait les propriétés name et age de l'objet person dans des variables distinctes.

Littéraux d'objet améliorés

ES6 améliore les littéraux d'objet, en permettant une syntaxe plus concise et plus lisible.

Ici, l'objet obj utilise des noms de propriété abrégés et des définitions de méthode raccourcies, ce qui rend le littéral d'objet plus concis.

Promesses

Les promesses offrent un moyen de gérer les opérations asynchrones plus efficacement, en évitant l'enfer des callbacks et en rendant le code plus lisible.

Dans cet exemple, une promesse est créée et se résout après 1 seconde avec le message « Success! ». La méthode then est utilisée pour traiter la valeur résolue.

Classes

ES6 a introduit les classes, offrant une syntaxe plus claire et plus concise pour créer des objets et gérer l'héritage.

Cet exemple montre comment les classes en ES6 offrent une syntaxe claire et intuitive pour définir des objets et leur comportement.

Modules

Les modules permettent de découper votre code en fichiers séparés et d'importer/exporter des fonctions, des objets ou des primitives entre ces fichiers.

Exporter

// math.js
export const add = (a, b) => a + b;

Importer

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Dans ces exemples, la fonction add est exportée depuis math.js puis importée dans main.js, ce qui illustre comment les modules facilitent l'organisation et la réutilisation du code.

Opérateurs rest et spread

Opérateur rest

L'opérateur rest (...) permet de représenter un nombre indéfini d'arguments sous forme de tableau.

Dans cet exemple, la fonction sum utilise l'opérateur rest pour regrouper tous les arguments dans un tableau, facilitant ainsi les opérations sur ceux-ci.

Opérateur spread

L'opérateur spread (...) permet de développer un itérable (comme un tableau) aux endroits où zéro ou plusieurs arguments ou éléments sont attendus.

Cet exemple montre comment l'opérateur spread peut être utilisé pour combiner des tableaux en un seul tableau, simplifiant ainsi le code.

Itérateurs et générateurs

Itérateurs

Les itérateurs sont des objets qui permettent de parcourir une collection, comme un tableau ou une chaîne de caractères.

Dans cet exemple, l'itérateur fournit un moyen d'accéder à chaque élément du tableau de façon séquentielle.

Générateurs

Les générateurs sont des fonctions qui peuvent être mises en pause et reprises, offrant un moyen puissant de gérer les itérables.

Cet exemple montre comment une fonction génératrice peut produire des valeurs une à une, en mettant l'exécution en pause entre chaque yield.

Symbols

Les symbols sont un nouveau type de donnée primitif introduit dans ES6. Ils sont uniques et immuables, et sont souvent utilisés pour créer des clés d'objet uniques.

Dans cet exemple, symbol1 et symbol2 sont uniques, même s'ils ont la même description.

Maps et Sets

Maps

Les Maps sont des collections de paires clé-valeur dans lesquelles les clés peuvent être de n'importe quel type.

Cet exemple montre comment créer une map, définir des paires clé-valeur et récupérer des valeurs.

Sets

Les Sets sont des collections de valeurs uniques.

Dans cet exemple, le set ne contient que des valeurs uniques, même si 3 a été ajouté deux fois.

Proxys

Les proxys permettent de créer un proxy pour un autre objet, ce qui vous permet d'intercepter et de redéfinir des opérations fondamentales.

Cet exemple montre comment un proxy peut intercepter l'accès à une propriété, en fournissant une réponse personnalisée lorsque la propriété n'est pas trouvée.

WeakMap et WeakSet

WeakMap

WeakMap ressemble à Map, mais n'autorise que des objets comme clés et n'empêche pas le ramasse-miettes (garbage collection) si aucune autre référence ne pointe vers l'objet clé.

WeakSet

WeakSet ressemble à Set, mais n'autorise que des objets comme valeurs et n'empêche pas le ramasse-miettes (garbage collection) si aucune autre référence ne pointe vers l'objet.

Conclusion

ES6 apporte une multitude de fonctionnalités qui font de JavaScript un langage plus robuste et plus efficace. En comprenant et en exploitant ces fonctionnalités, les développeurs peuvent écrire un code plus propre et plus facile à maintenir. Ce guide a proposé un examen approfondi des aspects les plus importants d'ES6, accompagné d'exemples pour vous aider à démarrer.

Pour approfondir chaque sujet, poursuivez avec les fonctions fléchées, l'affectation par déstructuration, les paramètres rest et la syntaxe spread, les classes, les modules et les promesses.

Pratique