JavaScript moderne avec ES6-ES13 (tutorial JS)

Voici ce qui t'attend dans ce cours JavaScript ES6.

Le JavaScript est présent dans les navigateurs depuis de nombreuses années. Pratiquement chaque site Web contient plus ou moins de code JS. Bien que les premières versions étaient encore très rudimentaires, il était possible de travailler assez facilement avec la norme ES5, du moins si l'on pouvait naviguer habilement dans les pièges et les imprévus. Alors pourquoi apprendre quelque chose de nouveau et ne pas rester avec ce qui a fait ses preuves ? Dans cette leçon, je vais expliquer les avantages de la nouvelle norme ES6 et les raisons pour lesquelles on ne peut en fait pas s'en passer.

Cette leçon présente une façon de configurer un environnement de développement. Nous utilisons l'IDE Visual Studio Code de Microsoft et ViteJS comme serveur de développement.

Jusqu'à ES5, le mot-clé var était le seul moyen de déclarer des variables, et grâce à ses particularités, il provoquait souvent des comportements indésirables voire des erreurs. ES6 introduit les deux nouveaux mots-clés let et const, qui corrigent certaines lacunes de var.

Chaque développeur web connaît la boucle For. Elle est également souvent utilisée pour parcourir des tableaux. Avec ES6, il existe une variante de la boucle For qui permet de le faire de manière bien plus concise et compacte.

Les fonctions sont essentielles en JS et étaient jusqu'à présent déclarées et définies uniquement via le mot-clé function. ES6 introduit une syntaxe très élégante et concise qui rend le code non seulement plus lisible, mais également fournit une solution à un problème récurrent avec this.

Les paramètres optionnels peuvent être réalisés de manière un peu compliquée en ES5 et ne sont pas révélés à l'appelant d'une fonction. Avec ES6, les paramètres optionnels avec leurs valeurs par défaut peuvent être écrits directement dans la signature de la fonction.

La déstructuration permet d'extraire de manière ciblée des éléments d'objets et de tableaux. À y regarder de plus près, de nombreuses possibilités d'application se dégagent, ce qui rend le code JS plus élégant et plus compact.

Gérer la variable d'arguments était nécessaire jusqu'à ES6 pour permettre un nombre variable de paramètres dans les fonctions. Cela est beaucoup plus facile avec les Rest Parameters en ES6.

Non seulement dans les définitions de fonction, l'opérateur …- est utilisé pour les paramètres restants, mais aussi dans la déstructuration de tableaux, pour capturer le "reste" des éléments et les fournir sous forme de tableau.

Non seulement les tableaux permettent d'utiliser l'opérateur de reste, mais il peut également récupérer les propriétés restantes des objets et les rendre disponibles en tant qu'objet.

Le contraire de l'opérateur de reste est l'opérateur de propagation. Il a l'air identique (…), mais il est placé de l'autre côté d'une affectation et décompose le tableau en ses éléments individuels.

Le "truc" avec l'opérateur de spread fonctionne également très bien avec les objets. Cela permet d'incorporer des objets dans d'autres objets. Cependant, avec Object.assign(), il existe une très bonne alternative pour cela.

Les fonctions dans les littéraux d'objets sont très verbeux à écrire avec le mot-clé function. Avec ES6, elles peuvent cependant être écrites beaucoup plus court et plus clairement.

Manipuler des chaînes de caractères fait partie de l'arsenal de base de tout programmeur. Heureusement, ES6 propose quelques nouvelles fonctions de chaîne très utiles qui permettent d'économiser beaucoup d'efforts d'écriture.

On ne peut pas le nier: les chaînes de caractères multilignes avec des valeurs de variables intégrées étaient une douleur jusqu'à ES6 et aussi très désagréables à lire. Les nouveaux littéraux de modèle d'ES6, en revanche, sont une bénédiction syntaxique.

