Parâmetros e return

Funções ganham superpoderes quando recebem entradas diferentes e devolvem um resultado para quem as chamou. É o que as torna flexíveis e realmente úteis.

Estudar esta lição interativa →

A função da lição passada sempre fazia exatamente a mesma coisa. Útil, mas limitado. As funções que valem ouro são as que recebem informação, trabalham com ela e devolvem um resultado. Pense numa função que soma dois números: ela precisa saber quais números, e precisa te entregar a soma de volta. Essas duas pontas têm nome: as entradas são os parâmetros, e a saída é o return.

A melhor imagem para isso é uma máquina: você coloca matéria-prima de um lado, ela processa lá dentro, e do outro lado sai um produto. A função é a máquina; os parâmetros são o que entra; o return é o que sai:

A função como máquina: os valores 4 e 6 entram pelos parâmetros, o corpo os processa (soma) e o return manda o resultado 10 de volta para quem chamou a função.

Os parâmetros são nomes que você declara entre os parênteses, na definição. Eles funcionam como variáveis que já nascem preenchidas com o que for passado na chamada. Em function somar(a, b), o a e o b são parâmetros; quando você chama somar(4, 6), o a vira 4 e o b vira 6 dentro da função. Rode e acompanhe:

// Funções ficam poderosas com parâmetros (entradas) e return (saída).
function somar(a, b) {
  return a + b;
}

const resultado = somar(4, 6);
console.log(resultado); // 10
console.log(somar(100, 50)); // 150

// 'return' devolve um valor para quem chamou a função.

Agora o return, que faz duas coisas ao mesmo tempo. Primeiro, ele define o valor que a função entrega para quem a chamou, tanto que dá para guardar esse valor numa variável (const resultado = somar(4, 6)) ou usá-lo direto numa conta. Segundo, ele encerra a função na hora: qualquer linha depois do return não roda. É a função dizendo "terminei, aqui está a resposta".

return não é a mesma coisa que console.log

Essa confusão pega quase todo mundo. O console.log apenas mostra algo na tela, para você ler; ele não devolve nada que o programa possa reaproveitar. O return entrega um valor de volta para o código que chamou a função, para ser usado adiante. Uma função que faz console.log(a + b) exibe a soma e pronto; uma que faz return a + b te dá a soma para você guardar, somar de novo, enviar para outro lugar. Na dúvida entre os dois: se outra parte do programa precisa do valor, é return.

Por fim, um formato que você vai ver em todo lugar no JavaScript de hoje: as arrow functions (funções de seta). São um jeito mais curto de escrever funções, usando um símbolo novo, a seta =>, formada por um sinal de igual colado num sinal de maior que. A ideia é a mesma (entradas, corpo, saída), só muda a aparência, que fica bem mais enxuta:

// Arrow function: um jeito mais curto e moderno de escrever funções.
const dobro = (x) => x * 2;
console.log(dobro(8)); // 16

// Com mais de uma linha, use chaves e return:
const saudacao = (nome) => {
  const msg = "Oi, " + nome + "!";
  return msg;
};
console.log(saudacao("Lucas"));

As duas formas convivem

Não se preocupe em decorar qual usar agora. A function tradicional e a arrow fazem essencialmente a mesma coisa, e você vai encontrar as duas o tempo todo em código real. Por ora, o importante é reconhecer que const dobro = (x) => x * 2 é apenas uma função com outro visual. As diferenças mais finas entre elas aparecem mais para a frente.

// Sua vez! Faça triplo RETORNAR o número vezes 3.
function triplo(n) {
  // troque esta linha: use return para devolver n * 3
  console.log(n);
}

console.log(triplo(5)); // deve mostrar 15

Faça a função retornar o valor e clique em Rodar.

← Voltar ao índice do curso