Le JavaScript a énormément évolué depuis sa création en 1996 et les heures sombres d’Internet Explorer. Voici une liste non exhaustive des 10 choses que les développeurs JavaScript ont cessé de faire aujourd’hui.
1. Utiliser des boucles for
Quand on apprend un nouveau langage, c’est certainement une des premières structures de contrôles que l’on apprend. Les boucles for permettent de parcourir toute sorte de structure de donnée itérable. Par exemple, pour parcourir un tableau et appliquer un traitement sur chaque élément:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
} Array.foreach()
Aujourd’hui, la boucle for est devenue inutile dans l’immense majorité des cas. Elle a été remplacée par des méthodes comme Array.foreach() et la démocratisation des librairies utilitaires comme lodash. Exemple d’utilisation de la méthode forEach:
const array = ['a', 'b', 'c'];
array.forEach(element => console.log(element));Array.map()
Lorsqu’on doit parcourir un tableau pour créer un nouveau tableau avec des valeurs différentes, on peut utiliser la méthode map(). Par exemple pour formater les valeurs d’un tableau avant de les afficher:
var tableauOrig = [{key:1, valeur:10}, {key:2, valeur:20}, {key:3, valeur: 30}];
var tableauFormaté = tableauOrig.map(obj => {
var rObj = {};
rObj[obj.key] = obj.valeur;
return rObj;
});2. Déclarer ses variables avec var
Le mot clé var a pendant longtemps été le seul moyen de déclarer une variable en JavaScript. Aujourd’hui, c’est devenu un signe qu’un projet est vieux et mal maintenu. Que s’est-il passé ?
L’utilisation de var était souvent à la source de bugs étranges de part la portée globale des variables déclarées ainsi. Prenons le code suivant en exemple:
for (let i = 0; i < 10; i++) {
var test = "Foo bar";
}
console.log(test); // "Foo bar"Dans le code ci-dessus, la variable test déclarée à l’intérieur d’un bloc for sera visible partout ailleurs à l’extérieur de ce bloc. Cette portée globale peut occasionner tout un tas d’effet de bord dans des projets JS d’envergure si les devs ne sont pas prudents avec les noms de variables.
Utilisation de const et let à la place de var
Pour éviter ces soucis, on dispose maintenant de 2 nouveaux mots clés pour déclarer des variables en JS: const et let.
Ces mots clés déclarent une variable avec une portée restreinte au bloc dans laquelle elle est déclarée. cosnt permet de déclarer une variable constante, qui ne pourra donc pas être modifiée par la suite. let permet de déclarer une variable qui peut être modifiée par la suite. Si on reprend l’exemple du dessus en utilisant un de ces deux mots clés, on a donc cela:
for (let i = 0; i < 10; i++) {
const test = "Foo bar";
}
console.log(test); // ReferenceError: test is not defined3. Écrire du JavaScript
Sous ce titre racoleur, se cache une vérité: dans la plupart des projets JS aujourd’hui, les devs n’écrivent plus du JavaScript mais du TypeScript. Typescript est un sur-ensemble de JS qui ajoute des fonctionnalités très puissances comme le typage des variables. Il nécessite une « compilation » pour être ensuite transformé en JS avant l’envoi au navigateur.
Le gros avantage de TypeScript est de permettre de détecter les bugs liés au typage des structures de données en amont, directement pendant le développement.
Tous les éditeurs de code modernes intègrent Typescript nativement ou par le biais de plugins. Cela permet d’avoir une correction syntaxique du typage, directement pendant l’édition du code.
Typescript permet de créer des interfaces pour décrire précisément les types des structures de données complexes, par exemple:
interface Account {
id: number
displayName: string
version: 1
}4. Utiliser le mot clé « function »
La méthode classique pour déclarer des fonctions en javascript, que ce soit dans une classe ou non, c’est avec le mot clé function. Les fonctions sont utilisées au quotidien par tout le monde, mais l’utilisation du mot clé function devient pourtant de plus en plus rare en JS.
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let c = toCelsius(83);Les fonctions fléchées en ES6
En JavaScript, une variable peut contenir un type de base (string, number etc..), un objet, et même une fonction. Avec l’ère des modules JS (découpage du code en modules) les développeurs ont pris l’habitude de manipuler les fonctions sour la forme de variables. Un module peut exporter une fonction, qui une fois récupérée dans une variable sera appelée.
Les fonctions fléchées permettent de déclarer une fonction directement dans une variable, et d’avoir accès au contexte courant. On parle d’auto-binding car on n’a plus besoin d’utiliser .bind(this) pour avoir accès au contexte dans la fonction.
On peut donc transformer le code ci-dessus en celui là:
let toCelsius = fahrenheit => (5/9) * (fahrenheit-32);
let c = toCelsius(83);Si on a besoin d’écrire plus de logique dans la fonction, on peut utiliser les accolades et les parenthèses. Dans l’exemple ci-dessous, on calcule la racine nième d’un nombre x:
let nthroot = (x, n) => {
try {
var negate = n % 2 == 1 && x < 0;
if(negate)
x = -x;
var possible = Math.pow(x, 1 / n);
n = Math.pow(possible, n);
if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
return negate ? - possible : possible;
} catch(e){}
};
let c = nthroot(2850, 13);5. Vérifier manuellement l’existence d’attribut
Prenons l’exemple d’un tableau d’objet contenant des personnes. Si on vent afficher le prénom de la 3ème personne du tableau, on doit d’abord vérifier qu’elle existe:
const persons = [{
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
},
{
firstName: "Jim",
lastName: "Dough",
age: 37,
eyeColor: "brown"
}];
if(!persons[3]){
console.log('La personne n\'existe pas');
} else {
console.log(persons[3].firstName);
}Avec ES6, on a maintenant la possibilité d’utiliser le mécanisme de chaînage optionnel pour remplacer le test ci-dessus:
console.log(persons[3]?.firstName);Cela permet d’éviter la plus célèbre erreur du JavaScript: Uncaught TypeError: Cannot read properties of undefined (reading 'firstName')