08/03/2019 Diferenças entre "Valor" e "Referência" em JavaScript - BrazilJS

EDUARDO RABELO Diferenças entre “Valor” e “Referência” em

18/07/2017 JavaScript

JAVASCRIPTLINGUAGENSSOFTWARE

E POR QUE É CRUCIAL ENTENDER A DIFERENÇA

JavaScript é uma linguagem orientada a objetos: isso significa que a maioria das coisas em

JavaScript são Objetos. Por exemplo, as funções são Objetos. Os únicos elementos que não

são objetos são os Dados de Tipos Primitivos: string, number, boolean, null e undefined.

Esses tipos de dados primitivos também são imutáveis, o que significa que, uma vez

criados, eles não podem ser modificados.

Uma das diferenças entre os dois é que os dados de tipos primitivos são passados

https://braziljs.org/blog/diferencas-entre-valor-e-referencia-em-javascript/ 1/5
08/03/2019 Diferenças entre "Valor" e "Referência" em JavaScript - BrazilJS

como valor e os objetos são passados como referência.

DADOS DE TIPOS PRIMITIVOS SÃO PASSADOS COMO VALOR E OBJETOS SÃO PASSADOS COMO REFERÊNCIA.

O que isso significa? Você pode pensar nisso dessa maneira:

Por Valor: Significa criar uma CÓPIA do original. Imagine gêmeos: eles nascem exatamente

iguais, mas o primeiro gêmeo não tem seu cabelo modificado quando o segundo gêmeo corta

o próprio.

Por Referência: Significa criar um APELIDO (alias) para o original. Quando sua mãe te

chama de “Doce de Leite”, embora seu nome seja Eduardo, isso não cria um clone de você

mesmo: você ainda é você, mas você pode ser chamado por esses dois nomes muito

diferentes.

Vamos ver a forma como os valores primitivos e os objetos se comportam, primeiro quando

atribuímos valores com o operador de atribuição (=) e segundo quando passamos para uma

função como um parâmetro.

1. ATRIBUINDO UM VALOR COM O OPERADOR = COM VALORES PRIMITIVOS E

OBJETOS

COM VALORES PRIMITIVOS, O OPERADOR = FUNCIONA POR VALOR

Considere o código abaixo:

var name = "Carlos"; var firstName = name;

name = "Carla";

console.log(name); // "Carla"
console.log(firstName); // "Carlos"

O resultado é bastante direto: é o operador = está trabalhando por valor. O que realmente

acontece aqui pode ser simplificado da seguinte forma:

Uma variável name é criada e recebe o valor “Carlos”. Um pedaço de memória em JavaScript

é alocado para ele.

Uma variável firstName é criada e recebe uma cópia do valor de name. firstName tem seu
https://braziljs.org/blog/diferencas-entre-valor-e-referencia-em-javascript/ 2/5
08/03/2019 Diferenças entre "Valor" e "Referência" em JavaScript - BrazilJS

próprio ponto de memória e é independente de name. Neste momento no

código,firstName também tem um valor “Carlos”.

Em seguida, alteramos o valor de name para “Carla”. Mas firstName ainda mantém seu valor

original, porque ele vive em um ponto de memória diferente.

AO TRABALHAR COM VALORES PRIMITIVOS, O OPERADOR = CRIA UMA CÓPIA DA VARIÁVEL ORIGINAL.

ISSO É O QUE “POR VALOR” SIGNIFICA.

COM OBJETOS, O OPERADOR = FUNCIONA POR REFERÊNCIA

Considere o código abaixo:

var myName = { firstName: "Carlos" }; var identity = myName;

myName.firstName = "Carla";

console.log(myName.firstName); // "Carla"
console.log(identity.firstName); // "Carla"

Aqui, o resultado é o mesmo para as variáveis que contêm objetos. Isso ocorre porque, ao

lidar com objetos, o operador = funciona por referência. O que realmente acontece pode ser

descrito da seguinte forma:

Uma variável myName é criada e recebe o valor de um objeto que possui uma propriedade

chamada firstName. firstName tem o valor de “Carlos”. É alocado um pedaço em memória no

JavaScript para myName e o objeto que ele contém.

Uma variável identity é criada, apontando uma referência para myName. Não há espaço em

