🧠 Mutation vs Immutabilité en JavaScript

(Bugs silencieux et mortels, références perdues et le drame du « J’ai juste utilisé sort… »)

Il existe certains bugs en JavaScript qui…

• Ne crient pas dans la console ❌
• Ne lancent aucune erreur ❌
• Passent tous les tests ✅
• Mais mettent le feu à la production 🔥

Et puis quelqu’un vient te voir et te pose cette question légendaire :

« Pourquoi cette liste est cassée ? »

Et toi, tu penses :

« Mais… j’ai juste… utilisé… sort… » 😐

Bienvenue dans l’univers de
👉 la Mutation vs l’Immutabilité.

🧨 Qu’est-ce que la Mutation ? (Un sabotage qui a l’air innocent)

La mutation, c’est le fait de modifier une structure de données (tableau, objet)
👉 directement sur place.

Cela signifie :

• Même référence
• Même adresse mémoire
• Mais maintenant… ce n’est plus la même personne 😬

🔧 Un Exemple Simple mais Dangereux

const numbers = [3, 1, 2];
numbers.sort();

console.log(numbers);
// [1, 2, 3]

🧠 À première vue :

« Et alors ? Ça marche. »

Mais en coulisses :

• numbers n’est plus le même numbers
• La donnée originale est modifiée définitivement
• Pas de retour en arrière
• Pas de undo
• Fin de partie 🎭

📌 sort() donne l’impression de retourner un résultat,
mais en réalité il modifie le tableau sur place.

🧠 Pourquoi la Mutation est-elle si Dangereuse ?

Parce que dans la vraie vie :

• Les mêmes données sont utilisées à plusieurs endroits
• Le composant A fait confiance à ces données
• Le composant B attend un ordre différent
• La réponse de l’API est mise en cache
• Toi, tranquillement, tu appelles sort()

Et ensuite…

💥 L’UI se casse
💥 Le state devient incohérent
💥 Le debug se transforme en cauchemar

Et tu te demandes :

« Où est le bug ? »

Réponse :

« Nulle part… apparemment ? » 😅

🧪 Une Vraie Histoire de Production (Catastrophe Silencieuse)

const users = [
  { name: "Ayşe", age: 25 },
  { name: "Mehmet", age: 30 },
  { name: "Zeynep", age: 20 }
];

const sortedUsers = users.sort((a, b) => a.age - b.age);

🧠 Ce que tu attends :

• sortedUsers → trié
• users → inchangé

❌ Ce qui se passe réellement :

• users est muté
• sortedUsers n’est qu’une référence
• Maintenant, tout est trié par âge 😐

Puis quelqu’un demande :

« Pourquoi le menu déroulant a changé ? »

Tu réponds :

« Je n’ai pas touché à ce menu… »

Mais si.
Indirectement.
C’est comme ça que fonctionne la mutation 🕳️

☠️ Méthodes de Mutation Courantes (Liste Noire)

Ces méthodes mutent en silence :

📛 Méthodes sur les Tableaux

• sort()
• push()
• pop()
• shift()
• unshift()
• splice()

📛 Objets

user.age = 30;

Cette ligne :

• A l’air innocente
• Mais l’objet n’est plus le même

📌 Si cet objet est :

• un state ❌
• des props ❌
• une donnée partagée ❌

Tu es en danger.

🛡️ Qu’est-ce que l’Immutabilité ? (Le Réflexe Senior)

L’immutabilité, c’est cet état d’esprit :

« Je ne modifie pas les données existantes.
Je crée une nouvelle copie. »

🧘‍♂️ Debug plus calme
🧠 Code plus prévisible
🛠️ Moins de surprises

C’est pour ça que les développeurs seniors ont l’air si détendus.

✨ Le Spread Operator : la Cape du Héros 🦸‍♂️

🔧 Trier un Tableau en le Copiant

const numbers = [3, 1, 2];

const sortedNumbers = [...numbers].sort((a, b) => a - b);

🧠 Que s’est-il passé ?

• ...numbers → nouveau tableau
• sort() → travaille sur la copie
• Les données originales sont sauves ✔

console.log(numbers);       // [3, 1, 2]
console.log(sortedNumbers); // [1, 2, 3]

🎉 Tout le monde est content.

🔧 Mettre à Jour un Objet (La Bonne Méthode)

const user = { name: "Ayşe", age: 25 };

const updatedUser = {
  ...user,
  age: 26
};

🧠 Résultat :

• user → inchangé
• updatedUser → nouvel objet
• React → re-render
• Debug → plus simple

📌 Fais de ce pattern une habitude.

⚛️ Pourquoi React est-il Obsédé par l’Immutabilité ?

React vérifie une seule chose :

« La référence a-t-elle changé ? »

❌ Mauvais (Mutation)

state.users.sort();
setState(state);

🧠 React dit :

« Même référence. Je ne re-render pas. »

✅ Correct (Immuable)

setState({
  users: [...state.users].sort((a, b) => a.age - b.age)
});

🧠 React :

« Oh ! Nouvelle référence. Je re-render ! »

🔥 Voilà la différence entre :

• « Pourquoi ça ne s’est pas re-render ? »
• et
• « Bien sûr que ça s’est re-render. »

🧠 Quand la Mutation est-elle Acceptable ?

Toute mutation n’est pas le mal absolu 😈
Mais elle doit être intentionnelle.

✅ Acceptable

• Variables locales
• Données temporaires dans une fonction
• Calculs hors UI

❌ Dangereux

• State
• Props
• Données globales
• Cache
• Réponses d’API

📌 Règle d’or :

« Si c’est partagé → sois immuable. »

🆚 Mini Tableau Comparatif

🧠 Conseils en Or Niveau Senior

✨ sort() n’est pas innocent
✨ Le state est sacré — ne le touche pas
✨ Copier coûte peu, les bugs coûtent cher
✨ L’immutabilité ne te ralentit pas
✨ Elle rend le debug plus rapide

☕ Mot de la Fin (La Phrase de Senior)

Les bugs les plus dangereux en JavaScript :

• Sont silencieux
• Ont l’air inoffensifs
• Apparaissent en production

Et quand quelqu’un te demande :

« Pourquoi cette donnée a changé ? »

Tu souris calmement 😎☕
et tu dis :

« Il y a probablement une mutation quelque part. »

👑
Cette phrase…
c’est une phrase de senior.