JavaScript: atribuição por referência

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:

1. 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

1. 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

1. 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.