J’adore travailler avec JavaScript. Qu’est-ce que je veux dire par JavaScript ? React ? TypeScript ? Non. J’aime principalement travailler avec JavaScript pur (vanille). Aucun framework, aucune bibliothèque, etc. (du moins, un minimum d’entre eux) ne sont nécessaires ici – bien qu’ils soient appréciés !
Mais pourquoi est-ce que j’aime tant le JS ordinaire, le vanille ? Tout simplement parce qu’il est dynamique et interprété, parce que je dois le comprendre avant de pouvoir apprendre tout ce qui l’utilise, parce que c’est le langage du web et parce que les fonctions fléchées sont tout simplement géniales (et d’autres raisons dont nous parlerons plus tard) !
Entrons dans le vif du sujet.
1. JavaScript est dynamique et interprété
À première vue, JavaScript semble être un simple langage de script utilisé pour rendre les sites Web plus interactifs. C’est le cas, mais c’est bien plus que cela. JavaScript a évolué au fil des ans pour devenir un langage complet, surtout si vous utilisez Node.js !
Quelle est la différence entre JavaScript et un langage tel que C++ ou Java (ne confondez pas Java et JavaScript ! Ils ne sont pas identiques) ? C++ et Java sont des langages compilés et fortement typés alors que JavaScript est dynamique et interprété.
Un langage fortement typé signifie que, alors qu’un langage comme le C++ exige que vous indiquiez explicitement le type d’une variable, par exemple int x = 10, JavaScript n’a pas cette restriction – bien que vous puissiez utiliser TypeScript pour ajouter la vérification du type à votre code. En JavaScript, le type de la variable sera déduit par le navigateur/moteur. Si vous tapez let x = 10 ;, le moteur JavaScript que vous utilisez, qu’il s’agisse du navigateur, de Node ou d’un autre, interprétera cette variable comme un nombre sans que le développeur ait à indiquer explicitement qu’il s’agit d’un type de nombre.
Sur le deuxième point, alors que vous exécutez un programme distinct appelé compilateur pour pouvoir exécuter du code écrit en C++ ou en Java, JavaScript est interprété par le moteur particulier qui l’exécute (comme V8 de Google Chrome ou Node.js). Cela signifie que le code est exécuté ligne par ligne en temps réel.
Cela facilite la tâche des débutants, mais peut également entraîner de graves problèmes. J’avoue que, venant du C++ et de Java, l’idée de ne pas avoir de type entier propre m’a d’abord dérouté ! Pour rendre les choses encore plus difficiles, j’étais habitué à déclarer explicitement les types et c’était donc un peu ennuyeux au début de devoir me rappeler de ne pas taper int ou string, etc. avant chaque déclaration.
2. Vous devez comprendre JS avant d’apprendre X.js
X étant, par exemple, Node, React, Vue, etc.
Je tiens à préciser une chose : vous devez avoir des bases solides en JavaScript pur (vanilla) avant de vous lancer dans quelque chose comme React.js !
C’est la raison pour laquelle j’ai appris à aimer le JavaScript pur : il me servira à comprendre les frameworks, les API et les bibliothèques. Pensez-y. Sans une solide compréhension de JavaScript (en plus de HTML/CSS), comment pouvez-vous espérer apprendre quelque chose qui en dépend pour sa fonctionnalité ?
Heureusement, le JavaScript élémentaire, étant facile à apprendre (pour la plupart), peut être appris à un rythme accéléré, surtout si vous connaissez déjà d’autres langages de script ou de programmation comme C++, Java, Python, Ruby, etc. Gardez cependant à l’esprit que vous devez accorder une attention particulière à ces sujets après avoir acquis une bonne compréhension de la syntaxe et des structures de contrôle de base :
- Demandes/réponses et codes d’état HTTP (HTTP requests/responses and status codes)
- Async/Await
- Promesses (Promises)
- Callbacks
- Closures
- L’API Fetch (Fetch API)
- Syntaxe ES6 (ES6 Syntax) – fonctions flèches, opérateurs spread/rest, destructuration
constetlet,modules - Les bases de Node.js
Après avoir compris ces sujets, vous pouvez passer à un framework frontend comme React.js ! Ne faites pas l’impasse sur les principes de base. Apprenez tout ce que vous pouvez sur le JavaScript de base avant de commencer à apprendre React, Vue, Angular ou toute autre bibliothèque ou framework JavaScript. Il existe un grand nombre de frameworks et de bibliothèques, mais le mieux est de commencer par maîtriser les bases !
3. JavaScript est le langage du Web
Je ne sais pas pour vous, mais je suis fasciné par le Web et l’Internet. JavaScript est très important pour moi, car c’est grâce à lui que la grande majorité du Web fonctionne comme il le fait. Sans JavaScript, il n’y aurait pas de pages Web interactives !
JavaScript est au cœur de la façon dont le Web continue de fonctionner aussi bien et d’évoluer. Cela pourrait changer quelque peu un jour. Pour l’instant, cependant, JavaScript (avec HTML/CSS) est un sujet fondamental pour le développement Web.
4. La beauté des fonctions fléchées
Les fonctions fléchées sont agréables à regarder et plus faciles à lire que la vieille syntaxe de la fonction myFunc() { // faire des choses }. Par exemple, considérons une fonction simple qui renvoie la somme de deux nombres :
function add(number1, number2) {
return number1 + number2;
}
Avec les fonctions de flèches (arrow functions), vous pouvez écrire ceci de manière plus concise :
const add = (number1, number2) => number1 + number2;
C’est encore mieux avec les écouteurs d’événements (event listeners), par exemple
const navLink = document.querySelector('.nav-link');
navLink.addEventListener('click', e => {
e.preventDefault();
// do some cool stuff?
});
ou avec les méthodes de tableau (array methods)
const arr = [1, 2, 3, 4]; const arrSquared = arr.map(n => n * n); arrSquared.forEach(item => console.log(item)); // Output: // 1 // 4 // 9 // 16
En effet, les fonctions flèches sont la solution pour tout ce qui nécessite une fonction de rappel. Comme vous pouvez le constater, elles simplifient considérablement votre code et en améliorent la lisibilité. Imaginez que j’écrive.
const arr = [1, 2, 3, 4];
const arrSquared = arr.map(function(n){
return n * n;
});
arrSquared.forEach(function(item){
console.log(item);
});
C’est plus de saisies que nécessaire et encore plus moche sur une ligne au lieu de la simplicité de la syntaxe de la flèche !
Tous les principaux navigateurs Web à jour et Node.js devraient prendre en charge cette fonctionnalité ES6 à l’heure actuelle. Je vous suggère de l’utiliser lorsque c’est approprié – généralement dans les cas où elle améliore la clarté du code, réduit le désordre dans votre base de données ou permet de faire de belles phrases en une ligne.
Et voilà, vous l’avez ! 4 raisons pour lesquelles j’aime le JavaScript pur ! Cela ne commence même pas à gratter la surface des raisons pour lesquelles j’aime JavaScript, mais j’espère que cela vous donne quelque chose à penser ou au moins suscite votre intérêt pour en apprendre davantage.
Il y a beaucoup plus à venir sur JavaScript à l’avenir, alors restez à l’écoute les amis !
