Function Declaration em JavaScript: sintaxe e hoisting

O que é uma function declaration em JavaScript

Sempre que você quer dar um nome a um bloco de lógica e reaproveitá-lo, a saída é criar uma função. A forma mais antiga e direta de declarar função em JavaScript é a function declaration — a palavra-chave function seguida de um nome.

Lendo da esquerda para a direita:

• function é a palavra-chave que inicia a declaração.
• greet é o nome da função.
• (name) é a lista de parâmetros — as entradas que a função recebe.
• O bloco entre chaves é o corpo.
• greet("Ada") é uma chamada. O JavaScript executa o corpo com name recebendo o valor "Ada".

Definir uma função não a executa. Chamá-la sim.

Parâmetros e argumentos

O termo parâmetro se refere ao nome que aparece dentro da definição da função. Já argumento é o valor que você passa na hora de chamar. No dia a dia, muita gente usa os dois como sinônimos, mas a diferença faz falta quando você precisa entender uma mensagem de erro.

Aqui, base e exponent são parâmetros. Já 2 e 10 são argumentos. O JavaScript faz a associação na ordem: o primeiro argumento vai para o primeiro parâmetro, e assim por diante.

Diferente de outras linguagens, o JavaScript não reclama se você passar a quantidade errada de argumentos. Os que faltam viram undefined; os que sobram são simplesmente ignorados. Isso traz flexibilidade, mas às vezes vira uma armadilha — vamos ver valores padrão e rest parameters mais pra frente.

return: devolvendo um valor da função

O console.log escreve na saída. Já o return devolve um valor para quem chamou a função, pra que possa ser usado depois:

Sem return, a função devolve undefined:

O return também encerra a função na mesma hora. Usar return logo no início é a forma padrão de tratar casos de borda antes de chegar na lógica principal:

Os retornos antecipados evitam que o corpo principal vire aquela pirâmide de if/else.

Hoisting: dá pra chamar a função antes de declarar

Aqui tem um detalhe que costuma pegar de surpresa quem vem de outras linguagens. As declarações de função sofrem hoisting — ou seja, o JavaScript move essas declarações para o topo do escopo antes de executar qualquer código. Na prática, você consegue chamar uma função em uma linha acima de onde ela foi declarada:

Esse código roda sem problemas. Antes da execução, o motor faz uma varredura do escopo, registra square como função e só depois começa a rodar as instruções de cima para baixo.

Essa é uma diferença real de comportamento entre function declarations e as outras formas de criar função (function expressions, arrow functions). Essas outras sofrem hoisting como se fossem variáveis — o nome é reconhecido, mas o valor só é atribuído quando a linha executa. Já já a gente volta nesse detalhe.

De qualquer forma, a maioria dos guias de estilo recomenda declarar a função antes de chamá-la. O hoisting é uma rede de segurança, não um estilo para você se apoiar.

Function declaration vs function expression

Uma function declaration é uma instrução que se sustenta sozinha. Já uma function expression aparece onde se espera um valor — normalmente depois do sinal de igual, numa atribuição:

Ambas produzem funções que podem ser chamadas. As diferenças são:

• Declarações sofrem hoisting por completo. Já as expressões seguem as regras de hoisting da variável à qual foram atribuídas (const e let ficam na temporal dead zone até a linha executar).
• Declarações precisam ter nome. Expressões podem ser anônimas, mas nomeá-las ajuda bastante no stack trace.
• Declarações não podem aparecer em qualquer lugar. Em strict mode, um function foo() {} dentro de um bloco if se comporta de forma inconsistente entre engines — nesse caso, prefira uma expressão.

Para a maioria das funções auxiliares no topo do arquivo, uma declaração fica mais legível. Já para funções passadas como argumento ou atribuídas a propriedades, o caminho comum é usar uma expressão (ou uma arrow function).

Nomenclatura e estilo

O nome de uma função é uma promessa sobre o que ela faz. Gastar alguns caracteres a mais para escolher um nome descritivo se paga na primeira vez que alguém precisa ler aquele código.

Algumas convenções que vale a pena adotar:

• Nomes de função devem ser verbos: fetchProfile, computeTotal, sendEmail.
• Use camelCase — é o padrão do JavaScript.
• Funções que retornam booleano costumam começar com is, has ou can: isValid, hasAccess, canEdit.

A ideia é que a chamada da função soe como uma frase quando você lê o código.

Um exemplo prático de função em JavaScript

Juntando tudo — parâmetros, return antecipado e um nome descritivo:

Uma declaração, um guard clause e um return bem claro. Essa estrutura dá conta da maioria das funções que você vai escrever no dia a dia.

A seguir: Arrow Functions

A function declaration é o formato mais tradicional, mas o JavaScript moderno usa bastante uma sintaxe mais curta — as arrow functions — principalmente em callbacks e funções de uma linha. A cara é outra, o comportamento do this também muda, e é exatamente sobre isso que a próxima página fala.