memória dedicado ao valor identity. Ele apenas aponta para o valor do myName.

Alteramos o valor da propriedade firstName em myName para “Carla”, ao invés de “Carlos”.

Quando logamos myName.firstName, ele exibe o novo valor, que é esperado. Mas quando nós

logamos identity.firstName, ele também exibe o novo valor de myName.firstName, “Carla”.

Isso acontece porque identity.firstName apenas aponta para o lugar em memória

de myName.firstName.

https://braziljs.org/blog/diferencas-entre-valor-e-referencia-em-javascript/ 3/5
08/03/2019 Diferenças entre "Valor" e "Referência" em JavaScript - BrazilJS

AO TRABALHAR COM OBJETOS, O OPERADOR = CRIA UM ALIAS PARA O OBJETO ORIGINAL, ELE NÃO CRIA

UM NOVO OBJETO. ISSO É O QUE “POR REFERÊNCIA” SIGNIFICA.

2. PASSANDO VALORES PRIMITIVOS E OBJETOS PARA UMA FUNÇÃO

DADOS DE TIPOS PRIMITIVOS SÃO PASSADOS PARA UMA FUNÇÃO COMO VALOR

Se você alterar o valor de um dado de tipo primitivo dentro de uma função, essa alteração

não afetará a variável no escopo externo:

var myName = "Carlos";

function myNameIs(aName){ aName = "Carla"; }

myNameIs(myName);

console.log(myName); // "Carlos"

Mesmo que mudando a variávelmyName dentro da função myNameIs, quando logamos, depois de

chamar a função, ela ainda possui o valor “Carlos”. Isso ocorre porque quando os tipos

primitivos são passados, eles são passados como valor.

Estamos passando uma cópia de myName: qualquer coisa que você faça para myNamedentro do

corpo da função não afetará myName no escopo global, porque você está passando uma cópia

de myName e não a variável myName original.

OBJETOS SÃO PASSADOS PARA UMA FUNÇÃO COMO REFERÊNCIA

Quando você está passando algo por referência, você está passando algo que aponta para

outra coisa, e não uma cópia do objeto. Portanto, como o JavaScript passa objetos por

referência, quando você altera uma propriedade desse objeto dentro da função, a alteração

será refletida no escopo externo:

var myName = {};

function myNameIs(aName){ aName.firstName = "Carla"; }

myNameIs(myName);
https://braziljs.org/blog/diferencas-entre-valor-e-referencia-em-javascript/ 4/5
08/03/2019 Diferenças entre "Valor" e "Referência" em JavaScript - BrazilJS

console.log(myName); // Object {firstName: "Carla"}

Logando a variável myName depois de ter invocado a função myNameIs, irá mostrar um objeto

com uma chave firstName com um valor igual a “Carla”. O objeto mudou no escopo global

quando o passamos para a função.

Isso ocorre porque quando você passa um objeto para a função, você não está passando uma

cópia. Você está passando algo que aponta para o objeto myName. Então, quando você altera

uma propriedade desse objeto na função, você está mudando a propriedade do objeto no

escopo externo.

Mas há uma coisa com a qual você deve prestar atenção:

var myName = { firstName: "Carla" };

function myNameIs(aName){ aName = { nickName: "Carlita" }; }

myNameIs(myName);

console.log(myName); // Object {firstName: "Carla"}

Aqui logamos o valor da variável myName no escopo externo, e verificamos que não foi

adicionado uma propriedade nickName ao objeto. Por quê? Se você olhar com atenção, o que

estamos tentando fazer na função é reatribuir o objeto myName com um novo valor.

Você não pode alterar onde myName aponta, você só pode alterar uma propriedade dentro do

objeto myName, para qualquer outra coisa:

var myName = { firstName: "Carla" };

function myNameIs(aName){ aName.nickName = "Carlita"; }

myNameIs(myName);

console.log(myName); // Object {firstName: "Carla", nickName: "Carlita"}

CRÉDITOS
GRASP “BY VALUE” AND “BY REFERENCE” IN JAVASCRIPT, escrito originalmente por LÉNA FAURE

TAGS

https://braziljs.org/blog/diferencas-entre-valor-e-referencia-em-javascript/ 5/5