De Junior à Senior : Les habitudes d’écriture en JavaScript

(Un code qui fonctionne ≠ un bon code) ⚠️

Écrire du code quand on est junior, c’est un peu comme ça :

« J’ai démarré la voiture, le reste n’a pas d’importance. » 🚗💨

En tant que senior, l’objectif devient :

« Tout le monde doit pouvoir conduire cette voiture — et quand elle tombe en panne, elle doit être facile à réparer. » 🔧

Cet article explique exactement cette différence.

1️⃣ Mauvais code vs Bon code

« Ils font la même chose, mais l’un te rend fou » 😅

❌ Code version Junior

function c(a, b, d) {
  return a * b * d;
}

Pourquoi ce code est mauvais ?

• c → C’est quoi ? Un calcul ? Un sort ? De la magie ? 🧙‍♂️
• a, b, d → On passe un examen de maths ?
• Dans 3 mois, même toi tu ne sauras plus ce que ça fait

📌 Erreur classique du junior :

« Je comprends maintenant, ça suffit. »

✅ Code version Senior

function calculateTotalPrice(price, quantity, taxRate) {
  return price * quantity * taxRate;
}

Pourquoi ce code est bon ?

• Le nom de la fonction → explique clairement son rôle
• Les paramètres → racontent une histoire à la lecture
• Aucun commentaire nécessaire

🧠 Réflexe de senior :

Si le code s’explique tout seul, tu es sur la bonne voie.

2️⃣ Clean Code : Lignes en trop = danger caché 💣

❌ Code inutilement compliqué

function isUserActive(user) {
  if (user.isActive === true) {
    return true;
  } else {
    return false;
  }
}

Que fait ce code ?

• Il vérifie un booléen
• Mais fait en 5 lignes ce qui peut être fait en 1

Ce que pense le junior :

« Je l’ai écrit comme ça pour être clair. »

Ce que pense le senior :

« Lignes inutiles = bugs futurs. »

✅ Version Clean Code

function isUserActive(user) {
  return user.isActive;
}

Qu’est-ce qu’on gagne ?

• Plus court
• Plus clair
• Moins de risques d’erreurs

📌 Règle d’or :

Le code devient plus fort en devenant plus simple, pas plus long.

3️⃣ Lisibilité : Le code est pour les humains, pas pour les machines 👀

❌ Code difficile à lire

if(x>10&&y<5&&z!==null&&z!==undefined){
doSomething();
}

En lisant ce code :

• Les yeux se plissent 👁️
• Le cerveau fatigue 🧠
• Le debug devient un cauchemar 😵

✅ Code lisible

const isXGreaterThanTen = x > 10;
const isYLessThanFive = y < 5;
const hasZValue = z != null;

if (isXGreaterThanTen && isYLessThanFive && hasZValue) {
  doSomething();
}

Pourquoi est-ce du code niveau senior ?

• Chaque variable est une mini-explication
• On voit immédiatement quelle condition échoue
• Ajouter des logs est simple

📌 Astuce pratique :
Si un if est long → découpe-le.

4️⃣ Debuggabilité : Les erreurs arrivent — pas de panique 🐞

❌ Cauchemar de debug

function getPrice(data) {
  return data.order.price.total;
}

Un jour, cette fonction plante et tu vois :

Cannot read property 'price' of undefined

Et là :

« Quelle data ? Qu’est-ce qui est undefined ? » 😐

✅ Code friendly pour le debug

function getPrice(data) {
  if (!data || !data.order) {
    console.error("Données manquantes :", data);
    return 0;
  }

  return data.order.price?.total ?? 0;
}

Qu’a-t-on fait ?

• Vérifié si les données existent
• Ajouté un log clair
• Évité les crashes avec l’optional chaining

📌 Habitude de senior :

Ne cache pas les erreurs — rends-les visibles.

5️⃣ Magic Numbers : Les tueurs silencieux 🧙‍♂️

❌ Magic Number

if (score > 85) {
  grade = "A";
}

Pluie de questions :

• Pourquoi 85 ?
• Qui a décidé ça ?
• Et si demain ça devient 90 ?

✅ Constantes explicites

const MIN_SCORE_FOR_A = 85;

if (score > MIN_SCORE_FOR_A) {
  grade = "A";
}

Avantages

• Tout le monde comprend
• Les changements se font à un seul endroit
• L’intention est claire

📌 Réflexe de senior :

Si tu vois un nombre, donne-lui un nom.

6️⃣ Fonctions : Petites, à responsabilité unique, claires 🎯

❌ Une fonction qui fait tout

function handleUser(user) {
  validateUser(user);
  saveUser(user);
  sendEmail(user);
  logUser(user);
}

Ça marche aujourd’hui…
Demain quelqu’un ajoute un SMS…
Puis un try/catch…
Et la fonction s’écroule 😄

✅ Structure découpée et propre

function validateUser(user) {}
function saveUser(user) {}
function sendWelcomeEmail(user) {}
function logUserAction(user) {}

Pourquoi c’est mieux ?

• Facile à tester
• Facile à debugger
• Sûr à modifier

📌 Phrase clé :

Si le nom d’une fonction devient long, elle fait trop de choses.

7️⃣ Mentalité Junior vs Senior 🧠

8️⃣ Culture du log : Même console.log est un art 🎨

❌ Log inutile

console.log(data);

✅ Log explicite

console.log("Données de commande avant le calcul :", data);

📌 Astuce :
Les logs doivent raconter une histoire, pas faire des ragots 😄

🎯 CONCLUSION : Code Senior = Moins d’ego, Plus de clarté ✨

Un développeur senior :

• N’écrit pas de code acrobatique
• Se demande : « Comment expliquer ça plus clairement ? »
• Ne cache pas les erreurs — il les contrôle

Souviens-toi :

Le code changera un jour.
Un code facile à changer est un bon code. 💡