Em JavaScript, os objetos são passados ​​por referência, o que significa que, quando você atribui um objeto a uma variável, na verdade está apenas atribuindo um ponteiro ao objeto na memória. Isso pode ser útil em alguns casos, mas em outros pode causar um comportamento inesperado, especialmente quando você está tentando criar uma cópia profunda de um objeto. Uma cópia profunda é uma cópia do objeto que cria um novo objeto com os mesmos valores do original, mas com todos os objetos aninhados e arrays também copiados. Neste artigo, exploraremos como fazer uma cópia profunda do objeto em JavaScript.

A primeira abordagem ingênua para copiar um objeto em Javascript é atribuí-lo a uma nova variável como esta:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = obj;

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Writer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

OPERADOR DE SPREAD

Podemos usar a sintaxe do operador spread fornecida pelo Javascript usando a seguinte sintaxe:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = { ...obj };

Ao usar o operador spread para copiar um objeto ou uma matriz, acabamos com dois objetos ou matrizes diferentes. Então, se fizermos a mesma manipulação anterior assim:

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Developer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

A sintaxe do operador de propagação fará uma cópia profunda de um objeto com apenas um nível de profundidade. O que isso quer dizer ? Digamos que nosso primeiro objeto “obj” tenha outra propriedade “contact” que também é um objeto que contém o e-mail do usuário:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
  contact: {
    email: '[email protected]',
  },
};

const objCopy = obj;

objCopy.contact.email = '[email protected]';

console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }
console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }

Existe alguma maneira de fazer uma cópia profunda em todos os níveis (objeto aninhado) em Javascript ? Bem, existe uma maneira, mas às vezes é chamada de truque.

JSON.parse e JSON.stringify

Outra maneira de fazer uma cópia profunda de um objeto em JavaScript é usando JSON.parse e JSON.stringify. JSON.stringify converte um objeto JavaScript em uma string JSON, enquanto JSON.parse converte uma string JSON em um objeto JavaScript. Usando essas duas funções juntas, você pode criar uma cópia profunda de um objeto.

Aqui está um exemplo de como fazer uma cópia profunda de um objeto usando JSON.parse e JSON.stringify:

const objCopy = JSON.parse(JSON.stringify(obj));

Conclusão

Em conclusão, fazer uma cópia profunda de um objeto em JavaScript pode ser complicado devido à maneira como os objetos são passados ​​por referência. No entanto, usando o operador spread ou JSON.parse e JSON.stringify, você pode criar uma cópia profunda de um objeto com todos os objetos aninhados e matrizes copiadas também. Escolha o método que funciona melhor para seu caso de uso e certifique-se de testar seu código completamente para garantir que sua cópia profunda esteja funcionando conforme o esperado.