Eae gente bonita, beleza?
Hoje eu vou explicar um pouco sobre a atribuição por referência no JavaScript, o que é e como funciona e também os problemas que isso gera e como resolver.
O que é atribuição por referência?
Quando criamos uma variável em JS e atribuímos um valor a ela o tipo do valor determina se é a atribuição será feita por valor ou por referência.
Mas o que seria uma atribuição por referência você me pergunta. Bom é quando ao invés de criarmos um espaço na memória com aquele valor, nós apenas endereçamos a nova variável para o mesmo endereço na memória da variável original. Tal qual um ponteiro funciona, porém, sem manipular o endereço como podemos fazer no C, por exemplo.
Abaixo a lista de como funciona a atribuição para cada tipo:
Por valor:
- undefined
- null
- boolean
- number
- string
- symbol
Referência:
- object
Vamos exemplificar
Vamos ver o exemplo abaixo, nós criamos um objeto pessoa com as propriedades nome e idade e então com base nesse objeto criamos outro objeto chamado outraPessoa apenas atribuindo para ele o objeto pessoa e em seguida modificamos a idade do objeto outraPessoa para 30 e então damos um console.log em cada objeto.
// Objeto original
const pessoa = { nome: "João", idade: 25 };
// Atribuição por referência
const outraPessoa = pessoa;
// Modificando a propriedade do objeto
outraPessoa.idade = 30;
console.log(pessoa.idade); // Saída esperada: 25, Saída real: 30
console.log(outraPessoa.idade); // Saída: 30
Podemos ver que no exemplo acima quando alteramos o valor da propriedade idade no objeto outraPessoa e depois mostramos na tela o valor também do objeto pessoa é alterado. Bom se você entendeu o conceito de referência ali em cima talvez você já deve ter entendido o porquê disso acontecer. Caso contrário eu explico. Bom basicamente a variável outraPessoa também aponta para o mesmo endereço de memória que a variável pessoa, logo quando uma é alterada a outra também é.
Como evitar esse tipo de problema?
Existem algumas formas de você contornar essa situação e ter o resultado esperado:
- Método Object.assign
Você pode usar o método Object.assign para criar um novo objeto, como no exemplo abaixo:
// Objeto original
const pessoa = { nome: "Maria", idade: 30 };
// Clonando o objeto
const pessoa1 = Object.assign({}, pessoa)
// Modificando a propriedade do clone
pessoa1.idade = 35;
console.log(pessoa.idade); // Saída: 30
console.log(pessoa1.idade); // Saída: 35
- Spread
Você também pode usar o operador de espalhamento ou spread para criar um novo objeto, como no exemplo abaixo:
// Objeto original
const pessoa = { nome: "Maria", idade: 30 };
// Clonando o objeto
const clonePessoa = { ...pessoa };
// Modificando a propriedade do clone
clonePessoa.idade = 35;
console.log(pessoa.idade); // Saída: 30
console.log(clonePessoa.idade); // Saída: 35
- JSON.stringfy
Esse está longe de ser uma das melhores soluções para a situação, mas bom já vi resolver e funciona. Consiste em você transformar o objeto em string depois passar ele para objeto novamente e então atribuir a variável, como no exemplo abaixo:
// Objeto original
const pessoa = { nome: "Maria", idade: 30 };
// Clonando o objeto
const clonePessoa = JSON.parse(JSON.stringify(pessoa));
// Modificando a propriedade do clone
clonePessoa.idade = 35;
console.log(pessoa.idade); // Saída: 30
console.log(clonePessoa.idade); // Saída: 35
Espero ter ajudado a resolver e entender um pouco mais sobre como o JavaScript funciona. Abaixo vou deixar alguns links que podem ser interessante.
Links úteis
Valores Primitivos e Valores de Referência no JavaScript by Ricardo Reis
Armazenando as informações que você precisa — Variáveis
Se chegou até aqui, me segue la nas redes vizinhas.
Top comments (0)