JavaScript junior vs pro : 10 réflexes de code propre

Un code de junior n'est pas forcément un code faux. Il fonctionne, il passe les tests, il fait ce qu'on lui demande. Ce qui change avec l'expérience, c'est la lisibilité : le code d'un développeur confirmé se lit vite, se modifie sans peur et cache moins de pièges.

Voici dix réécritures que je fais tout le temps en relecture de code. Pour chacune, j'ai vérifié que la version « propre » donne exactement le même résultat que l'ancienne.

1. Retourner directement la condition

1// Avant
2function majeur(age) {
3  if (age >= 18) {
4    return true;
5  } else {
6    return false;
7  }
8}
9
10// Après
11function majeur(age) {
12  return age >= 18;
13}

Une comparaison est déjà un booléen. Inutile de l'envelopper dans un if.

2. Sortir tôt plutôt qu'imbriquer

1// Avant
2function prix(user) {
3  if (user) {
4    if (user.actif) {
5      return user.prix;
6    }
7  }
8  return 0;
9}
10
11// Après
12function prix(user) {
13  if (!user) return 0;
14  if (!user.actif) return 0;
15  return user.prix;
16}

Chaque cas d'échec est traité tout de suite, et le cas normal reste à la fin, sans niveau d'indentation en plus. Plus on imbrique, plus on s'y perd.

3. Une liste plutôt qu'une chaîne de ||

1// Avant
2const ok = ext === "jpg" || ext === "png" || ext === "gif";
3
4// Après
5const IMG = ["jpg", "png", "gif"];
6const ok = IMG.includes(ext);

Ajouter un format revient à ajouter un élément dans la liste, pas à réécrire la condition.

4. Un objet à la place d'un switch

1// Avant
2switch (statut) {
3  case "ok": c = "vert"; break;
4  case "ko": c = "rouge"; break;
5  default: c = "gris";
6}
7
8// Après
9const COULEURS = { ok: "vert", ko: "rouge" };
10const c = COULEURS[statut] ?? "gris";

Pour une simple correspondance clé-valeur, l'objet est plus court et supprime le risque d'oublier un break.

5. Les template literals

1// Avant
2const msg = "Salut " + nom + ", " + age + " ans !";
3
4// Après
5const msg = `Salut ${nom}, ${age} ans !`;

6. Nommer les nombres magiques

1// Avant
2const ttc = ht * 1.2;
3const remise = ht * 0.1;
4
5// Après
6const TVA = 1.2;
7const REMISE = 0.1;
8const ttc = ht * TVA;
9const remise = ht * REMISE;

Dans six mois, personne ne saura ce que représente 1.2. Un nom de constante le dit tout de suite, et un changement de taux ne demande qu'une modification.

7. Un const avec un ternaire

1// Avant
2let role;
3if (user.admin) {
4  role = "admin";
5} else {
6  role = "membre";
7}
8
9// Après
10const role = user.admin ? "admin" : "membre";

Une variable qui ne change plus après sa création doit être un const. Cela évite qu'elle soit modifiée par erreur plus loin.

8. Un objet d'options plutôt que des paramètres à la suite

1// Avant
2const u = creer("Léa", true, 3);
3
4// Après
5const u = creer({ nom: "Léa", admin: true, niveau: 3 });

À la lecture, personne ne sait ce que true et 3 veulent dire dans le premier appel. Avec des clés nommées, l'ordre n'a plus d'importance non plus.

9. Toujours l'égalité stricte

1const saisie = "";
2saisie == 0;  // true
3saisie === 0; // false

Avec ==, JavaScript convertit avant de comparer, et une chaîne vide devient 0. Avec ===, pas de conversion, donc pas de surprise. C'est la règle que j'applique sans exception.

10. Ne jamais faire confiance à JSON.parse

1// Avant
2const prefs = JSON.parse(texte);
3
4// Après
5let prefs = {};
6try {
7  prefs = JSON.parse(texte);
8} catch {
9  // on garde les valeurs par défaut
10}

Si le texte est invalide (par exemple {oups), JSON.parse lève une SyntaxError et fait tomber tout le script. Dès que la donnée vient de l'extérieur, du localStorage, d'une API ou d'un formulaire, on protège l'appel.

Ce que ça change au quotidien

Aucune de ces réécritures n'est spectaculaire. Ensemble, elles rendent un fichier plus court, plus prévisible et plus agréable à reprendre. C'est exactement ce que j'essaie d'appliquer quand je développe des sites pour mes clients : un code que la personne suivante pourra lire sans stress.

Pour continuer, tu peux tester tes réflexes avec dix quiz JavaScript qui surprennent, ou regarder comment éviter les pièges de fetch.

Junior vs pro en JavaScript : 10 réflexes de code propre