Parâmetros de Função - JavaScript

Uma função em JavaScript pode aceitar parâmetros. Os parâmetros são uma maneira de passar dados para a função. Eles são especificados entre parênteses após o nome da função.

Por exemplo, vamos definir a função mais simples que aceita um parâmetro:

function print(message) {
    console.log(message);
}
 
print("Hello JavaScript");
print("Hello Programício");
print("Function in JavaScript");

A função print() aceita um parâmetro - message. Portanto, ao chamar a função, podemos passar um valor para ele, por exemplo, uma certa string:

Os valores passados aos parâmetros também são chamados de argumentos.

Além disso, ao contrário de algumas outras linguagens de programação, podemos optar por não passar valores aos parâmetros. Por exemplo:

function print(message) {
    console.log(message);
}
print();

Se nenhum valor for passado ao parâmetro, ele terá o valor undefined.

Se a função aceita vários parâmetros, eles são listados separados por vírgulas:

function sum(a, b) {
    const result = a + b;
    console.log(result);
}
 
sum(2, 6);          // 8
sum(4, 5);          // 9
sum(109, 11);       // 120

Ao chamar uma função com vários parâmetros, os valores são passados aos parâmetros por posição. Ou seja, o primeiro valor é passado ao primeiro parâmetro, o segundo valor ao segundo parâmetro e assim por diante. Por exemplo, na chamada:

O número 2 é passado para o parâmetro a e o número 6 para o parâmetro b.

Passando um array como parâmetro e o operador spread

É conveniente manter alguns dados relacionados em forma de array. E pode surgir a necessidade de passar todo esse conjunto de dados para uma função. Em geral, podemos passar um array como parâmetro e acessar seus elementos individuais dentro da função:

function printPerson(person) {
    console.log("Name:", person[0]);
    console.log("Age:", person[1]);
    console.log("Email:", person[2]);
    console.log("=========================");
}
const tom = ["Tom", 39, "tom@example.com"]; 
const bob = ["Bob", 43, "bob@example.com"]; 
 
printPerson(tom);
printPerson(bob);

Neste caso, a função printPerson aceita um array, que se presume ter três elementos. E dentro da função ocorre o acesso a esses elementos.

Mas considere outra situação, quando a função aceita dados na forma de parâmetros separados. Nesse caso, é mais conveniente usar o operador spread:

function printPerson(username, age, email) {
    console.log("Name:", username);
    console.log("Age:", age);
    console.log("Email:", email);
    console.log("=========================");
}
 
const tom = ["Tom", 39, "tom@example.com"]; 
const bob = ["Bob", 43, "bob@example.com"]; 
 
printPerson(...tom);
printPerson(...bob);

Para passar sequencialmente os elementos do array para os parâmetros da função, antes do nome do array é indicado o operador spread:

Isso é o mesmo que se tivéssemos escrito:

mas o operador spread permite fazer a transmissão dos valores de forma mais concisa.

Parâmetros opcionais e valores padrão

Uma função pode aceitar vários parâmetros, mas alguns ou todos eles podem ser opcionais. Se nenhum valor for passado para os parâmetros, eles terão o valor undefined por padrão. No entanto, às vezes é necessário que os parâmetros tenham certos valores, por exemplo, valores padrão. Antes do padrão ES6, era necessário verificar se os valores dos parâmetros eram undefined:

function sum(x, y) {
    if(y === undefined) y = 5;
    if(x === undefined) x = 8;
    const z = x + y;
    console.log(z);
}
sum();          // 13
sum(6);         // 11
sum(6, 4)       // 10

Aqui, a função sum() aceita dois parâmetros. Ao chamar a função, podemos verificar seus valores. Ao mesmo tempo, não é necessário passar valores para esses parâmetros ao chamá-la. Para verificar a presença de um valor nos parâmetros, compara-se com o valor undefined.

Também podemos definir diretamente valores padrão para os parâmetros:

function sum(x = 8, y = 5) {
    const z = x + y;
    console.log(z);
}
sum();      // 13
sum(6);     // 11
sum(6, 4)   // 10

Se nenhum valor for passado para os parâmetros x e y, eles assumem os números 8 e 5 respectivamente. Esse método é mais conciso e intuitivo do que comparar com undefined.

Além disso, o valor do parâmetro padrão pode ser derivado, representando uma expressão:

