Funções JavaScript

Introdução às Funções JavaScript

Uma função é um bloco de código reutilizável que executa uma tarefa específica. Em vez de repetir as mesmas instruções em todo lugar, você as escreve uma vez, dá a elas um nome e as executa sempre que precisar chamando a função. Funções são um dos blocos fundamentais do JavaScript: permitem organizar o código, evitar duplicação e construir programas complexos a partir de pequenas partes testáveis.

Este capítulo aborda como definir funções, passar dados para elas com parâmetros, obter dados de volta com return, e as três formas principais que você verá em código real: declarações de função, expressões de função e arrow functions. Também explica hoisting e escopo — dois comportamentos que surpreendem os iniciantes.

Definindo uma Função

Sintaxe Básica de Função

Uma declaração de função usa a palavra-chave function, seguida de um nome, uma lista separada por vírgulas de parâmetros dentro de parênteses e um corpo de instruções dentro de chaves. O corpo é executado apenas quando a função é chamada — escrita como o nome da função seguido de parênteses.

function greet() {
    console.log("Hello, World!");
}

greet(); // call the function → Outputs: Hello, World!

Definir uma função não faz nada por si só; nada é exibido até que greet() seja executado.

Hoisting de Funções

As declarações de função são içadas (hoisted): o motor as registra antes de qualquer código ser executado, portanto você pode chamar uma declaração mesmo em uma linha acima de onde ela está escrita.

Isso não se aplica a expressões de função ou arrow functions (abordadas abaixo) — essas só estão disponíveis após a linha que as atribui ser executada. Chamá-las antes lança um ReferenceError ou TypeError. Se quiser saber mais sobre o motivo disso acontecer, consulte escopo de variáveis.

Parâmetros e Argumentos de Funções

Um parâmetro é um nome listado na definição da função; um argumento é o valor real que você passa ao chamá-la. Dentro do corpo, os parâmetros se comportam como variáveis locais.

Passando Parâmetros

Se você chamar uma função com menos argumentos do que parâmetros, os ausentes serão undefined em vez de um erro:

Parâmetros Padrão

Para evitar undefined, o ES6 permite dar a um parâmetro um valor padrão, usado apenas quando nenhum argumento (ou undefined) for passado.

Parâmetros Rest

Um parâmetro rest (escrito ...name) coleta qualquer número de argumentos restantes em um array real, para que uma função possa aceitar um número variável de entradas. Ele deve ser o último parâmetro.

Os parâmetros rest compartilham sintaxe com o operador spread, mas fazem o trabalho oposto. Consulte parâmetros rest e sintaxe spread para uma visão completa.

A Instrução Return

Uma função pode enviar um valor de volta para quem a chamou com return. O valor retornado pode ser armazenado em uma variável ou usado diretamente em uma expressão.

return também interrompe a função imediatamente — qualquer código após ele é ignorado. Uma função sem return (ou um return; simples) produz undefined.

Funções Anônimas e Expressões

Expressões de Função

Uma expressão de função armazena uma função em uma variável. Ao contrário de uma declaração, a função é criada quando a execução chega àquela linha, portanto ela não é içada — você só pode chamá-la depois.

Funções Anônimas

A função acima não tinha nome — isso é uma função anônima. Elas são comuns como argumentos para outras funções, por exemplo callbacks passados para métodos de array como forEach ou para setTimeout. (Veja introdução a callbacks.)

Arrow Functions no ES6

Sintaxe das Arrow Functions

O ES6 introduziu as arrow functions, uma sintaxe concisa para expressões de função. Quando o corpo é uma única expressão, você pode omitir as chaves e a palavra-chave return — o valor da expressão é retornado automaticamente.

Arrow Functions Não Têm this Próprio

Arrow functions não vinculam seu próprio this; elas o herdam do escopo circundante. Isso as torna ideais como callbacks dentro de métodos de objeto, onde uma função regular perderia o this do objeto.

Para saber mais sobre como this é resolvido dentro de métodos, leia métodos de objeto, this.

Escolhendo a Forma Certa

• Declaração de função (function foo() {}) — içada, adequada para utilitários nomeados de nível superior que você pode chamar de qualquer lugar.
• Expressão de função (const foo = function() {}) — criada no lugar; útil quando você quer atribuir ou passar uma função condicionalmente.
• Arrow function (const foo = () => {}) — sintaxe mais curta, sem this próprio; preferida para callbacks curtos.

Funções também são a base para padrões mais avançados como closures e recursão.

Conclusão

Funções permitem que você empacote a lógica uma vez e a reutilize em todo lugar. Você viu como defini-las, passar argumentos (incluindo padrões e parâmetros rest), retornar resultados e as diferenças entre declarações, expressões e arrow functions — além dos comportamentos de hoisting e this que as distinguem. Dominar essas formas é um passo fundamental para escrever JavaScript limpo e de fácil manutenção.

Prática