Valchan

"What we know is a drop.. What we don't know is an ocean." - Isaac Newton

14 de maio de 2022 • 1 min de leitura

Shallow Copy VS Deep Copy

Como criar um cópia de um objeto no Javascript?

Primeiramente qual a diferença entre Shallow Copy e Deep Copy?

  • Shallow Copy é uma cópia superficial, ou seja, é realizada a cópia do objeto, porém os atributos do objeto clone que não são do tipo primitivo, são copiados como referência para os atributos do objeto original.

  • Deep Copy é uma cópia profunda, ou seja, copia todos os atributos, os que são tipos primitivos e inclusive os que não são tipos primitivos, por exemplo, um array.

const example = {
  name: 'Example',
}

// Exemplo copiando por referência
const clone = example;
clone.name = 'Example2';
console.log(example); // { name: 'Example2' }
console.log(clone); // { name: 'Example2' }

// ---- Exemplos de Shallow Copy ----

// Spread Operator
const clone1 = {...example};
clone1.name = 'ShallowCopy1';
console.log(clone1); // { name: 'ShallowCopy1' }

// Object.assign
const clone2 = Object.assign({}, example)
clone2.name = 'ShallowCopy2';
console.log(clone2); // { name: 'ShallowCopy2' }

// clone do Lodash
const clone3 = clone(example); // _.clone() // Lodash
clone3.name = 'ShallowCopy3';
console.log(clone3); // { name: 'ShallowCopy3' }

// ---- Exemplos de Deep Copy ----

// JSON
const deepCopy1 = JSON.parse(JSON.stringify(example))
deepCopy1.name = 'DeepCopy1';
console.log(deepCopy1); // { name: 'DeepCopy1' }

// structuredCopy
// Funciona apenas no browser
const deepCopy2 = structuredCopy(example)
deepCopy2.name = 'DeepCopy2';
console.log(deepCopy2); // { name: 'DeepCopy2' }

// cloneDeep do Lodash
const deepCopy3 = cloneDeep(example); // _.cloneDeep() // Lodash
deepCopy3.name = 'DeepCopy3';
console.log(deepCopy3); // { name: 'DeepCopy3' }

Minha recomendação é que você utilize o deep copy, pois assim você irá garantir que caso o objeto original seja alterado, esta alteração não afete a cópia e vice-versa.
Outro ponto seria se o objeto conter funções, uma shallow copy não irá atender bem ao que é esperado.

Comentários