I’ve recently begun using GatsbyJS (a static site/progressive web app generator) for a few of my side projects. Prior to this, I hadn’t used JavaScript outside of some basic web functionality and a demo of NodeJS. Even then, I typically stuck with the vanilla syntax. The more I write React code, the more I stumble upon examples and documentation using arrow functions, let and const, and other features available through ES6. Since I’ve had to buckle down and try to learn as much as possible about ES6, I wanted to share it with anyone else who (like me) may not have needed to learn it just yet.
J'ai récemment commencé à utiliser GatsbyJS (un générateur de site statique et d'appli Web évolutive) pour certains de mes projets secondaires. Avant cela, je n'avais pas utilisé JavaScript en dehors de quelques fonctionnalités de base du Web et une démo de NodeJS. Même là, j'avais collé à la syntaxe classique. Plus j'écris de code React, plus je tombe sur des exemples et de la documentation utilisant les fonctions Flèche, let et const et d'autres fonctionnalités qui sont disponibles via ES6. Puisque j'ai dû me mettre au travail pour essayer d'apprendre tout ce que je peux sur ES6, je voulais le partager avec tous ceux qui (comme moi) n'ont pas eu l'obligation de l'apprendre jusqu'à maintenant.
What is ECMAScript? It’s essentially a series of enhancements to traditional (“vanilla”) JavaScript. It’s intended to update faster and offer more quality-of-life features than normal JS.
Qu'est-ce que ECMAScript (ES6) ?
C'est à la base une série d'améliorations du Javascript traditionnel (« classique »). Il est supposé accélérer la mise à jour et offrir plus de fonctionnalités qui facilitent la vie que le JS ordinaire.
New Features ES6 brought with it a large number of changes. Let/Const In normal JS you would typically declare a var and leave it at that. ES6 offers some new options - let and const. ‘let’ defines a locally scoped variable that you can re-assign, but not redeclare. So if you want to make a counter that is run through a loop, ‘let’ would be what you want. ‘const’ defines a locally scoped variable that cannot be changed once declared (it’s a constant variable, in other words). So if you want to scale various values by the same amount without the chance of it changing, use a const for the scaling value.
Nouvelles fonctionnalités
ES6 apporte avec lui un grand nombre de changements.
Let/Const
Dans le JS ordinaire, vous déclarez classiquement une var et vous en restez là. ES6 offre de nouvelles options - let et const.
« let » définit une variable locale que vous pouvez ré-assigner, mais pas re-déclarer. Ainsi, si vous voulez construire un compteur qui tourne dans une boucle, « let » sera ce que vous voulez.
« const » définit une variable locale qui ne peut plus être changée une fois déclarée (c'est, autrement dit, une variable constante). Ainsi, si vous voulez adapter la valeur de plusieurs valeurs de la même quantité sans que celle-ci puisse être modifiée, utilisez une const pour la mise à l'échelle.
Spread Have you ever had an array that you want to dump to the console, or otherwise just turn into separate elements? Spread does exactly that. It even lets you combine two arrays with minimal fuss. The above will output an array with all the elements combined together. If you were to run console.log(…fruits), it would also just spit out the 3 separate string objects without formatting it as an array. Template Literals Previously, if you wanted to join strings together, you had to use a + operator. Now, ES6 will let you call them within a string using backticks and ${} variables. let welcome = `Hello ${username}, last logged in: ${lastLogin}`
Spread
N'avez-vous jamais eu un tableau que vous vouliez déposer sur la console, ou, dans d'autres cas, transformer en éléments séparés ? Spread fait exactement ça. Il vous laisse même combiner deux tableaux avec un minimum d’embêtements.
Les lignes ci-dessus sortiront un tableau avec tous les éléments combinés ensemble. Si vous étiez sur le point de lancer console.log(…fruits), il vous aurait balancé séparément les 3 objets chaînes sans les formater en tableau.
Template Literals (littérales modèles)
Auparavant, si vous vouliez regrouper des chaînes, vous deviez utiliser l'opérateur +. Maintenant, ES6 vous permet de les appeler dans une chaîne en utilisant des accents graves (` - Alt-Gr-7) et des variables ${}.
let welcome = `Hello ${username}, last logged in: ${lastLogin}`
Arrow Functions ES6 also introduced arrow functions - these are essentially the same as regular functions, except the syntax is different. The upside to the syntax changes are that the whole declaration is shorter and easier to read. Vanilla JS: function (num1, num2) { return num1 + num2 } ES6: (num1, num2) ⇒ return num1 + num2 If you have more than one line in the body of the function, you will need to wrap the body in curly braces. See the next section for an example.
Fonctions Flèche
ES6 introduit les fonctions Flèche : elles sont à la base identiques aux fonctions ordinaires, sauf que la syntaxe est différente. L'avantage de cette modification de la syntaxe est que la déclaration complète est plus courte et plus facile à lire.
En JS classique :
function (num1, num2) {
return num1 + num2
}
Avec ES6 :
(num1, num2) ⇒ return num1 + num2
Si vous voulez plus d'une ligne dans le corps de la fonction, vous devrez entourer le corps d'acolades. Voyez l'exemple dans la prochaine section.
Default Function Parameters As surprising as it may seem, vanilla JS doesn’t let you define default values to your function parameters (see above). Extract Data from Arrays and Objects ES6 also simplified pulling data from objects and arrays (shown below).
Paramètres par défaut des fonctions
Aussi surprenant que ça paraisse, le JS standard ne vous laisse pas définir des valeurs par défaut pour les paramètres des fonctions (voir ci-dessus).
Extraire des données des tableaux et objets
ES6 simplifie aussi l'extraction de données des objets et tableaux (présenté ci-dessous).
Conclusion/Homework There are a lot of other things ES6 allows you to do - such as defining objects faster, classes, and many others. So far, the items listed above are the ones I have most commonly used and seen in documentation. As a bit of homework - see if you can figure out the new shortened syntax for object literals in ES6. Do you think I missed an important feature? Then please let me know via email at lswest34+fcm@gmail.com. Similarly, anyone who has requests for articles or corrections to past ones should let me know at the address listed above.
Conclusion / Travail personnel
Il y a une foule d'autres choses que ES6 vous permet de faire, telles que de définir plus vite des objets, des classes et beaucoup d'autres. Jusqu'à présent, les sujets listés ci-dessus sont les seuls que j'ai le plus fréquemment utilisés et vus dans la documentation. Comme petit travail personnel, voyez si vous pouvez définir la nouvelle syntaxe courte pour les déclarations d'objets dans ES6.
Pensez-vous que j'ai oublié une fonctionnalité importante ? Alors, merci de le faire savoir par mail à lswest34+fcm@gmail.com. De même, tous ceux qui ont des demandes d'articles et des corrections pour les précédents devraient me le faire savoir à l'adresse indiquée ci-avant.
Further Reading https://babeljs.io/docs/en/learn/ - Babel documentation on ES6 https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be - Tutorial on some common features of ES6 https://es6console.com - Online console where you can try out ES6 yourself.
Pour aller plus loin
https://babeljs.io/docs/en/learn/ - Documentation Babel sur ES6.
https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be - Tutoriel sur des fonctionnalités classiques de ES6.
https://es6console.com - Console en ligne où vous pouvez tester ES6.