Arrays e Funções - Passagem por Valor e Referência

Neste tutorial de nosso Curso de JavaScript, vamos aprender como trabalhar com arrays em funções, e para isso vamos estudar primeiro o que é passagem por valor e por referência.

Estudar pela apostila em PDF

Passagem por Valor e Passagem por Referência em JavaScript

Quando estudamos variável global, na seção de Função em JS, vimos que uma variável declarada dentro de uma função, só existe dentro dela.

E o mas interessante: quando passamos uma variável para uma função e alteramos essa variável dentro da função, a variável original lá de fora da função não era alterada.

O nome disse é passagem por valor, pois quando passamos uma variável para uma função, é passado na verdade uma cópia dela, vai só o valor, e não a variável original. Por isso que quando alteramos dentro do escopo da função não estamos alterando a variável original, e sim sua cópia dentro da função.

Existe um outro tipo de passagem, que é por referência. Quando fazemos a passagem desse tipo, uma referência, ou seja, um endereço de memória é que é passado para a função.

Nesse endereço, está a variável original. Assim, se a variável for alterada dentro de uma função, ela é alterada originalmente, pois estamos lidando com a variável mesmo, e não uma cópia de seu valor.

A passagem por arrays é sempre por referência. Pois dependendo do tamanho do array, seria muito oneroso fazer uma cópia de todo o vetor para se usar a passagem por valor.

Passando um Array para uma Função em JS

Para passar um array como argumento para uma função, basta passa o nome do array, sem colchetes, apenas o nome, como se fosse uma outra variável qualquer.

No exemplo abaixo, passamos um array:
vetor = [1, 2, 3, 4, 5]

E a função dobra() vai duplicar o valor de cada elemento do array.

O resultado, após a função é:
vator = [2, 4, 6, 8, 10]

Nosso HTML simplesmente chama a main() ao iniciar a tag body:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

Código: script.js

function main()
{
 var vetor = [1, 2, 3, 4, 5];

 document.write("Vetor: " + vetor + "<br />");
 document.write("Chamando a função dobra()..."+ "<br />");
 dobra(vetor);
 document.write("Vetor: " + vetor + "<br />");
}

function dobra (vetor)
{
 for(let i in vetor)
  vetor[i] *= 2;
}

Resultado:
Vetor: 1,2,3,4,5
Chamando a função dobra()...
Vetor: 2,4,6,8,10

Veja que dobramos o valor de cada elemento do array dentro da função dobra.
Como resultado, todo o vetor vai ter valores dobrados.

Note que não precisamos dar um return, pois a variável já é alterada dentro da função.

JavaScript Progressivo