Salut, Pourquoi apprendre ES6 tout de suite quand on débute

Comme promis un nouvel article cette semaine au sujet de Javascript. J’ai terminé la formation Javascript d’Anthony Welc et je vais donc essayer de t’expliquer pourquoi apprendre ES6 tout de suite quand on débute.

J’ai appris pleins de chose super à travers cette formation, que je ne peux que t’encourager à suivre si tu débute! J’ai notamment manipulé les fonctions, les boucles, les conditions, etc. Mais ça tu peux le trouver dans d’autres formations. Ce qui pour moi rends cette formation indispensable pour les débutants qui se lancent en ce moment dans l’apprentissage de ce langage c’est la grande partie sur la dernière grosse mise à jour de Javascript: ES6.

Je vais donc essayer de te convaincre de te mettre directement à la page de ces nouvelles manières d’utiliser Javascript.

 

Généralités

Pour ma part, donc d’un point de vue d’un débutant, je trouve que Javascript est un bon langage pour apprendre à programmer. On peut rapidement en arriver à modifier le DOM et donc de créer de petits programmes permettant de faire des animations, de changer des couleurs, bref de mettre en scène tout un tas de choses ludiques permettant à chaque fois d’aller un peu plus loin et donc de progresser.

Pourquoi apprendre ES6 tout de suite quand on débute - logo ES6

ES6 est la version 2015 de Javascript. La version précédente ES5 datait de 2009 et servait simplement à créer de petits scripts pour faire des animations. Depuis les usages du web et la conception ont beaucoup évolués et il est désormais possible de créer des applications complètes en Javascript. On peut même faire du back-end avec Node.JS.

ES6 permet de rendre ce langage à mon sens plus précis mais aussi plus contraignant. Il offre aussi de nouvelles fonctionnalités très pratiques:

  • nouvelles déclarations de variables avec let et const;
  • les templates strings,
  • les fonctions fléchées.

Il existe d’autres nouveautés bien sur mais je vais parler uniquement dans cet article de celles que j’essaye de mettre en place tout de suite et c’est aussi celles dont j’ai le plus besoin pour le moment. Le reste viendra au fur et à mesure de mes besoins. Je tiens à préciser que la formation que j’ai suivi sur Udemy aborde de nombreux autres ajouts d’ES6 (ES 2015) et même ES7(ES2016). Voici en rapidement ce que propose cette formation:

  • le destructuring d’array et d’objet,
  • les calculs de puissances (ES7),
  • le Spread Operator,
  • attribuer un paramètre par défaut à une fonction.
  • les includes() (ES7).

Il y a aussi de nombreux cas pratique pour illustrer toutes ces nouveautés.

Let et const

Pour ceux qui connaissent déjà très bien Javascript ou pour ceux comme moi qui débutent, on est habitué à utiliser var pour déclarer une variable. On est aussi habitué à ce que cette « var » puisse prendre d’autre valeur à n’importe quel moment pourvu que le programme le demande bien entendu. Mais « var » était aussi un peu trop permissif.

Let

Par exemple, lorsqu’on créé une boucle for, on initialise une variable i à 0, comme ci dessous:

for(var i = 0; i < 10; i++){
    
    console.log(i);
};
console.log(i); // retourne 10
    

Je demande dans cet exemple un décompte de 0 à 9 puisque la condition est strictement inférieure à 10.  J’appelle un console.log(i) pour voir les différentes valeurs de i au cours de la boucle. Ensuite après la boucle j’appelle un console.log(i) après le bloc de la boucle pour voir la valeur de i, et j’obtiens 10. Logique, puisque Javascript incrémente i en fin de boucle grâce à i++. 10 étant égale à 10, et non strictement inférieur, la boucle s’arrête là et le navigateur passe à la suite, console.log(i) en dehors du bloc retourne donc 10, la dernière valeur de i stockée.

Cette façon de faire est celle avec laquelle j’avais « l’habitude de travailler »  au début de mon apprentissage.

Avec ES6, l’écriture de la même fonction en remplaçant var par let change un léger détail:

for(let i = 0; i < 10; i++){
    
    console.log(i);
};
console.log(i); // retourne une erreur en disant que i n'est pas défini
    

Dans ce code, j’ai simplement remplacé var par let. Cela ne change en rien le fonctionnement de la boucle for. En revanche, le console.log(i) en dehors du bloc de la fonction retourne une erreur! i n’est pas définit en dehors du bloc de la boucle. C’est la principale différence et elle est importante! Il faut donc faire très attention au scope avec let et const.

Pour faire simple, une variable créée dans un bloc, comme une boucle for par exemple, n’est pas accessible dans son élément parent, mais uniquement dans des éléments enfants.