function sum(x = 8, y = 10 + x) {
    const z = x + y;
    console.log(z);
}
sum();      // 26
sum(6);     // 22
sum(6, 4)   // 10

Neste caso, o valor do parâmetro y depende do valor de x.

Funções com um número arbitrário de parâmetros

JavaScript permite definir as chamadas funções variádicas, ou funções com um número arbitrário de parâmetros. Para isso, diversos instrumentos podem ser usados.

Objeto arguments

Quando necessário, podemos obter todos os parâmetros passados por meio do objeto arguments, disponível dentro da função:

function sum() {
    let result = 0;
    for(const n of arguments)
        result += n;
    console.log(result);
}
sum(6);             // 6
sum(6, 4)           // 10
sum(6, 4, 5)        // 15

Mesmo que não tenhamos especificado nenhum parâmetro ao definir a função, ainda podemos passá-los e obter seus valores através de arguments.

Podemos até definir os parâmetros de maneira explícita:

function sum(a, b, c) {
    console.log("a =", a);
    console.log("b =", b);
    console.log("c =", c);
 
    let result = 0;
    for(const n of arguments)
        result += n;
    console.log("result =", result);
}
sum(6, 4, 5, 8)     // 23

Apesar de a função formalmente aceitar 3 parâmetros, podemos passar mais argumentos e obtê-los através do array arguments. Saída do console do programa:

a = 6
b = 4
c = 5
result = 23

Embora possamos iterar sobre o objeto arguments como se fosse um array, ele não é um array. No entanto, podemos obter seu tamanho usando a propriedade length e acessar os argumentos passados à função usando índices:

function sum(nums) {
    let result = 0;  // resultado da função
    if(arguments.length >=1)     // se pelo menos um parâmetro foi passado
    {    
        result = result + arguments[0]; // acessamos o primeiro parâmetro
    }
    if(arguments.length >=2) // se pelo menos dois parâmetros foram passados
    {    
        result = result + arguments[1]; // acessamos o segundo parâmetro
    }
    console.log("result =", result);
    }
 
sum(6)          // result = 6
sum(6, 5)       // result = 11
sum(6, 5, 4)    // result = 11 - o terceiro parâmetro não é considerado

Operador Rest

Com o operador ... (operador rest), também é possível passar um número variável de valores:

function sum(...numbers) {
    let result = 0;
    for(const n of numbers)
        result += n;
    console.log(result);
}
sum(6, 4, 5)     // 15

Neste caso, o parâmetro ...numbers indica que uma quantidade variável de valores pode ser passada em seu lugar. Na própria função, numbers representa efetivamente um array dos valores passados, que podemos acessar. No entanto, apesar disso, ao chamar a função, não é um array que é passado, mas sim valores individuais.

Parâmetros rest podem ser combinados com parâmetros comuns:

function display(season, ...temps) {
    console.log(season);
    for(index in temps) {
        console.log(temps[index]);
    }
}
display("Primavera", -2, -3, 4, 2, 5);
display("Verão", 20, 23, 31);

Aqui, o primeiro valor passado para a função será interpretado como valor para o parâmetro season, e todos os outros valores irão para o parâmetro temps.

Saída do console:

Primavera
-2
-3
4
2
5
Verão
20
23
31

Array como Parâmetro

O terceiro método de passar um número indefinido de dados envolve passá-los por meio de um parâmetro-array. Embora formalmente tenhamos apenas um parâmetro (o número de parâmetros é definido), ainda assim o número de dados específicos neste array é indefinido (como no caso do array arguments):

function sum(numbers) {
    let result = 0;
    for(const n of numbers)
        result += n;
    console.log("result =", result);
}
const nums = [6, 4, 5, 8];
sum(nums)     // result = 23

Funções como parâmetros

Funções podem atuar como parâmetros de outras funções:

function sum(x, y) {
    return x + y;
}
 
function subtract(x, y) {
    return x - y;
}
 
function operation(x, y, func) {
    const result = func(x, y);
    console.log(result);
}
 
console.log("Sum");
operation(10, 6, sum);  // 16
 
console.log("Subtract");
operation(10, 6, subtract); // 4

A função operation recebe três parâmetros: x, y e func. func representa uma função, e no momento da definição de operation, não importa qual será essa função. O único conhecimento é que func pode receber dois parâmetros e retornar um valor, que é então exibido no console do navegador. Portanto, podemos definir diferentes funções (por exemplo, as funções sum e subtract neste caso) e passá-las na chamada de operation.