Schémas de mise à jour immuable
Mettez à jour les données en créant de nouvelles copies.
Schémas de mise à jour immuable 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.
Mettre à jour sans muter
Les mises à jour immuables créent une nouvelle copy avec la modification appliquée, en laissant l'original intact. C'est le fondement d'une gestion d'état prévisible en JavaScript moderne.
L'opérateur de décomposition ... est l'outil principal.
Copier un objet avec la décomposition
Décomposez un objet dans un nouvel objet, puis remplacez une propriété. L'original conserve son ancienne valeur.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);Ce sont des objets différents
La copy est un tout nouvel objet, et non la même référence. Une comparaison d'identité le confirme.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Ajouter une propriété sans mutation
Pour ajouter un champ, décomposez l'ancien objet et incluez la nouvelle key. L'original ne gagne aucune propriété.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Supprimer une propriété sans mutation
Utilisez la déstructuration pour extraire la key indésirable et récupérer le reste. L'objet contenant le reste l'exclut.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Copier des tableaux avec la décomposition
Décomposez un tableau pour le copier. Des méthodes comme map et filter renvoient également de nouveaux tableaux, sans jamais modifier la source.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Ajouter un élément à un tableau sans mutation
Au lieu d'utiliser push (qui modifie le tableau), construisez-en un nouveau avec la décomposition. La longueur de l'original reste inchangée.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Retirer un élément d'un tableau sans mutation
Utilisez filter pour produire un nouveau tableau sans l'élément indésirable, en laissant l'original intact.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Mettre à jour des objets imbriqués
Les mises à jour imbriquées exigent une décomposition à chaque niveau que vous modifiez. Seule la branche concernée est recréée ; le reste est partagé par référence.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);Mettre à jour un élément dans un tableau
Utilisez map pour renvoyer une copy modifiée de l'élément correspondant et l'original pour les autres. Aucun élément n'est modifié.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);Pourquoi les mises à jour immuables sont importantes
Ne jamais modifier l'état partagé rend la détection des changements économique (en comparant les références), permet l'annulation et le rétablissement, et évite les erreurs aux effets à distance. Le modèle est le suivant : copy, puis modifier la copy. Pour les clonages en profondeur, la prochaine leçon présente structuredClone.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);Vérification rapide
Que produit { ...user, age: 37 } lorsque user possède déjà un age ?
Récapitulatif : modèles de mise à jour immuables
Vous avez appris à mettre à jour sans muter :
- Utilisez la décomposition
{ ...obj, key: value }pour copier et remplacer. - Utilisez la déstructuration du reste pour supprimer une propriété sans mutation.
- Utilisez
map,filteret la décomposition de tableaux au lieu depush/splice. - Utilisez la décomposition à chaque niveau pour les mises à jour imbriquées ; partagez le reste par référence.
Questions Fréquemment Posées
La leçon « Schémas de mise à jour immuable » est-elle gratuite ?
Oui — le texte complet de « Schémas de mise à jour immuable » 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 « Schémas de mise à jour immuable » ?
Mettez à jour les données en créant de nouvelles copies. 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 « Schémas de mise à jour immuable » ?
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
- Object.freeze et seal
- Gel superficiel ou profond
- Schémas de mise à jour immuable
- structuredClone pour les copies profondes