Déjà avec ES5, il existe quelques fonctions de tableau très utiles qui suivent une approche plus fonctionnelle. ES6 en a ajouté quelques autres qui rendent la manipulation des tableaux encore plus agréable. Cependant, certaines des fonctions "anciennes" déjà présentes dans ES5 sont également appréciées ici.

Les objets ont toujours pu être utilisés comme un magasin de clés-valeurs ou un dictionnaire, mais avec quelques inconvénients. La nouvelle structure de données Map se débarrasse de ces inconvénients et offre une fonctionnalité de dictionnaire solide, comme on le connaît d'autres langages de programmation.

Les opérations asynchrones peuvent être gérées avec des fonctions de rappel, cependant il y a le risque que la profondeur de l'imbrication devienne trop grande et que le code devienne alors illisible (le soi-disant enfer des rappels). Les promesses résolvent ce problème en évitant les imbrications profondes et en permettant une chaîne d'opérations asynchrones sur un seul niveau.

Après avoir évité l'enfer des rappels avec les promesses, la construction async/await ajoute encore un peu de sucre syntaxique. Elle se base sur les promesses et permet de programmer des opérations asynchrones presque comme des opérations synchrones. Une fois qu'on a programmé avec async/await, on évite désormais d'utiliser directement la méthode then des promesses (et encore moins d'utiliser des rappels).

En Node.js, les modules sont utilisés dès le début, mais au début, il se limitait strictement au format de module CommonJS avec require. Depuis ES6, il existe une définition de module standard et donc les nouveaux mots-clés import/export. À présent, ce format est pris en charge par presque toutes les bibliothèques JS (nouvelles) et Node.js peut également le gérer dans les toutes dernières versions.

En plus de l'importation statique des modules avec le mot-clé import, ES6 prend également en charge l'importation dynamique avec la fonction import. Comme tout cela fonctionne de manière asynchrone, une promesse est renvoyée, sur laquelle on peut attendre principalement avec await. Ainsi, le chargement des modules pendant l'exécution à n'importe quel moment ne pose plus de problème.

La programmation orientée objet classique avec des classes et de l'héritage n'était possible qu'à travers un prototype d'une fonction constructeur jusqu'à ES6. C'était compliqué, semblait peu compact et donc sujet aux erreurs. Le nouveau mot-clé class permet désormais la définition de manière plus compacte avec ES6, comme on le connaît d'autres langages de programmation tels que Java, C# et C++. En interne, il reste cependant un système fondamentalement basé sur des prototypes, mais avec une syntaxe plus agréable.

Aussi l'héritage continue de se baser sur des prototypes, s'écrit en ES6 de manière beaucoup plus simple et plus claire avec le mot-clé extends. Lorsque vous l'utilisez, vous devez appeler le constructeur de la classe de base au bon moment avec super. Comment faire cela sera bien sûr expliqué dans cette leçon.

Aussi la déclaration des membres ou des champs a été rendue possible avec les normes les plus récentes. Cela permet également de déclarer et d'initialiser des champs statiques.

Aussi, des champs privés peuvent maintenant être déclarés, et on ne peut pas y accéder de l'extérieur. La déclaration est un peu inhabituelle, ce qui la distingue clairement des autres langages de programmation.

Avec le nouveau mot-clé class et les fonctionnalités associées telles que l'héritage et l'encapsulation des données (champs privés), tous les programmeurs orientés objet devraient être satisfaits, non? Dans cette leçon, je vais présenter une alternative à la création d'objets qui se passe complètement de classes, de prototypes et de this, mais qui permet une forme plus flexible de "héritage" ou plutôt de "composition".

Les fonctionnalités les plus importantes de la version ES6 et ultérieure devraient maintenant avoir été traitées. Cependant, de nouvelles améliorations sont régulièrement ajoutées. Certaines fonctions moins couramment utilisées n'ont pas encore été mentionnées. Cette leçon expliquera ce qui est attendu à l'avenir et quelles fonctions pourraient encore être intéressantes dans des cas particuliers.