Parâmetros, retorno e callbacks

Valor padrão

function calcularFrete(pesoEmKg, precoPorKgEmCentavos = 350, taxaFixaEmCentavos = 500) {
  return Math.ceil(pesoEmKg) * precoPorKgEmCentavos + taxaFixaEmCentavos;
}

console.log(calcularFrete(8.3)); // → 3650, usando os padrões
console.log(calcularFrete(8.3, 400)); // → 4100

Sem valor padrão, o parâmetro ausente fica undefined: e a conta com undefined vira NaN.

O padrão só entra quando o argumento é undefined. null passa:

function saudar(nome = "visitante") {
  return `Olá, ${nome}`;
}

console.log(saudar()); // → "Olá, visitante"
console.log(saudar(undefined)); // → "Olá, visitante"
console.log(saudar(null)); // → "Olá, null"  ← atenção

Objeto como parâmetro

Quando são muitos, a ordem vira armadilha:

// Quem lembra a ordem?
criarTurma("Robótica", 40, "sabado", "manha", true, 15000);

// Assim não há ordem para lembrar
criarTurma({
  curso: "Robótica",
  capacidade: 40,
  diaDaSemana: "sabado",
  turno: "manha",
  anunciada: true,
  mensalidadeEmCentavos: 15000,
});

function criarTurma({
  curso,
  capacidade = 40,
  diaDaSemana = "sabado",
  turno = "manha",
  anunciada = false,
  mensalidadeEmCentavos = 0,
}) {
  return { curso, capacidade, diaDaSemana, turno, anunciada, mensalidadeEmCentavos };
}

A assinatura vira documentação: dá para ver o que a função aceita e o que é opcional.

Parâmetro rest

function somarTudo(...numeros) {
  return numeros.reduce((soma, n) => soma + n, 0);
}

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

... na assinatura recolhe; na chamada, espalha:

const precos = [1250, 2500, 800];
console.log(somarTudo(...precos)); // → 4550

Devolver mais de um valor

Não dá para devolver dois; mas dá para devolver um objeto com dois:

function analisarCarrinho(itens) {
  const totalEmCentavos = itens.reduce((soma, item) => soma + item.precoEmCentavos, 0);

  return {
    quantidade: itens.length,
    totalEmCentavos,
    mediaEmCentavos: Math.round(totalEmCentavos / itens.length),
  };
}

const { quantidade, totalEmCentavos } = analisarCarrinho(carrinho);

Objeto e não array: com objeto, quem chama pega só o que precisa, pelo nome, sem depender da ordem.

Callback

Uma função passada como argumento:

function processar(itens, transformar) {
  const resultado = [];
  for (const item of itens) {
    resultado.push(transformar(item));
  }
  return resultado;
}

console.log(processar([1, 2, 3], (n) => n * 2)); // → [2, 4, 6]
console.log(processar(["ana", "joão"], (s) => s.toUpperCase())); // → ["ANA", "JOÃO"]

Você já vem usando callbacks desde a aula 9: é o que map, filter e reduce recebem. E é como se responde a eventos:

botao.addEventListener("click", () => {
  console.log("clicou");
});

Passar a função, não chamá-la

// Certo: passa a função
botao.addEventListener("click", mostrarTotal);

// Errado: chama agora e passa o retorno
botao.addEventListener("click", mostrarTotal());

Os parênteses executam. Sem eles, você passa a função para ser chamada depois. Com eles, ela roda na hora e o que fica registrado é o resultado: quase sempre undefined.

Quando é preciso passar argumento, envolva:

botao.addEventListener("click", () => remover(produto.id));

Função que devolve função

function criarFormatador(moeda) {
  return (centavos) =>
    (centavos / 100).toLocaleString("pt-BR", { style: "currency", currency: moeda });
}

const emReais = criarFormatador("BRL");
console.log(emReais(1250)); // → R$ 12,50

A função interna lembra da moeda mesmo depois de a externa ter terminado. Isso se chama closure, e é o que faz callbacks e ouvintes de evento funcionarem.

Exercícios

1. Escreva calcularFrete com dois parâmetros com valor padrão.
2. Chame-a com um, dois e três argumentos.
3. Reescreva uma função de seis parâmetros para receber um objeto.
4. Escreva uma função com ...numeros que devolva a média.
5. Escreva uma que devolva um objeto com três informações e desestruture o resultado.
6. Passe uma arrow function como callback para uma função sua.
7. Registre um ouvinte de clique com parênteses e depois sem. Explique a diferença.

Referências

• Parâmetros padrão - MDN
• Parâmetro rest - MDN
• Closures - MDN - a função que lembra do escopo onde nasceu