JavaScript Academy · Aula

Evitando mutações

Trabalhe com cópias em vez de modificar os dados.

Evitando mutações é 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.

Por que evitar a mutação

Alterar dados compartilhados causa erros difíceis de rastrear: uma mudança em um lugar surpreende o código em outro. O estilo funcional favorece criar novos valores em vez de modificar os existentes (imutabilidade).

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

Espalhamento para copiar matrizes

O operador de espalhamento ... cria uma cópia superficial de uma matriz, permitindo adicionar elementos sem tocar na origem.

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

Espalhamento para copiar objetos

O espalhamento também funciona para objetos, produzindo um novo objeto com as mesmas propriedades e quaisquer substituições.

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

Métodos de matriz que não fazem mutação

Prefira métodos que retornam novas matrizes: map, filter, concat e slice. Evite os que fazem mutação, como push, splice e sort no próprio lugar.

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]

Adicionando sem mutação

Em vez de push, crie uma nova matriz usando o espalhamento ou concat.

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

Removendo sem mutação

Use filter para produzir uma nova matriz sem determinado elemento, em vez de splice.

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

Atualizando um item sem mutação

Para alterar um elemento, percorra a matriz com map e retorne um novo valor para o item correspondente.

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

Cópia superficial vs. profunda

O espalhamento copia apenas um nível. Objetos aninhados continuam sendo referências compartilhadas. Para atualizar dados aninhados sem mutação, use o espalhamento em cada nível alterado.

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

Congelando para ter segurança

Object.freeze impede a alteração acidental de um objeto em tempo de execução, tornando explícita a imutabilidade (em um único nível).

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

const não é imutabilidade

Uma confusão comum: const só impede reatribuir a variável, não modificar o valor que ela contém. Ainda é possível adicionar elementos com push a uma matriz declarada com const.

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

Recapitulação dos benefícios

Atualizações imutáveis tornam trivial o rastreamento de alterações (compare referências), permitem desfazer e refazer, evitam efeitos inesperados à distância e combinam naturalmente com funções puras.

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

Verificação rápida

Evitando a mutação.

Recapitulação

Imutabilidade significa criar novos valores em vez de fazer mutações. Use o espalhamento para copiar matrizes e objetos, prefira métodos que não fazem mutação (map, filter, concat) e use o espalhamento em cada nível ao atualizar dados aninhados. Lembre-se de que const impede a reatribuição, não a mutação; Object.freeze acrescenta proteção em tempo de execução. Atualizações imutáveis facilitam a detecção de alterações e a criação de código puro.

Perguntas Frequentes

A aula “Evitando mutações” é grátis?

Sim — o texto completo de “Evitando mutações” é 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 “Evitando mutações”?

Trabalhe com cópias em vez de modificar os dados. 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 “Evitando mutações”?

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

← Voltar para JavaScript Academy