Compreendendo a passagem por valor do JavaScript

Resumo : Este tutorial explica como funciona a passagem por valor do JavaScript e fornece alguns exemplos de passagem de valores primitivos e de referência para uma função.

Antes de prosseguir com este tutorial, você deve ter um bom conhecimento dos valores primitivos e de referência e das diferenças entre eles .

JavaScript passagem por valor ou passagem por referência

Em JavaScript, todos os argumentos de função são sempre passados por valor. Isso significa que o JavaScript copia os valores das variáveis nos argumentos da função.

Quaisquer alterações feitas nos argumentos dentro da função não refletem as variáveis passadas fora da função. Em outras palavras, as alterações feitas nos argumentos não são refletidas fora da função.

Se os argumentos da função forem passados por referência, as alterações nas variáveis que você passa para a função serão refletidas fora da função. Isso não é possível em JavaScript.

Passagem por valor de valores primitivos

Vamos dar uma olhada no exemplo a seguir.

function square(x) {
    x = x * x;
    return x;
}

let y = 10;
let result = square(y);

console.log(result); // 100 
console.log(y); // 10 -- no changeLinguagem de código:  JavaScript  ( javascript )

Como funciona o roteiro.

Primeiro, defina uma square()função que aceite um argumento x. A função atribui o quadrado de xao xargumento.

A seguir, declare a variável ye inicialize seu valor para 10:

Em seguida, passe a yvariável para a square()função. Ao passar a variável y para a square()função, o JavaScript copia y o valor para a xvariável.

Depois disso, a square()função altera a xvariável. No entanto, isso não afeta o valor da yvariável porque xe ysão variáveis separadas.

Finalmente, o valor da yvariável não muda após a square()conclusão da função.

Se o JavaScript usasse a passagem por referência, a variável y mudaria para 100após chamar a função.

Passagem por valor de valores de referência

Não é óbvio ver que os valores de referência também são passados por valores. Por exemplo:

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

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

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

Como funciona o roteiro:

Primeiro, defina a personvariável que faz referência a um objeto com duas propriedades namee age:

A seguir, defina a increaseAge()função que aceita um objeto obje aumenta a agepropriedade do objargumento em um.

Em seguida, passe o personobjeto para a increaseAge()função:

Internamente, o mecanismo JavaScript cria a objreferência e faz com que essa variável faça referência ao mesmo objeto ao qual a personvariável faz referência.

Depois disso, aumente a agepropriedade em um dentro da increaseAge()função através da objvariável

Por fim, acessando o objeto através da personreferência:

Parece que o JavaScript passa um objeto por referência porque a alteração no objeto é refletida fora da função. No entanto, este não é o caso.

Na verdade, ao passar um objeto para uma função, você está passando a referência desse objeto, não o objeto real. Portanto, a função pode modificar as propriedades do objeto através da sua referência.

No entanto, você não pode alterar a referência passada para a função. Por exemplo:

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

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

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

Saída:

{ name: 'John', age: 26 }Linguagem de código:  CSS  ( css )

Neste exemplo, a increaseAage()função altera a agepropriedade através do objargumento:

e torna a objreferência outro objeto:

No entanto, a personreferência ainda se refere ao objeto original cuja agepropriedade muda para 26. Em outras palavras, a increaseAge()função não altera a personreferência.

Se este conceito ainda confunde você, você pode considerar os argumentos da função como variáveis locais.