Padrões de atualização imutável
Atualize os dados criando novas cópias.
Padrões de atualização imutável é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.
Atualização sem mutação
Atualizações imutáveis criam uma nova cópia com a alteração aplicada, deixando o original intacto. Esse é o centro do gerenciamento previsível de state em JavaScript moderno.
O operador de propagação ... é a principal ferramenta.
Copiando um objeto com propagação
Propague um objeto para dentro de um novo e depois substitua uma propriedade. O original mantém seu valor antigo.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);São objetos diferentes
A copy é um objeto completamente novo, não a mesma referência. A comparação de identidade confirma isso.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Adicionando uma propriedade de forma imutável
Para adicionar um campo, propague o objeto antigo e inclua o novo key. O original não ganha nada.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Removendo uma propriedade de forma imutável
Use a desestruturação para extrair o key indesejado e capturar o restante. O objeto restante não o inclui.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Copiando matrizes com propagação
Propague uma matriz para copiá-la. Métodos como map e filter também retornam novas matrizes, sem nunca alterar a origem.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Adicionando a uma matriz de forma imutável
Em vez de push, que causa uma mutação, crie uma nova matriz com propagação. O comprimento do original permanece igual.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Removendo de uma matriz de forma imutável
Use filter para produzir uma nova matriz sem o item indesejado, deixando o original intacto.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Atualizando objetos aninhados
As atualizações aninhadas exigem propagação em cada nível que você alterar. Apenas o ramo afetado é recriado; o restante é compartilhado por referência.
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);Atualizando um item em uma matriz
Use map para retornar uma copy alterada do item correspondente e o original para os demais. Nenhum elemento é alterado.
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);Por que as atualizações imutáveis são importantes
Nunca alterar um state compartilhado torna a detecção de alterações barata, pois basta comparar referências, permite desfazer e refazer ações e evita erros causados por alterações inesperadas à distância. O padrão é: copie e depois altere a copy. Para clones profundos, a próxima lição aborda 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);Verificação rápida
O que { ...user, age: 37 } produz quando user já tem um age?
Recapitulação: padrões de atualização imutável
Você aprendeu a atualizar sem causar mutações:
- Use a propagação
{ ...obj, key: value }para copiar e substituir. - Use a desestruturação do restante para remover uma propriedade de forma imutável.
- Use
map,filtere a propagação de matrizes em vez depush/splice. - Use propagação em cada nível para atualizações aninhadas; compartilhe o restante por referência.
Perguntas Frequentes
A aula “Padrões de atualização imutável” é grátis?
Sim — o texto completo de “Padrões de atualização imutável” é 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 “Padrões de atualização imutável”?
Atualize os dados criando novas cópias. 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 3 de 4.
Quanto tempo leva a aula “Padrões de atualização imutável”?
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
- Object.freeze e seal
- Congelamento superficial versus profundo
- Padrões de atualização imutável
- structuredClone para cópias profundas