2018
08/Août

Workflow : passez à l’ECMAScript 2016 (ES7)

On entend souvent parler d’ES7 ou bien d’ECMAScript 2016. L’ECMAScript est un standard qui permet de définir le mode de fonctionnement de plusieurs langages de programmation tel que le JavaScript, l’ActionScript et quelques autres. Le JavaScript a bénéficié en 2015 d’une mise à jour qui respectait les normes de l’ECMAScript. Aujourd’hui la dernière version est l’ECMAScript 2016, dont je vous présente ici les améliorations et nouveautés. 

Cet article s’adresse aux personnes qui utilisent le JavaScript quotidiennement. Pour vous familiariser avec la nouvelle syntaxe et un nouveau mode opératoire.

Pour de petits projets nous avons souvent tendance à importer des librairies comme jQuery ou autres, qui prennent du temps de chargement et alourdissent le site. L’idéal est de se cantonner au JavaScript natif de votre navigateur, pour s’affranchir des librairies qui importent une tonne de fonctionnalités que vous n’utiliserez pas. C’est aussi le rôle du développeur Front-End de se créer ses propres fonctionnalités sans recourir à des librairies toutes faites.

Les nouveautés

Les variables et les constantes

Depuis la version 2015, le JavaScript permet la définition de variables constantes. On peut donc définir des constantes (comme PI par exemple) pour que le code soit beaucoup plus compréhensible. Si vous essayez de redéfinir une constante vous tomberez sur une erreur.
Voici un exemple d’utilisation des nouveaux mots-clés pour définir une variable.

ecmascript_let_const

Remarquez que j’utilise le mot-clé let au lieu de var. De plus, le code ici retourne une erreur pour la bonne et simple raison que le mot-clé let permet de déclarer une variable dans un scope défini et non plus de manière globale, comme c’était le cas avant avec var.

Les fonctions fléchées

On peut maintenant déclarer une fonction en utilisant une flèche ‘=>’ au lieu du mot function. Le paramètre passé dans une fonction n’a pas à être mis entre parenthèses, s’il est seul.

ecmascript_id_getter

On voit que la fonction fléchée se comporte différemment des appels de fonctions habituels. Elle « hérite » du contexte de this. Dans le cas présent this ne fait pas référence à chaque élément (div) mais à l’élément parent (dans notre cas l’objet Window) .

Le Backtick

On remarque aussi l’apparition d’un nouveau guillemet qui ressemble au simple quote. Il s’agit du backtick qui permet d’utiliser l’interpolation des variables comme dans le visuel ci-dessus. Nous pouvons aussi écrire des chaînes de caractères sur plusieurs lignes, ce qui était assez difficile avant l »ECMAScript 2015.

L’orienté objet

Nous pouvons maintenant créer des classes en JavaScript.

ecmascript_class_personnage

Les possibilités sont multiples. Bien sûr vous pouvez créer des fichiers ne contenant que des classes, puis les importer grâce aux modules.

Les modules

Lorsque l’on travaille sur un code JavaScript on a souvent tendance à séparer les fichiers afin de mieux organiser le code. C’est quelque chose qui est possible avec NodeJS côté serveur et qui peu à peu commence à le devenir côté client. On peut maintenant importer des fichiers, mais attention à la compatibilité avec les navigateurs.

Les paramètres des fonctions

En PHP nous pouvons donner une valeur par défaut à un paramètre dans une fonction. De même, le JavaScript permet de donner une valeur par défaut à un paramètre si elle n’est pas définie.

Aller plus loin avec l’ECMAScript

Il existe d’autres nouveautés dans cette nouvelle norme. La meilleure façon d’en prendre connaissance est de se rendre sur la documentation MDN ou bien ce document officiel Un développeur, qualifié en développement web & mobile, doit savoir lire une documentation, même en anglais.

Le JavaScript ne cesse d’évoluer depuis la version 2015. Il comporte de nouvelles fonctionnalités, comme le querySelector, par exemple, qui évite d’importer toute une librairie pour sélectionner un élément.

Vous pouvez dès à présent adopter ces nouvelles fonctionnalités dans vos projets. Et si vous vous souciez de la compatibilité, vous pouvez utiliser un outil tel que Babel en l’associant à un outil comme Grunt ou Webpack

Si cet article vous a plu, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »

Gabriel Dabi-Schwebel

Posté par

Ingénieur de formation j’ai commencé ma carrière dans le conseil en télécom et en média. J’ai aus

Gabriel Dabi-Schwebel

Contact Développement Web & Mobile :

Gabriel Dabi-Schwebel

gds@1min30.com
06 73 55 17 36





Commenter

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Dépassez les objectifs de votre investissement Hubspot !
Rejoignez notre communauté et donnez-vous les moyens de réussir