JavaScript: Funções em JavaScript

Última atualização: 2026-10-13

Funções são blocos de código reutilizáveis — escreva uma vez, use infinitamente. Pense nelas como receitas: defina os passos uma vez, depois siga-os toda vez que cozinhar. Um programador que não usa funções é como alguém reinventando cada prato do zero — exaustivo e propenso a erros.

Declarações relacionadas：setTimeout forEach filter return const let var map

1. O Que É uma Função?

Uma função "encapsula" um pedaço de lógica, dá um nome a ela e permite que você a chame quando precisar:

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Chamando Funções</title></head>
<body>
<div id="output"></div>
<script>
function sayHello() {
  document.getElementById('output').textContent += 'Olá!\n';
}

sayHello();
sayHello();
</script>
</body>
</html>

Benefícios das funções:

• Reutilizabilidade: escreva uma vez, chame em qualquer lugar
• Encapsulamento: esconde complexidade, expõe apenas a interface
• Manutenibilidade: altere em um lugar, todos os chamadores se beneficiam

Existem duas maneiras principais de criar funções:

<script>
// Declaração de função
function greet(name) {
  return `Olá, ${name}!`;
}

// Expressão de função
let greet2 = function(name) {
  return `Olá, ${name}!`;
};
</script>

Diferença-chave: declarações de função são elevadas (hoisted) — você pode chamá-las antes de aparecerem no código. Expressões de função não são elevadas; você deve defini-las primeiro.

<script>
// Declaração de função: chamar antes da definição — funciona
hello();  // Executa sem erro
function hello() { console.log('oi'); }

// Expressão de função: chamar antes da definição — erro
// hi();     // TypeError: hi is not a function
// let hi = function() { console.log('oi'); };
</script>

3. Parâmetros e Parâmetros Padrão

Funções aceitam dados externos através de parâmetros:

<script>
function add(a, b) {
  return a + b;
}
add(1, 2);  // 3
</script>

Parâmetros que você não passa são undefined. O ES6 introduziu parâmetros padrão:

<script>
function greet(name, greeting = 'Olá') {
  return `${greeting}, ${name}!`;
}

greet('Alice');           // 'Olá, Alice!'
greet('Alice', 'Oi');    // 'Oi, Alice!'
</script>

4. Valores de Retorno

return envia um resultado de volta ao chamador e imediatamente para a função:

<script>
function square(n) {
  return n * n;
}

let result = square(5);  // 25
</script>

Uma função sem return (ou com apenas return;) retorna undefined.

<script>
function doNothing() {
  // sem return
}
doNothing();  // undefined
</script>

return     // vira: return; undefined
  obj;     // esta linha nunca executa

5. Arrow Functions (=>)

Arrow functions são uma sintaxe mais curta introduzida no ES6:

<script>
// Função regular
let double = function(n) {
  return n * 2;
};

// Arrow function
let double2 = (n) => n * 2;

// Múltiplas instruções requerem chaves e return explícito
let greet = (name) => {
  let msg = `Olá, ${name}!`;
  return msg;
};
</script>

Regras de sintaxe:

• Parâmetro único: parênteses opcionais — n => n * 2
• Zero ou múltiplos parâmetros: parênteses obrigatórios — () => 'oi', (a, b) => a + b
• Expressão de uma linha: auto-retorna; múltiplas linhas: precisa de {} + return

▶ Exemplo: Uso Básico de Funções

▶ Exemplo: Calculadora Simples

6. Escopo de Função

Variáveis declaradas dentro de uma função são locais — elas só existem dentro daquela função. Isso é escopo:

<script>
function test() {
  let x = 10;    // variável local
  const y = 20;
  var z = 30;
}
test();
// console.log(x);  // ReferenceError: x is not defined
</script>

Funções podem acessar variáveis externas (a base dos closures), mas o código externo não pode acessar variáveis dentro de uma função:

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Escopo de Função</title></head>
<body>
<pre id="output"></pre>
<script>
let global = 'Variável global';

function show() {
  let local = 'Variável local';
  document.getElementById('output').textContent +=
    'Dentro da função — global: ' + global + '\n' +
    'Dentro da função — local: ' + local + '\n';
}
show();
document.getElementById('output').textContent +=
  'Fora da função — global: ' + global + '\n' +
  'Fora da função — local: não acessível (variável local)';
</script>
</body>
</html>

▶ Exemplo: Demonstração de Escopo

7. Introdução a Callbacks

JavaScript permite que você passe uma função como argumento para outra função — a função passada é chamada de callback:

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Callbacks</title></head>
<body>
<pre id="output"></pre>
<script>
function processArray(arr, callback) {
  for (let item of arr) {
    callback(item);
  }
}

let names = ['Alice', 'Bob', 'Charlie'];
processArray(names, function(name) {
  document.getElementById('output').textContent += 'Olá, ' + name + '\n';
});
</script>
</body>
</html>

Você já usou callbacks — os argumentos de forEach, map e filter são todos funções de callback:

<script>
// A função anônima aqui é um callback
[1, 2, 3].forEach(function(n) {
  console.log(n);
});

// Arrow functions tornam mais conciso
[1, 2, 3].forEach(n => console.log(n));
</script>

▶ Exemplo: Callbacks em Ação

Declarações relacionadas：setTimeout forEach filter return const let var map

❓ Perguntas Frequentes

📖 Resumo

• Declarações de função são elevadas; expressões de função não — definir antes de usar é mais seguro
• Parâmetros padrão adicionam flexibilidade; coloque-os no final da lista de parâmetros
• return encerra a função e devolve um valor; sem ele, a função retorna undefined
• Arrow functions (a, b) => a + b são atalhos — de uma linha auto-retorna; múltiplas linhas precisam de {}
• Variáveis declaradas dentro de uma função são locais e invisíveis do lado de fora
• Callbacks = passar uma função como argumento — usado por forEach, setTimeout e muitos outros

📝 Exercícios

1. Escreva uma função isEven(n) que retorna true se um número é par, false caso contrário. Teste com múltiplos valores na página.
2. Escreva uma função formatPrice(preco) que recebe um número e retorna uma string de preço formatada (ex: formatPrice(9.9) retorna "R$9,90"). Use sintaxe de arrow function.
3. Construa um "gerador de saudações": use uma função de callback que recebe um array de nomes e uma função de saudação, depois exiba saudações personalizadas para cada pessoa na página.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós