Comment maitriser JavaScript ?

Dans mes vidéos précédentes, j’ai souvent parlé de JavaScript comme étant le langage idéal pour commencer ou pour décrocher un job.
Parce que c’est un langage super populaire et que tu peux l’utiliser dans des tas de domaines : développement web, applis mobile, applications de bureau…

Ce dont j’ai moins parlé, c’est du fossé gigantesque qui existe entre les gens qui connaissent et les gens qui maitrisent JavaScript !

Tout le monde peut commencer à coder en JavaScript parce qu’il est très facile d’accès : on peut commencer à créer des choses dans son navigateur en quelques minutes.

Mais pour devenir un bon développeur web et pour ensuite bien s’attaquer aux frameworks Javascript, il ne s’agit plus du tout ici d’avoir quelques notions de base de JavaScript et de faire quelques copié-collé de bouts de code par-ci par-là. Non.

Ce dont j’aimerais te parler aujourd’hui, c’est comment le comprendre en profondeur ?

Je vais te donner les pistes les plus importantes que tu pourras creuser pour enfin vraiment maitriser JavaScript.

Et puis je vais te parler aussi de ES6 qui a marqué une vraie révolution dans l’histoire de JavaScript. T’es prêt ? Allez, c’est parti !

Ce qu’il faut savoir : principes fondamentaux de JavaScript

La syntaxe, c’est bien : c’est même obligatoire.

Mais très vite, ça ne suffit plus parce bien connaître JavaScript, ce n’est pas qu’une histoire de mots clés pour déclarer une variable ou faire une boucle. Pour bien le maitriser, il faut absolument comprendre comment il fonctionne.

Voyons quelques concepts clés d’un peu plus près…

Hoisting

Pour comprendre ce qu’est le hoisting, c’est le hissage en français, il suffit d’imaginer que JavaScript passe 2 fois sur ton code : un 1er passage pour l’analyser et un 2ème passage pour l’exécuter.

Au premier passage, il va « hisser » 2 choses en haut de ton code :

• Les déclarations de fonctions : c’est ça qui permet d’exécuter une fonction avant même de la déclarer : parce qu’en fait ta fonction est hissée en haut de ton code.
• Et les déclarations de variables avec le mot-clé var. Attention, seulement les déclarations des variables et pas les valeurs que tu vas leur attribuer.

Donc à chaque fois que tu te poses la question Est-ce que JavaScript connait déjà telle variable ou telle fonction ? Eh bien n’oublie pas le Hoisting !

Types primitifs et objets : différence fondamentale

Nombres, strings, booleans : ces types de variables ont en commun d’être de type primitif.
Qu’est-ce que ça veut dire ?
Si je donne une valeur à ces variables, eh bien la variable contient réellement cette valeur.

En revanche, ce n’est pas le cas pour les variables de type objets. Elles vont fonctionner par référence ! Dans la mémoire, ce n’est pas l’objet lui-même qui est stocké mais un pointeur, c’est-à-dire une adresse qui pointe vers un autre endroit dans la mémoire.

Et au final, si on prend le code suivant :

var x = { name: "John" };
var y = x;
y.name =  "Codeur";
console.log(x.name); // Codeur
console.log(y.name); // Codeur

Ça va nous afficher 2 fois  « Codeur »  car si on change une propriété d’un objet, toutes les variables pointant vers cet objet vont être aussi modifiées. C’est relativement simple et c’est la base de JavaScript !

Scopes

Bien comprendre comment fonctionnent les scopes en JavaScript est primordial !
Le scope correspond à la portée de la variable.

Pour faire simple, selon l’endroit où se fait la déclaration de la variable, sa portée pourra se limiter à une zone locale ou au contraire elle pourra être globale.

Si tu comprends bien comment fonctionnent les contextes d’exécution, les objets des variables et les chaine de scopes c’est que t’es en bonne voie pour bien maitriser les scopes.

Closures

Les closures de fonction, c’est une notion délicate qui est très souvent mal comprise.
En quoi ça consiste ?
Quand une fonction est déclarée à l’intérieur d’une autre et qu’elle utilise une variable de la fonction parente, même une fois terminée l’exécution de la fonction parente, elle continuera à avoir accès aux variables de son parent.
Tout se passe comme si la fonction avait capturé les variables de son parent qui du coup, restent accessibles.

La révolution ES6

Mais d’abord, c’est quoi ES6 ?

Les lettres ES signifient ECMAScript. Et ECMAScript, c’est tout simplement un standard de langage de programmation.

Et ce standard évolue, d’où le chiffre 6 pour indiquer de quelle version on parle.

ES6 est sorti en 2015. Il y en a même eu d’autres depuis mais c’est ES6 qui a vraiment révolutionné JavaScript et qui lui a donné un sacré coup de jeune.

Je vais ici te lister très rapidement quelques nouveautés marquantes.

Et si tu veux les découvrir à fond, retrouve-les dans les cours Vraiment bien comprendre JavaScript et Développement Moderne Javascript et ES6,ES7

Les nouvelles Variables LET et CONST

Terminé le VAR !

Désormais, la règle, c’est d’utiliser CONST au maximum. Sauf si on doit réassigner une autre valeur à la variable, parce que c’est interdit avec const. Dans ce cas, on utilise LET.