On peut faire le même exemple avec const, mais comme nous le verrons ensuite const à une autre fonction qui d’un point de vue strict de sa définition ne s’applique pas dans le cas d’une boucle…

Const

Const est un peu plus restrictif encore puisque comme son nom le sous entend, permet de créer des constantes, autrement dit, des variables qui ont une valeur qui ne change pas au cours du code.

Il y a un bémol à mettre  tout de même puisqu’il est possible de modifier les valeurs d’un objet déclaré en tant que constante.

Depuis que j’ai appris ça , j’essaye d’utiliser systématiquement let et const, et de ne plus me servir de var.  C’est un parti pris, mais je me dis que ça me permettra à produire un code mieux organisé en fonction surtout de ces histoires de scopes.

Les Templates Strings

C’est un super outil que nous offre ES6. Tout le monde a fait ces exercices où on fait des concaténations de chaînes de caractères, ou ceux où il faut ajouter le une variable dans une phrase, etc. Faire ça c’est super mais c’est très long à écrire, il faut mettre pleins de guillemets, et il y a des risques de faire des erreurs.

On a par exemple l’habitude de faire la chose suivante:

const nom = "Guillaume"; 
let age = 32;

let phrase = "Bonjour, je m'appelle " + nom + " et j'ai " + age + " ans.";
console.log(phrase);

Il faut systématiquement veiller à mettre les espaces ou il faut, mettre des backslash (\) pour mettre à la ligne, gérer les guillemets ou les apostrophes. Par exemple \n pour changer de ligne. Avec tous ça, travailler avec des chaînes de caractères peu devenir un peu compliqué.

Les Templates Strings permettent d’écrire plus simplement ces choses là, et la syntaxe pour le faire est à mon avis plus simple.

Première chose, on utilise plus les guillemets «  » mais les backticks « , sorte d’apostrophe à l’envers. Sur mon clavier de MacBook Air, c’est juste au dessus de la touche Shift de droite. Ensuite à l’intérieur de ces backticks, on va écrire normalement, comme si on tapait du texte dans Word par exemple.

Pour finir, pour ajouter des valeurs de variables on utilise la syntaxe suivante: ${valeur}. On peut même réaliser des opérations à l’intérieur de ces crochets, si on veut ajouter 1 à une valeur de variable qui est un nombre (En même ajouter 1 à une chaîne ce caractère…???).  Il faut voir l’ensemble ${_____}, comme un mot à part entière. Il suffit donc de mettre un espace avant et après comme on le fait naturellement pour n’importe quel mot.

Voici le même exemple avec l’utilisation de backticks:

const nom = "Guillaume"; 
let age = 32;

let phrase = `Bonjour, je m'appelle ${nom} et j'ai ${age} ans. L'année prochaine j'aurai donc ${age + 1} ans`;
console.log(phrase);

Si tu n’as jamais utilisé cette façon d’intégrer des variables dans des chaînes de caractères, regarde ce que ça donne dans la console, en copiant le code ce dessus. Tu peux faire des tests en insérant des retours à la lignes, et tu te rendras compte qu’il n’y a plus besoin d’ajouter \n.

Je trouve cette méthode plus simple et plus claire. Je n’utilise plus que ça dans tout ce que j’ai à faire.

Les fonctions fléchées

Très tôt dans l’apprentissage du Javascript, on apprend à écrire des fonctions et parfois celles ci peuvent se révéler longues à écrire. Beaucoup de parenthèses, des crochets, etc. Les fonctions fléchées permettent de raccourcir tout ça. J’ai encore besoin de beaucoup utiliser les fonctions en générale et surtout les fonctions fléchées pour vraiment être à l’aise avec… mais j’ai trouvé ça très pratique dans les tutos de la formation.

Voici donc une petite fonction qui calcule la réduction d’un prix, avec la syntaxe telle qu’on l’apprend dans la majorité des formations :

function reductionPrix(prix) {
    return prix * 0.7;// la fonction appliqiue une réduc de 30%
}
 console.log(reductionPrix(100));

La fonction prends 3 lignes, si on veut que ça soit claire.

Voici maintenant la même chose avec une fonction fléchée:

let reductionPrix = (prix => prix * 0.7); // voilà la fonction!
 console.log(reductionPrix(100));

Le résultat est exactement le même en revanche la syntaxe est beaucoup plus légère: tout tient sur une seule ligne. Je trouve que c’est plus simple à comprendre aussi. Dans la formation,  Anthony fait le détail de ce qui est retiré entre les fonctions version ES5 et comment on en arrive à faire une fonction fléchées. Au fait tu auras sans doute remarqué pourquoi on appelle ça des fonctions fléchées? =>

