0Pricing
JavaScript Academy · Aula

Congelamento superficial versus profundo

Entenda até onde o congelamento alcança.

Congelamento superficial versus profundo é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

freeze é superficial

Object.freeze bloqueia apenas o nível superior de um objeto. Qualquer objeto ou matriz aninhada que ele referencie continua totalmente mutável.

Isso surpreende muitos desenvolvedores e causa erros sutis.

Comprovando o limite superficial

Congele um objeto que contenha outro objeto aninhado. O nível superior fica bloqueado, mas o objeto aninhado ainda pode ser alterado.

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);

Matrizes aninhadas também

As matrizes dentro de um objeto frozen também ficam desprotegidas. Você pode usar push, pop e reatribuir seus elementos.

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

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

console.log(state.tags);

isFrozen confirma isso

O objeto aninhado informa isFrozen como falso, confirmando que o congelamento não alcançou seu interior.

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

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

Escrevendo deepFreeze

Para bloquear tudo, use recursão: congele o objeto e depois congele cada propriedade que seja um objeto aninhado. Isso é o congelamento profundo.

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 em matrizes

Matrizes também são objetos, portanto a mesma recursão as congela. As operações push e as escritas de elementos são então bloqueadas em todos os níveis.

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);

Verificando o congelamento profundo

Depois do congelamento profundo, todos os objetos aninhados informam isFrozen como verdadeiro.

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));

Protegendo contra ciclos

Se um objeto referenciar a si mesmo, uma recursão ingênua entrará em um loop infinito. Ignore objetos que já estejam frozen para manter a operação segura.

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));

Custo do congelamento profundo

O congelamento profundo visita cada valor aninhado, o que consome tempo e memória em estruturas grandes. Congele apenas o que realmente precisar de proteção, como config compartilhada ou 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));

Quando o congelamento superficial é suficiente

Se um objeto contiver apenas valores primitivos, um Object.freeze superficial já o protegerá por completo. O congelamento profundo só é importante quando há objetos ou matrizes aninhados.

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

Por que isso é importante

Entender a diferença entre congelamento superficial e profundo evita a armadilha de pensar que um objeto frozen é totalmente imutável. Para dados aninhados, use recursão. Como alternativa à mutação, as próximas lições apresentam padrões de atualização imutável que fazem uma cópia em vez de congelar.

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

Verificação rápida

Depois de Object.freeze({ a: { b: 1 } }), você pode alterar o b aninhado?

Recapitulação: congelamento superficial versus profundo

Você aprendeu o limite de profundidade do congelamento:

  • Object.freeze é superficial; objetos e matrizes aninhados continuam mutáveis.
  • deepFreeze usa recursão para bloquear todos os níveis.
  • Proteja-se contra ciclos ignorando objetos que já estejam frozen.
  • O congelamento profundo tem um custo, portanto congele apenas o que precisar de proteção.

Perguntas Frequentes

A aula “Congelamento superficial versus profundo” é grátis?

Sim — o texto completo de “Congelamento superficial versus profundo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Congelamento superficial versus profundo”?

Entenda até onde o congelamento alcança. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Congelamento superficial versus profundo”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Object.freeze e seal
  2. Congelamento superficial versus profundo
  3. Padrões de atualização imutável
  4. structuredClone para cópias profundas
← Voltar para JavaScript Academy