Ces mots clés ont changé pas mal de choses et c’est obligatoire de bien comprendre ces changements.

Les fonctions fléchées (Arrow functions)

Leur grand intérêt, c’est qu’elles sont bien plus simples à écrire que les fonctions initiales de JavaScript. Le mieux, c’est de te montrer un exemple. On va définir la fonction myFunction qui reçoit un argument et qui le multiplie par 2

const myFunction = arg => arg * 2 ;

Mais où sont les parenthèses et les accolades ? Plus besoin !
Alors je ne vais pas rentrer dans les détails ici parce que c’est trop long et que je l’ai déjà fait dans mes cours sur Javascript mais ces fonctions ont aussi la particularité de fixer la valeur du mot clé this.

Les paramètres par défaut

Voilà quelque chose qu’on ne pouvait pas faire avant mais qui peut se révéler bien pratique. A savoir donner aux arguments une valeur par défaut.

Du coup, si aucun paramètre n’est fourni, ce seront ces valeurs qui seront utilisées.

Paramètres Rest et opérateurs Spread

Les paramètres Rest permettent de réunir des valeurs libres dans un Array.

Et l’opérateur spread fait exactement le contraire : il prend un array et le transforme en paramètres libres !

Template literals

Le nom a l’air compliqué mais en fait, c’est une simplification pour mélanger les strings et les variables.

Exemple :
Avant, il fallait bien écrire le tout avec les guillemets, les espaces bien placés et les signes +.

const fruit = "fraise";
console.log("La " + fruit + " c'est bon !"); // La fraise c'est bon !

Maintenant, les template literals introduisent une nouvelle syntaxe plus simple.

console.log(`La ${fruit} c'est bon !`); // La fraise c'est bon !

Et en passant, ils permettent également de faire des strings multi lignes.

Classes

Avec ES6, JavaScript voit arriver les classes. En vrai, il s’agit plus d’un simple changement de syntaxe plutôt que d’une nouvelle fonctionnalité !

Mais JavaScript évolue et il faut savoir par exemple comment une classe peut hériter d’une autre classe ou comment utiliser les méthodes statiques ou encore comprendre comment contrôler l’accès aux propriétés de nos objets avec get et set.

Modules

Quand on travaille sur de gros projets, écrire tout le code dans un même fichier devient vite illisible et c’est encore pire si une autre personne prend le relais pour travailler sur le projet.

La solution, c’est de couper le tout en plusieurs fichiers.

L’ancienne méthode consistait à appeler chaque fichier avec un tag script dans le HTML.

Mais cette méthode ce n’est pas l’idéal : trop de requêtes au serveur, problème d’ordre dans les tags, sans compter le risque d’accidents de variables. Bref, plus le projet est gros, plus le risque de s’embrouiller augmente.

La solution est arrivée avec ES6 et les modules.

Désormais, en utilisant les mots-clés import et export, il n’y a plus qu’un seul fichier d’entrée à mettre sur son HTML.

Et dans les fichiers JavaScript, export va permettre d’exporter les éléments pour que d’autres modules puissent les importer avec import. Tout simplement.

Comment développer moderne avec JavaScript ?

Toutes ces nouveautés, c’est fantastique. Mais il y a tout de même un petit problème. C’est que JavaScript se développe beaucoup plus vite que les navigateurs.

Aïe ! Est-ce que ça veut dire que tu dois mettre de côté tous ces changements pendant 10 ou 15 ans ? Et bien non, heureusement ! Car il existe des outils modernes qui vont te permettre de rendre ES6 compatible avec tous les navigateurs.

Je vais t’en citer 2 qui sont très importants :

1. Webpack
   
   Webpack va venir à la rescousse pour résoudre le problème de non compatibilité des modules ES6 avec les navigateurs.
   Pour simplifier, on va dire qu’il est principalement utilisé comme module bundler, c’est-à-dire qu’il va empaqueter tous tes fichiers en un seul.
   Bref, il va servir à transformer tous les modules ES6 en un seul fichier que tu mettras sur ton fichier HTML.
2. Babel
   
   C’est un transpiler, c’est-à-dire un traducteur de code.
   Webpack a tout mis dans un seul fichier mais n’a pas touché au code et donc aux nouveautés de ES6.
   C’est donc Babel qui va faire ce travail et tout traduire en ES5 ! Et ES5, tous les navigateurs le connaissent, donc ça marche !

Voilà ! Dans cette vidéo, je t’ai donné quelques clés pour bien maitriser JavaScript.

Evidemment, je n’ai pas pu parler ici de tous les éléments qu’un bon développeur JavaScript doit maitriser car ça aurait fait trop long ! Mais j’espère que je t’ai donné envie d’approfondir tout cela !

Si c’est le cas, c’est la formation complète JavaScript qu’il te faut. Cette formation te donnera tout ce dont tu as besoin pour devenir un monstre en JavaScript.

Et aussi un autre point important ! Si tu souhaites apprendre tous les frameworks qui sont basés sur JavaScript, c’est essentiel de d’abord maitriser JavaScript à son état pur et ensuite de s’attaquer aux frameworks. Tu sais quoi ? Je ferai probablement une autre vidéo sur ce point très prochainement.

En attendant, j’espère que cette vidéo t’a plu. Donne-moi tes impressions dans les commentaires !