Ce que je trouve pratique dans ces fonctions fléchées c’est qu’on a supprimé les crochets,. Plus besoin d’appeler l’argument entre parenthèses, et on utilise plus les déclarations function et return. C’est ce que j’appelle un sacré régime!

 

La compatibilité

Les versions ES6 et ES7 ne sont pas implémentées en totalité sur tous les navigateurs, et pas de la même façon. Ce qui peut très vite devenir très vite compliqué… Mais ce n’est pas un problème pour plusieurs raisons:

  • je débute! Donc le temps que tous les navigateurs se mettent à jour, je peux intégrer ces nouvelles notions tout de suite dans mon apprentissage afin d’être opérationnel quand je serais vraiment en phase de production, et de rendre du code à jour le moment voulu!
  • BABEL et BULP:  je vais passer assez vite car il faudrait un article assez long pour expliquer comment tout fonctionne et comment installer tout ça, la vidéo qui parle de ça est d’ailleurs la plus longue dans la formation, 18 minutes si ma mémoire est bonne. En gros ces outils permettent de convertir du code ES6 et ES7 en code ES5, donc lisible par la majorité des navigateurs. Cela me permet de me former correctement sur ces dernières mises à jours et de pouvoir tout de même envoyer mon code sans problème sur n’importe quel navigateur. Par exemple, je n’utilise plus var, mais let et const. Et bien Babel se charge automatiquement de transformer un let en var.

Quelques informations complémentaires au sujet de BABEL ET BULP:

Si tu veux aller plus loin, le chapitre de la formation est vraiment très complet à ce sujet, et c’est un outil vraiment très pratique. Il y a une fonction qui permet une synchronisation directe avec le navigateur, donc dès que tu sauvegardes, la mise à jour se fait instantanément.

 

Un petit tour des formations Javascript

Je me suis lancé dans une formation Javascript sur Openclassrooms, pour avoir la certification et parce qu’elle est recommandée dans la liste des pré-requis de la 3WA.  Je ne regarde pas trop les cours du début parce que la formation d’Antho me suffit et c’est la même chose. Pas besoin de réapprendre 15 fois à déclarer des variables, et manipuler les opérateurs, etc, je ne fais que les exercices, qui sont pas mal d’ailleurs,  en utilisant let et const tout le temps. Les cours d’Openclassrooms ne sont pas à jour par rapport à ES6 et ES7. C’est pour cette raison que je trouve intéressant de commencer par une formation qui intègre les dernières mises à jour et ensuite de faire quelques choses en complément pour acquérir des réflexes et continuer de coder.

Comme je le disais dans mon dernier article (Mes premières difficultés en Javascript), il ne sert à rien de faire 3000 formations. Elles parlent toutes de la même choses de toute façons. Celle que j’ai faite sur UDEMY est très bien et me permet de passer le cours à proprement parlé d’Openclassrooms et de me consacrer à coder sur les projets et les exercices. Je les fait assez rapidement d’ailleurs maintenant. J’ai du faire presque 50% de la formation hier après midi, ce qui me prouve 3 choses:

  • j’ai des bases qui commencent à se mettre en place et à se structurer à force de coder, de réfléchir,
  • j’ai progressé en une semaine. La partie sur le DOM de la formation UDEMY m’a permis de voir concrètement à quoi servait certaines choses et de les aborder un peu d’un autre oeil désormais.
  • je code plus vite à force, la syntaxe est de moins en moins un problème et ça évite de passez 2 minutes à chercher où j’ai oublié cette p#$!in de parenthèses…  bon ça m’arrive encore pas d’inquiétude!

Si comme moi tu fais la formation JS d’Anthony Welc et qu’après tu envisages Openclassrooms, jettes un oeil sur la partie débogage du cours c’est intéressant et Antho n’aborde pas ce point la dans sa formation. J’espère que ça te permettra de gagner du temps, ou au moins de ne pas en perdre et te permettre de coder plus!

La suite

Maintenant que j’ai acquis des bases, il va falloir que j’ailles plus loin, donc me faire des projets perso pour vraiment mélanger HTML, CSS et JS. Mais il va falloir que j’aille vite car ensuite je veux mettre le nez dans PHP avant d’arriver à la 3WAcademy, début Octobre…

D’ici là, j’ai quelques livres à lire sur Javascript notamment avec des exercices à faire, et je vais continuer sur le freecodecamp, histoire de me remettre à l’anglais!

C’est tout pour aujourd’hui, à la semaine prochaine

Guillaume