10 bonnes pratiques en JavaScript

Écrit par Djilan Mouhous

Voici quelques astuces pour gagner un peu de temps dans vos projets :

Il existe mille et une façons fonctionnelles d’écrire son code en JavaScript. Elles ont toutes le mérite d’être valides mais certaines soulèvent de véritables problèmes de lisibilité et de maintenabilité. C’est souvent grâce à l’expérience que l’on apprend les bonnes pratiques mais chaque développeur, peu importe son niveau, devrait pouvoir connaitre ces astuces. J’espère que cet article vous plaira.

1) Éviter d’enfermer son code dans une condition

Lorsque l’on écrit une fonction, il est souvent nécessaire de mettre en place une condition afin de continuer son script. Cependant, bien qu’il soit tentant d’enfermer son code dans une condition, cela soulève un problème de lisibilité dès que le code devient un peu long.

2) Utiliser “let” ou “const”

Pour déclarer une variable, un développeur JavaScript dispose de 3 options.

Le mot clé “let” permet de déclarer une variable qu’on peut modifier à travers le code.

Le mot clé “const” permet de déclarer une variable qu’on ne peut pas modifier.

Le mot clé “var” quant à lui peut faire penser à “let” de prime abord. Cela permet de déclarer une variable modifiable également. La différence entre ces deux identifiants réside dans le fait que “let” crée une variable uniquement dans le scope dans lequel on est.

Lorsqu’on déclare une variable avec le mot clé “var”, cette variable sera utilisable partout dans le script contrairement à “let” qui s’arrête au scope qui lui correspond.

3) Rassembler les paramètres d’une fonction dans un objet

Il arrive que certaines fonctions aient besoin de plusieurs paramètres pour fonctionner. Il est alors déconseillé d’envoyer directement les paramètres un à un. En effet, cela nuit à la lisibilité en rendant l’appel de la fonction long et incompréhensible.

Une solution pour parer à ce projet est alors de créer un objet rassemblant tous ces paramètres.

4) Utiliser les méthodes d’instance adaptées

Très souvent en JavaScript comme dans beaucoup de langages, il faut traiter des tableaux. Les itérer, les réduire, les changer ou encore les trier. Pour tous ces besoins, il existe heureusement des méthodes natives et optimisées.

Ainsi, il est fortement déconseillé d’utiliser des boucles à tout bout de champ. Il faut utiliser les méthodes adaptées à chaque problématique rencontrée.

5) Faire attention aux callbacks

Actuellement, nous sommes dans l’âge d’or des Webservices. Cela consiste à créer un back et un front séparés et de communiquer via des appels API. Par conséquent, il faut bien souvent développer de manière asynchrone.

Avant, il était nécessaire de passer par des callbacks. Les callbacks sont des fonctions qui sont passées en paramètres d’autres fonctions et qui sont appelées dans l’exécution de ces dernières. On peut alors créer des fonctions qui s’exécutent après une autre fonction dite asynchrone.

L’inconvénient de cette méthode de développement est qu’elle est lourde syntaxiquement et peu compréhensible. Heureusement, une nouvelle méthodologie est disponible depuis 2017. C’est l’utilisation des identifiants async et await.

async permet de déclarer une fonction comme asynchrone et retourne une promesse qui contiendra le résultat de la fonction.

await permet d’attendre le résultat d’une fonction asynchrone. Cet identifiant est utilisable uniquement dans le cadre d’une fonction asynchrone.

6) L’opérateur ternaire

Tout le monde connaît et utilise les conditions avec le fameux identifiant “if”. Mais connaissez-vous son raccourci appelé ternaire ?

Ce raccourci utilisable sur une ligne permet d’écrire un if et son else de manière succincte. Cependant, faites attention, écrire un code compact est préférable en cas de condition très simple, mais en cas de condition multiple et/ou complexe, il vaut mieux utiliser un if classique.

7) L’opérateur &&

Très souvent utilisé dans les conditions, l’opérateur && permet simplement de tester une condition et de passer à la suite du code seulement si la condition testée est vérifiée.

Seulement, cet opérateur peut avoir d’autres utilités même hors d’une condition. En effet, il permet d’écrire l’équivalent d’une condition if de manière raccourcie.

L’avantage du && par rapport à l’opérateur ternaire ? Ne pas avoir à gérer le cas ou la condition est fausse.

8) Afficher dans la console

La console est un outil vital à tout développeur JavaScript. C’est un outil puissant qui permet de débugger son code de manière efficace. Mais peu de développeurs utilisent pleinement la puissance de cet outil.

Cet outil possède plusieurs méthodes qui lui sont propres et qui sont chacune adaptées à des problématiques différentes.

La méthode la plus connue est le console.log(). Cette méthode permet d’afficher un message ou des variables de manière non formatées dans la console.

Pour afficher des tableaux, on utilise la méthode console.table(). Cette méthode permet de formater des tableaux afin de pouvoir les lire simplement.

Pour afficher des erreurs, on utilise la méthode console.error(). Cette méthode affiche un message formaté comme une erreur. On peut l’utiliser dans le cadre de try catch notamment.

Pour nettoyer la console, on utilise la méthode console.clear(). Cela supprime tous les messages précédents de la console.

9) Dupliquer un tableau sans référence

Pour dupliquer un tableau, la façon la plus évidente est de juste créer un tableau qui est égal à l’ancien tableau.

Cependant, cette méthode garde la référence de l’ancien tableau dans le nouveau. C’est à dire que modifier le nouveau tableau c’est aussi modifier l’ancien.

Il existe plusieurs méthodes pour dupliquer un tableau sans garder la référence, mais une des plus simples consiste à utiliser la méthode slice.

10) Suivre les nouveautés ECMAScript

Pour maintenir un bon niveau de compétences en JavaScript et s’assurer d’être à jour des dernières nouveautés, le mieux à faire reste encore de suivre les actualités de ECMAScript. ECMAScript est un ensemble de normes lié aux langages de scripts. De manière régulière, il y a des nouvelles normes et des nouvelles façons de coder qui résolvent des problèmes. La prochaine version de ECMAScript sera ECMAScript 2022.

Bonus : Utiliser Typescript

Et oui ! Comment évoquer JavaScript sans parler de TypeScript ? Ce langage est extrêmement similaire au JavaScript tout en améliorant certains de ses points négatifs. TypeScript est un langage plus exigeant mais permet de fiabiliser son code notamment grâce au typage des variables.

Grâce au typage et un bon IDE, on n’oublie plus de paramètres lors d’un appel de fonction sous une déclaration d’objet par exemple

Conclusion

Le JavaScript est un langage puissant aux possibilités variées. Que ce soit pour faire un back-end en Node.js ou pour réaliser un front-end en Vue.js voir même pour créer une application mobile en React Native, ce langage est absolument immanquable aujourd’hui !

Avec ces bonnes pratiques, vous saurez prendre tous les avantages de ce langage tout en évitant les pièges.