Valores primitivos de JavaScript versus valores de referência

Resumo : neste tutorial, você aprenderá sobre dois tipos diferentes de valores em JavaScript, incluindo valores primitivos e de referência.

JavaScript tem dois tipos diferentes de valores:

• Valores primitivos
• Valores de referência

Os valores primitivos são dados atômicos, enquanto os valores de referência são objetos que podem consistir em vários valores.

Pilha e memória heap

Quando você declara variáveis , o mecanismo JavaScript aloca memória para elas em dois locais de memória: pilha e heap.

Dados estáticos são os dados cujo tamanho é fixo em tempo de compilação. Os dados estáticos incluem:

• Valores primitivos ( nulo , indefinido , booleano , número , string , símbolo e BigInt )
• Valores de referência que se referem a objetos.

Como os dados estáticos têm um tamanho que não muda, o mecanismo JavaScript aloca uma quantidade fixa de espaço de memória para os dados estáticos e os armazena na pilha.

Por exemplo, o seguinte declara duas variáveis ​​e inicializa seus valores como uma string literal e um número:

let name = 'John';
let age = 25;Linguagem de código:  JavaScript  ( javascript )

Como namee agesão valores primitivos, o mecanismo JavaScript armazena essas variáveis ​​na pilha, conforme mostrado na imagem a seguir:

Observe que strings são objetos em muitas linguagens de programação, incluindo Java e C#. No entanto, strings são valores primitivos em JavaScript.

Ao contrário da pilha, o JavaScript armazena objetos (e funções) na pilha. O mecanismo JavaScript não aloca uma quantidade fixa de memória para esses objetos. Em vez disso, alocará mais espaço conforme necessário.

O exemplo a seguir define as variáveis name​​, agee person:

let name = 'John';
let age = 25;

let person = {
  name: 'John',
  age: 25,
};Linguagem de código:  JavaScript  ( javascript )

Internamente, o mecanismo JavaScript aloca a memória conforme mostrado na imagem a seguir:

Nesta imagem, o JavaScript aloca memória na pilha para as três variáveis name,, agee person.

O mecanismo JavaScript cria um novo objeto na memória heap. Além disso, ele vincula a personvariável na memória da pilha ao objeto na memória heap.

Por isso dizemos que a personvariável é uma referência que se refere a um objeto.

Propriedades dinâmicas

Um valor de referência permite adicionar, alterar ou excluir propriedades a qualquer momento. Por exemplo:

let person = {
  name: 'John',
  age: 25,
};

// add the ssn property
person.ssn = '123-45-6789';

// change the name
person.name = 'John Doe';

// delete the age property
delete person.age;


console.log(person);Linguagem de código:  JavaScript  ( javascript )

Saída:

{ name: 'John Doe', ssn: '123-45-6789' }Linguagem de código:  CSS  ( css )

Ao contrário de um valor de referência, um valor primitivo não pode ter propriedades. Isso significa que você não pode adicionar uma propriedade a um valor primitivo.

JavaScript permite adicionar uma propriedade a um valor primitivo. No entanto, não terá nenhum efeito. Por exemplo:

let name = 'John';
name.alias = 'Knight';

console.log(name.alias); // undefined
Linguagem de código:  JavaScript  ( javascript )

Saída:

undefinedLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, adicionamos a aliaspropriedade ao namevalor primitivo. Mas quando acessamos a aliaspropriedade através do namevalor primitivo, ela retorna undefined.

Copiando valores

Quando você atribui um valor primitivo de uma variável para outra, o mecanismo JavaScript cria uma cópia desse valor e o atribui à variável. Por exemplo:

let age = 25;
let newAge = age;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

• Primeiro, declare uma nova variável agee inicialize seu valor com 25.
• Segundo, declare outra variável newAgee atribua ageà newAgevariável.

Nos bastidores, o mecanismo JavaScript cria uma cópia do valor primitivo 25e o atribui à newAgevariável.

A imagem a seguir ilustra a memória da pilha após a atribuição:

Na memória da pilha, newAgee agesão variáveis ​​separadas. Se você alterar o valor de uma variável, isso não afetará a outra.

Por exemplo:

let age = 25;
let newAge = age;

newAge = newAge + 1;
console.log(age, newAge);Linguagem de código:  JavaScript  ( javascript )

Quando você atribui um valor de referência de uma variável para outra, o mecanismo JavaScript cria uma referência para que ambas as variáveis ​​se refiram ao mesmo objeto na memória heap. Isso significa que se você alterar uma variável, isso afetará a outra.

Por exemplo:

let person = {
  name: 'John',
  age: 25,
};

let member = person;

member.age = 26;

console.log(person);
console.log(member);Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, declare uma personvariável e inicialize seu valor com um objeto com duas propriedades namee age.

Em segundo lugar, atribua a personvariável à membervariável. Na memória, ambas as variáveis ​​fazem referência ao mesmo objeto, conforme mostra a figura a seguir:

Terceiro, altere a agepropriedade do objeto através da membervariável:

Como ambas personas membervariáveis ​​e referenciam o mesmo objeto, a alteração do objeto por meio da membervariável também se reflete na personvariável.

Resumo

• Javascript possui dois tipos de valores: valores primitivos e valores de referência.
• Você pode adicionar, alterar ou excluir propriedades de um valor de referência, mas não pode fazer isso com um valor primitivo.
• Copiar um valor primitivo de uma variável para outra cria uma cópia de valor separada. Isso significa que alterar o valor de uma variável não afeta a outra.
• Copiar uma referência de uma variável para outra cria uma referência para que duas variáveis ​​se refiram ao mesmo objeto. Isso significa que a alteração do objeto por meio de uma variável reflete em outra variável.