JavaScript Academy · Leçon

Éviter les mutations

Travaillez avec des copies plutôt que de modifier les données.

Éviter les mutations est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi éviter les modifications

Modifier des données partagées provoque des bogues difficiles à retracer : une modification effectuée à un endroit surprend le code ailleurs. Le style fonctionnel privilégie la création de nouvelles valeurs plutôt que la modification des valeurs existantes (immutabilité).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Utiliser la propagation pour copier des tableaux

L’opérateur de propagation ... crée une copie superficielle d’un tableau, ce qui permet d’y ajouter des éléments sans toucher à la source.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Utiliser la propagation pour copier des objets

La propagation fonctionne également avec les objets : elle produit un nouvel objet possédant les mêmes propriétés, ainsi que les éventuels remplacements.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Méthodes de tableau sans modification

Privilégiez les méthodes qui renvoient de nouveaux tableaux : map, filter, concat et slice. Évitez celles qui modifient le tableau, comme push, splice et sort sur place.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Ajouter sans modifier

Au lieu d’utiliser push, construisez un nouveau tableau avec la propagation ou concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Supprimer sans modifier

Utilisez filter pour produire un nouveau tableau sans un élément, plutôt que splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Mettre à jour un élément sans modifier

Pour modifier un élément, parcourez le tableau avec map et renvoyez une nouvelle valeur pour l’élément correspondant.

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true

Superficiel ou profond

La propagation ne copie qu’un niveau en profondeur. Les objets imbriqués restent des références partagées. Pour mettre à jour des données imbriquées sans les modifier, utilisez la propagation à chaque niveau que vous changez.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Geler pour plus de sécurité

Object.freeze empêche la modification accidentelle d’un objet à l’exécution et rend l’immutabilité explicite (sur un seul niveau).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

Constante ne signifie pas immutabilité

Une confusion fréquente : const empêche uniquement de réaffecter la variable, pas de modifier la valeur qu’elle contient. Un tableau déclaré avec const peut toujours recevoir des éléments avec push.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Récapitulatif des avantages

Les mises à jour immuables rendent le suivi des modifications trivial (en comparant les références), permettent d’annuler et de rétablir des actions, empêchent les effets à distance imprévisibles et s’associent naturellement aux fonctions pures.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Vérification rapide

Éviter les modifications.

Récapitulatif

L’immutabilité consiste à créer de nouvelles valeurs plutôt qu’à les modifier. Utilisez la propagation pour copier les tableaux et les objets, privilégiez les méthodes qui ne modifient pas les données (map, filter, concat) et utilisez la propagation à chaque niveau lors des mises à jour imbriquées. Retenez que const bloque la réaffectation, pas la modification ; Object.freeze ajoute une protection à l’exécution. Les mises à jour immuables facilitent la détection des modifications et l’écriture de code pur.

Questions Fréquemment Posées

La leçon « Éviter les mutations » est-elle gratuite ?

Oui — le texte complet de « Éviter les mutations » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Éviter les mutations » ?

Travaillez avec des copies plutôt que de modifier les données. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Éviter les mutations » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy