Les 5 règles d’or pour un code JavaScript / Front-end (vraiment) facile à relire
anthowd
Le code, c’est comme une conversation
Salut à tous ! Si vous débutez dans le développement, vous avez déjà ressenti cette petite fierté quand votre code… fonctionne. C’est déjà une victoire !
Mais on ne vous dit pas tout : la vraie compétence, c’est d’écrire du code qui parle.
Pensez-y : vous allez passer beaucoup plus de temps à lire le code qu’à en écrire. Et la personne qui va lire ce code, c’est souvent vous-même dans six mois, après avoir tout oublié !
Adopter le « Clean Code » n’est pas une fantaisie de puriste. C’est de l’empathie professionnelle. C’est garantir que votre projet reste un plaisir à travailler.
Voici cinq piliers pour vous transformer en développeur qui écrit proprement, dès le premier jour.
Règle n°1 : La fonction, c’est une micro-usine. Une seule tâche, bien faite
Imaginez une fonction comme une machine à la chaîne. Si elle doit faire la soudure, le polissage et l’emballage, elle sera inefficace et difficile à réparer. En code, c’est le principe de la responsabilité unique.
La règle : Si vous devez utiliser le mot « et » pour décrire ce que fait votre fonction, vous devez la découper.
❌ L’usine à gaz (Confus et dangereux)
// Oups, elle fait trop de choses !
function getUserDataAndShowAlert(userId) {
// 1. Récupération
const user = fetch(`/api/users/${userId}`);
// 2. Traitement des données
const formattedName = user.firstName.toUpperCase();
// 3. Affichage
alert(`Bienvenue, ${formattedName} !`);
}Langage du code : JavaScript (javascript)✅ La chaîne de production claire
// 1. Récupération (Mission : récupérer)
async function fetchUser(userId) {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
// 2. Traitement (Mission : transformer)
function formatNameForDisplay(firstName) {
return firstName.toUpperCase();
}
// 3. Lancement (Mission : orchestrer)
async function loadAndGreetUser(id) {
const user = await fetchUser(id);
const greeting = formatNameForDisplay(user.firstName);
alert(`Bienvenue, ${greeting} !`);
}Langage du code : JavaScript (javascript)Votre bénéfice : Si un jour vous voulez utiliser le
formatNameForDisplaysans l’alerte, c’est possible ! Le code devient réutilisable et testable plus facilement.
Règle n°2 : Nommer, c’est expliquer. Soyez des conteurs.
Votre code doit être une histoire. Le lecteur ne devrait pas avoir à deviner ce que signifie obj ou i. Les noms doivent être des mini-descriptions.
| Contexte | ❌ Nom qui fait deviner | ✅ Nom qui raconte |
|---|---|---|
| Variable | const p = 3.14159 | const PI_VALUE = 3.14159 |
| Boucle | for (let i = 0; i < users.length; i++) | for (const user of userList) |
| Fonction | function test(item) | function validateEmailFormat(input) |
💡 L’Indice Booléen :
Les noms de variables qui renvoient vrai ou faux (les booléens) doivent toujours commencer par un verbe qui implique une question, comme is, has, ou can.
isLoggedIn(Est-ce que l’utilisateur est connecté ?)hasPermissions(Est-ce qu’il a les permissions ?)
Règle n°3 : Adieu les magiciens : Bannissez les « nombres magiques ».
Un « nombre magique » est une valeur brute (chiffre, texte) qui apparaît sans explication au milieu du code. C’est l’équivalent de faire apparaître un lapin dans un chapeau : impressionnant, mais incompréhensible.
❌ Le Mystère du Nombre
// Que signifie le '3'? Est-ce le nombre de jours? Le rôle? La taille max?
if (input.length > 3) {
alert("Trop long!");
}Langage du code : JavaScript (javascript)✅ La Constante Explicative
// On déclare la règle une seule fois, clairement nommée
const MAX_USERNAME_LENGTH = 3;
if (input.length > MAX_USERNAME_LENGTH) {
alert("Nom d'utilisateur trop long!");
}Langage du code : JavaScript (javascript)Votre bénéfice : Si la règle de la longueur change (passant de 3 à 5), vous n’avez qu’un seul endroit à modifier. Vous évitez les erreurs par oubli.
Règle n°4 : Moins d’imbrications, le code aère l’esprit.
Quand on empile les if dans les if dans les for, on crée un escalier qui vous fatigue rien qu’à le regarder. Le code devient difficile à suivre, c’est la « pyramide du mal ».
❌ L’escalier fatigant
if (userIsActive) {
if (userHasPermission) {
if (data.length > 0) {
data.forEach(item => {
// ... votre logique est enterrée ici
});
}
}
}Langage du code : JavaScript (javascript)✅ Le raccourci (Technique de la « Garde Clause »)
Utilisez les return au début de votre fonction pour éliminer rapidement les cas non valides. Cela s’appelle une garde clause.
function processUserData(user, data) {
// 1. Les Gardes : si les conditions ne sont pas remplies, on sort tout de suite.
if (!userIsActive) return;
if (!userHasPermission) return;
if (data.length === 0) return;
// 2. Le code utile est maintenant "plat" et facile à suivre
data.forEach(item => {
// ... Traitement de l'élément (toutes les conditions sont déjà remplies)
});
}Langage du code : JavaScript (javascript)Votre bénéfice : Le lecteur du code n’a plus à sauter des yeux entre les accolades. Il sait que s’il est arrivé à la boucle data.forEach, toutes les conditions initiales sont vraies.
Règle n°5 : Écrire des commentaires sur le « pourquoi », pas sur le « quoi ».
Si vous avez bien appliqué les règles 1, 2, et 3, la plupart de votre code est déjà auto-explicatif.
Un commentaire ne doit pas dire ce que fait le code (// Incremente le compteur). Il doit expliquer le contexte, la raison ou le compromis derrière une décision.
❌ Commentaire inutile
// Initialise un tableau vide
const products = []; Langage du code : JavaScript (javascript)✅ Commentaire utile (explique la raison)
// ATTENTION : Cette valeur est codée en dur pour des raisons de performance.
// La requête AJAX prend 500ms, mais cette valeur n'est mise à jour que tous les mois.
const CACHED_FALLBACK_RATE = 1.05; Langage du code : JavaScript (javascript)Conclusion : codez pour l’humain
Ces cinq règles ne sont pas des contraintes, mais des super-pouvoirs qui vous font gagner du temps à long terme et qui font de vous un développeur respecté.
Votre objectif n’est pas seulement de faire marcher la machine, mais d’écrire un code que les humains (vous compris) adoreront lire. Codez avec empathie !
Articles similaires
