0Pricing
JavaScript Academy · Leçon

Gel superficiel ou profond

Comprenez jusqu’où s’étend le gel.

Gel superficiel ou profond est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

freeze est superficiel

Object.freeze ne verrouille que le niveau supérieur d'un objet. Tout objet ou tableau imbriqué auquel il fait référence reste entièrement modifiable.

Cela surprend beaucoup de développeurs et provoque des erreurs subtiles.

Démontrer la limite du gel superficiel

Gelez un objet contenant un objet imbriqué. Le niveau supérieur est verrouillé, mais l'objet imbriqué peut toujours changer.

const user = Object.freeze({
  name: 'Ada',
  address: { city: 'London' }
});

user.name = 'Grace';
user.address.city = 'Paris';

console.log(user.name);
console.log(user.address.city);

Les tableaux imbriqués aussi

Les tableaux situés dans un objet gelé ne sont pas protégés non plus. Vous pouvez utiliser push, pop et réaffecter leurs éléments.

const state = Object.freeze({ tags: ['a', 'b'] });

state.tags.push('c');
state.tags[0] = 'X';

console.log(state.tags);

isFrozen le confirme

L'objet imbriqué renvoie isFrozen à false, ce qui confirme que le gel ne s'est pas propagé à l'intérieur.

const obj = Object.freeze({ inner: { v: 1 } });

console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));

Écrire deepFreeze

Pour tout verrouiller, utilisez la récursion : gelez l'objet, puis gelez chaque propriété qui contient un objet imbriqué. C'est le gel en profondeur.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }
  return Object.freeze(obj);
}

const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);

deepFreeze sur les tableaux

Les tableaux sont également des objets, donc la même récursion les gèle. Les appels à push et les écritures dans les éléments sont alors bloqués à chaque niveau.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') deepFreeze(value);
  }
  return Object.freeze(obj);
}

const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);

Vérifier le gel en profondeur

Après un gel en profondeur, chaque objet imbriqué renvoie isFrozen à true.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));

Se prémunir contre les cycles

Si un objet fait référence à lui-même, une récursion naïve boucle indéfiniment. Ignorez les objets déjà gelés pour rester en sécurité.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));

Coût du gel en profondeur

Le gel en profondeur parcourt chaque valeur imbriquée, ce qui coûte du temps et de la mémoire pour les grandes structures. Ne gelez que ce qui doit réellement être protégé, comme une config partagée ou des constantes.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  Object.keys(obj).forEach(k => {
    const v = obj[k];
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}

const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));

Quand le gel superficiel suffit

Si un objet ne contient que des valeurs primitives, un Object.freeze superficiel le protège déjà complètement. Le gel en profondeur n'est utile que s'il contient des objets ou des tableaux imbriqués.

const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));

Pourquoi c'est important

Comprendre la différence entre le gel superficiel et le gel en profondeur évite de croire à tort qu'un objet gelé est entièrement immuable. Pour les données imbriquées, utilisez la récursion. Au lieu d'effectuer des mutations, les prochaines leçons présentent des modèles de mise à jour immuables qui utilisent copy au lieu de freeze.

const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);

Vérification rapide

Après Object.freeze({ a: { b: 1 } }), pouvez-vous modifier le b imbriqué ?

Récapitulatif : gel superficiel et en profondeur

Vous avez appris la limite de profondeur du gel :

  • Object.freeze est superficiel ; les objets et tableaux imbriqués restent modifiables.
  • deepFreeze utilise la récursion pour verrouiller chaque niveau.
  • Prévenez les cycles en ignorant les objets déjà gelés.
  • Le gel en profondeur a un coût : ne gelez donc que ce qui doit être protégé.

Questions Fréquemment Posées

La leçon « Gel superficiel ou profond » est-elle gratuite ?

Oui — le texte complet de « Gel superficiel ou profond » 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 « Gel superficiel ou profond » ?

Comprenez jusqu’où s’étend le gel. 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 2 sur 4.

Combien de temps prend la leçon « Gel superficiel ou profond » ?

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

  1. Object.freeze et seal
  2. Gel superficiel ou profond
  3. Schémas de mise à jour immuable
  4. structuredClone pour les copies profondes
← Retour à JavaScript Academy