JavaScript: atribuição por referência
Tags: javascript, braziliandevs, beginners, programming
Published: 2023-06-29 15:35:53

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.

```javascript
// 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:

```javascript
// 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

```
2. Spread

Você também pode usar o operador de espalhamento ou spread para criar um novo objeto, como no exemplo abaixo:

```javascript
// 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
```

3. 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: 

```javascript
// 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](https://ricardo-reis.medium.com/valores-primitivos-e-valores-de-refer%C3%AAncia-no-javascript-d05405e9fa45)

[Armazenando as informações que você precisa — Variáveis
](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Variables)

------

Se chegou até aqui, me segue la nas [redes vizinhas.]  (https://bento.me/cmsdev)
<img src="https://media.giphy.com/media/D08aklo5n0hi5PJyZw/giphy.gif" />