Funções

Escreva function square(n) { return n * n; } uma vez, e square(4) dá 16, square(9) dá 81, e assim por diante para qualquer número que você passar.

Dando nome a um trabalho

Você já usou funções escritas por outras pessoas: console.log, Math.round e toUpperCase são todas funções. Uma função é um bloco de código com nome que faz um trabalho. Você a define uma vez e depois a chama, pelo nome, quantas vezes quiser. As funções evitam que você copie as mesmas linhas de um lado para o outro, e deixam você pensar no programa em pedaços maiores: "calcular a gorjeta, depois dividir a conta" em vez de uma lista longa de contas.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // mostra Hello, Ana!
console.log(greet("Ji"));    // mostra Hello, Ji!

A definição começa com a palavra-chave function, depois o nome da função, depois uma lista de parâmetros entre parênteses. Um parâmetro é uma variável que recebe um valor quando a função é chamada; aqui ele é name. O corpo entre chaves faz o trabalho. Quando você chama greet("Ana"), o valor "Ana", chamado argumento, é colocado no parâmetro name, e o corpo roda.

return devolve um valor

A palavra-chave return encerra a função e manda um valor de volta para onde a função foi chamada. A chamada greet("Ana") é uma expressão, e o valor dela é o que foi devolvido. É por isso que ela pode ficar dentro de um console.log, ou dentro de um cálculo, ou ser guardada numa variável: const msg = greet("Ana");.

Devolver um valor e mostrá-lo são coisas diferentes, e iniciantes costumam confundir as duas. Uma função que só chama console.log mostra algo na tela, mas não devolve nada. A chamada dela é avaliada como undefined, então você não pode usar o resultado num cálculo. Como regra, deixe as funções devolverem resultados e deixe o código que as chama decidir se mostra.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // mostra 50
addPrint(2, 3);      // mostra 5, mas não devolve nada que se possa usar

return também para a função na hora. As linhas depois dele no mesmo caminho não rodam. Isso permite tratar casos especiais logo no começo: if (n < 0) return "negative"; no topo de uma função, com o caso normal escrito embaixo.

Vários parâmetros e valores padrão

Uma função pode receber vários parâmetros, separados por vírgulas, e os argumentos são associados em ordem: em add(2, 3), a é 2 e b é 3. Se uma chamada deixa de fora um argumento, aquele parâmetro fica undefined. Você pode dar a um parâmetro um valor padrão, usado quando nada é passado: function tip(bill, rate = 0.15) usa 0.15, a não ser que quem chama forneça outra taxa.

Arrow functions

O JavaScript moderno também tem um jeito mais curto de escrever funções pequenas, a arrow function (função seta). const square = (n) => n * n; quer dizer o mesmo que a função square da abertura. Quando o corpo é uma única expressão, o valor dela é devolvido automaticamente, sem chaves e sem a palavra return. Você vai ver arrow functions em todo código moderno.

O que é declarado dentro fica dentro

Parâmetros e variáveis declarados dentro de uma função só existem lá dentro. Isso se chama escopo. Duas funções diferentes podem ter cada uma uma variável chamada total sem interferir uma na outra, e o código fora de uma função não enxerga as variáveis privadas dela. Uma função pode ler variáveis declaradas fora dela, mas as funções mais limpas recebem tudo o que precisam pelos parâmetros e devolvem tudo pelo return, para que você consiga entendê-las sozinhas.