Em JavaScript, os parâmetros de funções podem ir muito além de simples listas de variáveis. Recursos modernos como valores padrão, rest parameters e desestruturação permitem escrever funções mais robustas, legíveis e flexíveis. Nesta aula, exploraremos cada um desses conceitos em detalhes, com exemplos práticos que mostram como aplicá-los no dia a dia.

Dominar esses recursos é essencial para escrever código JavaScript moderno, evitando verificações manuais de undefined, lidando com argumentos variáveis e extraindo dados de objetos e arrays de forma concisa. Vamos começar!

Valores padrão

Antes do ES6, para definir valores padrão para parâmetros, precisávamos verificar manualmente se o argumento era undefined e então atribuir um valor. Com o ES6, podemos definir valores padrão diretamente na declaração da função, tornando o código mais limpo e seguro.

Um valor padrão é usado quando o argumento correspondente é undefined (ou omitido). Note que valores como null ou false não disparam o valor padrão; apenas undefined o faz. Além disso, os valores padrão podem ser expressões, que são avaliadas no momento da chamada da função.

// Exemplo básico
function saudacao(nome = "Visitante") {
  return `Olá, ${nome}!`;
}

console.log(saudacao()); // Olá, Visitante!
console.log(saudacao("Maria")); // Olá, Maria!

// Valor padrão com expressão
function calcularPreco(preco, taxa = 0.1, desconto = preco * 0.05) {
  return preco + preco * taxa - desconto;
}

console.log(calcularPreco(100)); // 100 + 10 - 5 = 105
console.log(calcularPreco(100, 0.2)); // 100 + 20 - 5 = 115

// Valor padrão usando função
function obterHora() {
  return new Date().getHours();
}

function saudacaoComHora(hora = obterHora()) {
  return hora < 12 ? "Bom dia" : "Boa tarde";
}

console.log(saudacaoComHora()); // depende da hora atual

É importante notar que os valores padrão são avaliados da esquerda para a direita, e podem referenciar parâmetros anteriores. Além disso, o valor padrão só é usado quando o argumento é undefined, não quando é null ou outro valor falsy.

Rest parameters

Rest parameters permitem representar um número indefinido de argumentos como um array. Eles são indicados por três pontos (...) seguidos do nome do parâmetro, e devem ser o último parâmetro da função. Isso substitui o antigo objeto arguments, que não é um array de verdade e não possui métodos de array.

Com rest parameters, você pode facilmente coletar todos os argumentos extras em um array, permitindo usar métodos como map, filter, reduce, etc. Além disso, eles funcionam com arrow functions, ao contrário de arguments.

