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.

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.

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.

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.

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 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.

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, 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.