top of page
  • Foto do escritorCarlito Murta

Como clonar Array e Objeto sem referência no Javascript



Você alguma vez já pode ter se deparado com uma situação bem esquisita, onde você utiliza duas variáveis, modifica o valor de uma delas, e a segunda também se modifica, como neste caso:


// Objeto
var a = { nome'Carlito'idade22 };
var b = a;
b.nome = 'Fabio';
console.log(b);
// {nome:'Fabio',idade:22}
console.log(a);
// {nome:'Fabio',idade:22}

Como você pode ver, ao modificar a objeto b no qual foi inserido o objeto a, a também foi modificado.


Existe pouca informação sobre isso, mas é uma situação bem comum pra quem trabalha com javascript à muito tempo.


Acontece é que o Javascript aloca objetos e matrizes na memória por referencia do objeto ou matriz original, e não por valor.


Objetos


Temos 3 maneiras de clonar objetos:



const body = { mouth'👅'eyes'👀' }

// ES6 : Spread Operator
const cloneBody = { ...body }


// Object.assign
const cloneBody = Object.assign({}, body)


// JSON
const cloneBody = JSON.parse(JSON.stringify(body))

No final das contas, qualquer forma de atribuição onde se quebra e constrói novamente o valor, o resultado será um clone do valor porém sem referencia.


Arrays


No caso de arrays, temos 2 maneiras simples:



const actors = ['Matthew','Anne','Robert'];

// < ES6
const cloneActors = actors.slice();

// ES6 > Spread Operator
const cloneActors = [...actors];

// Outra forma interessante
const cloneActors = Array.from(actors);

Profundidade


No caso da solução com o Spread Operator, note que ele apenas clona a nível de superfície, ou seja, apenas um nível de profundidade do array.



const arrays = [[12], [10]];

const cloneArrays = [...arrays];

// Mudamos o valor do primeiro item no primeiro array aninhado do nosso array clonado.
cloneArrays[0][0= '👻';

console.log(cloneArrays);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

// Note que o array original também foi afetado
console.log(arrays);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

Então ao escolher essa solução, analise os valores no qual estiver trabalhando.


 


Com essas dicas, você nunca mais se preocupará com valores fantasmas :D


Espero que tenha ajudado, e até a próxima!


Happy Coding!

781 visualizações0 comentário

Posts recentes

Ver tudo

Comments


bottom of page