Como clonar objetos em JavaScript: spread e Object.assign

Clonar objetos em JavaScript é uma tarefa comum para devs que buscam manipular dados sem afetar o original. Duas maneiras práticas de fazer isso são usando o operador spread e o método Object.assign(). Ambos permitem criar cópias independentes, evitando alterações acidentais. Mesmo para quem está começando, esses recursos são úteis e intuitivos.

O operador spread, representado por três pontinhos, expande o conteúdo de um objeto em um novo. Já o Object.assign() copia propriedades de um ou mais objetos para outro, criando uma nova instância. Cada técnica tem suas peculiaridades, mas ambas são fundamentais para quem lida com JavaScript.

Entendendo o conceito de clonagem de objetos

Clonar objetos em JavaScript significa criar uma nova cópia de um objeto original. Isso é útil quando você quer fazer alterações em um objeto sem modificar o original. Dá mais controle sobre os dados, especialmente em projetos grandes.

Diferenças entre cópia rasa e profunda

Cópia rasa é quando você copia apenas a camada superficial de um objeto. Se o objeto original contém outros objetos ou arrays, só a referência desses objetos internos será copiada. Isso quer dizer que alterações nos objetos internos do clone ainda vão afetar o original.

Cópia profunda, por outro lado, copia todos os níveis de um objeto, o que inclui tudo dentro dele. Esse tipo de cópia cria réplicas independentes dos objetos internos, garantindo que mudanças no clone não impactem o original. A clonagem profunda é crucial em situações complexas onde a integridade dos dados é essencial.

Saber a diferença entre essas duas técnicas importa muito. Em um projeto, usar a cópia errada pode levar a bugs difíceis de detectar. Clonar de forma adequada ajuda a evitar problemas, garante que você trabalhe com os dados do jeito que espera.

Clonagem de objetos usando o operador Spread

O operador Spread é uma mão na roda quando você precisa fazer uma cópia rápida de objetos em JavaScript. Com a introdução do ES6, usar os três pontinhos ... virou uma maneira prática de espalhar os valores de um objeto em um novo, sem quebrar a cabeça. Funciona assim: você pode criar um novo objeto e colocar ... antes do objeto que quer copiar. Pronto, é só isso!

Mas, antes de sair clonando tudo, tem um detalhe importante: essa técnica faz uma cópia rasa. Isso significa que ela só copia o que está na camada de cima do objeto. Se dentro dele tem outro objeto, esse “fundo” será apenas referenciado, não copiado. Vamos ver um exemplo para deixar mais claro.

Imagina que temos um objeto chamado user que guarda informações sobre nome e contato. Para duplicá-lo, podemos criar um novo objeto novoUsuario e aplicar o Spread:

const user = {
  nome: "João",
  contato: {
    email: "[email protected]"
  }
};

const novoUsuario = {
  ...user
};

No caso acima, novoUsuario recebeu uma cópia do user. Mas atenção! Se mudar algo dentro de contato, isso será refletido em ambos os objetos porque a mudança ocorre na mesma referência. Sim, esse é o ponto pegadinha da cópia rasa.

Dicas para evitar erros

• Sempre revise se seu objeto tem subníveis antes de clonar. Isso ajuda a evitar surpresas com referências inesperadas.
• Para objetos complexos que exigem uma cópia mais profunda, considere usar métodos alternativos ou bibliotecas como Lodash.
• Lembre-se de entender diferenças no uso de var, let e const para garantir que suas variáveis estejam sendo usadas corretamente no seu código.

Assim fica fácil fazer clonagens simples e rápidas com o operador Spread, desde que você não esqueça dos detalhes sobre cópias rasas.

Utilizando Object.assign() para clonar objetos

O método Object.assign() é bastante útil para clonar objetos em JavaScript. Ele copia as propriedades de um ou mais objetos para um objeto de destino. Essa função é ótima quando você precisa duplicar objetos de forma rápida e prática, mas é importante entender suas limitações e diferenças em relação ao operador Spread (...).

Quando você usa Object.assign(), a sintaxe é simples e direta. Primeiro, você passa o objeto que deseja que seja o destino das cópias. Depois, passa os objetos dos quais quer copiar as propriedades. Veja como fica:

const destino = {};

const original = {
  nome: 'Carlos',
  idade: 30
};

Object.assign(destino, original);

console.log(destino); // { nome: 'Carlos', idade: 30 }

Embora Object.assign() e o operador Spread possam parecer semelhantes, eles têm diferenças que são essenciais. Ambos criam cópias superficiais, mas Object.assign() é uma função, enquanto o operador Spread é uma sintaxe especial. Isso pode levar a diferenças sutis em algumas situações de uso.

Quando usar Object.assign()

• Clonagem rápida: Se você precisa copiar propriedades de um objeto para outro sem preocupar-se com referências internas, é uma boa escolha.
• Múltiplas fontes: Precisa de um objeto que combine várias origens? Object.assign() permite adicionar várias fontes de uma só vez.
• Compatibilidade: Funciona em várias versões de JavaScript, sendo uma boa escolha para código legível e compatível.

Uma dica útil é entender que ambas as abordagens não copiam propriedades aninhadas. Se precisar de uma clonagem profunda, considere outras técnicas ou bibliotecas, como o JSON.parse() combinado com JSON.stringify(), apesar de suas limitações com certos tipos de dados. E, para melhorar suas habilidades em JavaScript, confira nosso artigo sobre como DEBUG com console.log em JavaScript.

Quando usar JSON.parse() e JSON.stringify()

Ao trabalhar com objetos em JavaScript, uma técnica comum para realizar uma clonagem profunda é usar JSON.parse() e JSON.stringify(). Esses métodos são bastante eficazes para a maioria dos casos, especialmente quando lidamos com dados simples. Funciona dessa forma: primeiro, o objeto é transformado em uma string JSON com JSON.stringify().

Em seguida, essa string é convertida de volta em um objeto com JSON.parse(). Isso cria uma nova instância do objeto, garantindo que alterações no clone não afetem o original. Fácil, não é mesmo?

Essa abordagem, porém, tem suas limitações. Não funciona bem com objetos complexos que incluem funções, símbolos ou valores como undefined. Tais elementos são ignorados ou transformados em null, causando possíveis problemas no código. Portanto, use com cautela em casos onde os objetos contêm esse tipo de dado.

Para detalhes mais avançados de manipulação, confira o guia sobre manipulação de arrays em JavaScript. Isso pode proporcionar maneiras adicionais para lidar com estruturas complexas.

Considerações finais sobre a clonagem de objetos

Clonar objetos em JavaScript pode parecer complicado, mas com os métodos corretos, tudo se simplifica. Existem três formas principais de fazer essa cópia: o operador de espalhamento (...), o método Object.assign(), e a combinação de JSON.parse() e JSON.stringify(). Cada um desses métodos tem suas particularidades.

O operador de espalhamento e Object.assign() são ótimos para cópias rápidas, mas fazem apenas clones superficiais. Isso significa que se seu objeto tiver subobjetos, eles ainda estarão ligados ao original. Quando você precisa de uma cópia profunda, o combo JSON.parse(JSON.stringify()) é uma opção, mas tem suas limitações, como a incapacidade de lidar com funções ou símbolos.

É essencial entender quando usar cada método no seu dia a dia como desenvolvedor. Isso garante que suas alterações em objetos não gerem efeitos indesejados. Clonar corretamente objetos é parte do básico quando se trabalha com exibir variáveis em JavaScript, permitindo que você manipule dados de forma segura e precisa.