// Exemplo básico
function somar(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

console.log(somar(1, 2, 3)); // 6
console.log(somar(10, 20, 30, 40)); // 100

// Combinando parâmetros fixos com rest
function exibir(nome, ...hobbies) {
  console.log(`${nome} gosta de: ${hobbies.join(", ")}`);
}

exibir("Ana", "ler", "dançar", "cozinhar");
// Ana gosta de: ler, dançar, cozinhar

// Rest com arrow function
const multiplicar = (...args) => args.reduce((acc, val) => acc * val, 1);
console.log(multiplicar(2, 3, 4)); // 24

// Diferença de arguments: arguments não é array
function antigo() {
  console.log(arguments); // objeto array-like
  // arguments.map não funciona
}

function novo(...args) {
  console.log(args); // array de verdade
  args.map(x => console.log(x)); // funciona
}

Lembre-se: rest parameters capturam apenas os argumentos que não foram mapeados por parâmetros anteriores. Se você definir function(a, b, ...rest), os dois primeiros argumentos vão para a e b, e o restante vai para rest.

Desestruturação nos parâmetros

A desestruturação permite extrair dados de objetos ou arrays diretamente nos parâmetros da função, tornando o código mais expressivo e reduzindo a necessidade de acessar propriedades manualmente. Isso é especialmente útil quando você recebe um objeto como argumento e deseja usar apenas algumas de suas propriedades.

A desestruturação pode ser combinada com valores padrão, e também pode ser aninhada para objetos complexos. Além disso, você pode desestruturar arrays da mesma forma.

// Desestruturação de objeto
function saudacao({ nome, idade }) {
  return `Olá, ${nome}! Você tem ${idade} anos.`;
}

const pessoa = { nome: "João", idade: 30 };
console.log(saudacao(pessoa)); // Olá, João! Você tem 30 anos.

// Com valores padrão
function configurar({ url, metodo = "GET", timeout = 3000 } = {}) {
  console.log(`URL: ${url}, Método: ${metodo}, Timeout: ${timeout}`);
}

configurar({ url: "/api" }); // URL: /api, Método: GET, Timeout: 3000
configurar({ url: "/api", metodo: "POST", timeout: 5000 });
// URL: /api, Método: POST, Timeout: 5000
configurar(); // Erro se não usar = {} para valor padrão do objeto

// Desestruturação aninhada
function exibirEndereco({ endereco: { rua, cidade } }) {
  console.log(`Rua: ${rua}, Cidade: ${cidade}`);
}

const usuario = { nome: "Maria", endereco: { rua: "Av. Central", cidade: "São Paulo" } };
exibirEndereco(usuario); // Rua: Av. Central, Cidade: São Paulo

// Desestruturação de array
function primeiroETerceiro([primeiro, , terceiro]) {
  console.log(`Primeiro: ${primeiro}, Terceiro: ${terceiro}`);
}

const arr = [10, 20, 30];
primeiroETerceiro(arr); // Primeiro: 10, Terceiro: 30

// Combinando desestruturação com rest
function listar([primeiro, ...resto]) {
  console.log(`Primeiro: ${primeiro}, Resto: ${resto}`);
}

listar([1, 2, 3, 4]); // Primeiro: 1, Resto: 2,3,4

A desestruturação nos parâmetros é amplamente utilizada em React (props), em funções que recebem opções de configuração e em APIs que retornam objetos. Ela torna a intenção do código mais clara e reduz a repetição.

Boas práticas

  • Sempre que uma função puder receber argumentos opcionais, use valores padrão em vez de verificações manuais.
  • Use rest parameters para funções que aceitam número variável de argumentos, como funções de soma, médias, ou operações em listas.
  • Prefira desestruturação nos parâmetros quando a função receber um objeto com várias propriedades, especialmente se nem todas forem usadas.
  • Evite valores padrão que dependem de efeitos colaterais (como chamadas de API) sem necessidade, pois eles são avaliados a cada chamada.
  • Documente claramente os parâmetros esperados, especialmente quando usar desestruturação com valores padrão.

Referências

Exercícios

  1. Crie uma função chamada cumprimentar que aceite um parâmetro nome com valor padrão "Amigo" e retorne uma saudação personalizada.

    ✓ Resposta:
    function cumprimentar(nome = "Amigo") {
  return `Olá, ${nome}!`;
}

console.log(cumprimentar()); // Olá, Amigo!
console.log(cumprimentar("Ana")); // Olá, Ana!

  2. Escreva uma função media que use rest parameters para calcular a média de qualquer quantidade de números.

    ✓ Resposta:
    function media(...numeros) {
  if (numeros.length === 0) return 0;
  const soma = numeros.reduce((acc, num) => acc + num, 0);
  return soma / numeros.length;
}

console.log(media(10, 20, 30)); // 20
console.log(media(5, 7, 9, 11)); // 8

  3. Crie uma função apresentar que receba um objeto com propriedades nome e idade (desestruturação) e retorne uma frase com esses dados.

    ✓ Resposta:
    function apresentar({ nome, idade }) {
  return `Meu nome é ${nome} e tenho ${idade} anos.`;
}

const pessoa = { nome: "Carlos", idade: 25 };
console.log(apresentar(pessoa)); // Meu nome é Carlos e tenho 25 anos.

  4. Escreva uma função somarComRest que aceite dois números como parâmetros fixos e use rest para coletar o restante dos argumentos, retornando a soma de todos eles.

    ✓ Resposta:
    function somarComRest(a, b, ...outros) {
  const somaInicial = a + b;
  const somaOutros = outros.reduce((acc, num) => acc + num, 0);
  return somaInicial + somaOutros;
}

console.log(somarComRest(1, 2, 3, 4)); // 10
console.log(somarComRest(10, 20)); // 30

  5. Crie uma função infoCliente que receba um objeto com propriedades nome, email e telefone (desestruturação) e exiba as informações no console. Forneça valores padrão para email e telefone como strings vazias.

    ✓ Resposta:
    function infoCliente({ nome, email = "", telefone = "" }) {
  console.log(`Nome: ${nome}`);
  console.log(`Email: ${email}`);
  console.log(`Telefone: ${telefone}`);
}

const cliente = { nome: "Joana", email: "joana@email.com" };
infoCliente(cliente);
// Nome: Joana
// Email: joana@email.com
// Telefone: