DEV Community

Cover image for JavaScript: atribuição por referência
Cristian Magalhães
Cristian Magalhães

Posted on

2

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay