JavaScript oferece diversas formas de declarar e usar funções, cada uma com características específicas.
A forma tradicional de definir funções, com o identificador function seguido do nome da função.
function somar(a, b) {
return a + b;
}
console.log(somar(5, 3)); // 8Características:
- É hoisted (elevada): pode ser chamada antes de sua declaração no código
- Tem nome obrigatório
- Boa para funções principais do programa
Funções definidas dentro de uma expressão, geralmente atribuídas a uma variável.
const multiplicar = function(a, b) {
return a * b;
};
console.log(multiplicar(4, 2)); // 8Características:
- Não é hoisted como uma função (apenas a variável, se for
var) - O nome da função é opcional (funções anônimas)
- Útil para funções que serão passadas como argumentos
Introduzidas no ES6, são uma sintaxe mais concisa para escrever funções.
// Arrow function básica
const dividir = (a, b) => {
return a / b;
};
// Com um único parâmetro (parênteses opcionais)
const dobrar = a => a * 2;
// Com retorno implícito (sem chaves)
const subtrair = (a, b) => a - b;
console.log(dividir(10, 2)); // 5
console.log(dobrar(4)); // 8
console.log(subtrair(7, 3)); // 4Características:
- Sintaxe mais concisa
- Não possui seu próprio
this(herda do contexto de criação) - Não tem
arguments,superounew.target - Não pode ser usada como construtora (
new) - Ideal para funções curtas e callbacks
Usadas para criar objetos usando o operador new.
function Pessoa(nome, idade) {
this.nome = nome;
this.idade = idade;
this.apresentar = function() {
return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos`;
};
}
const pessoa1 = new Pessoa("Ana", 28);
console.log(pessoa1.apresentar()); // "Olá, meu nome é Ana e tenho 28 anos"Características:
- Usa convenção de nome com inicial maiúscula
- Usado com o operador
new thisrefere-se ao novo objeto criado- Alternativa às classes para criação de objetos (antes do ES6)
Funções definidas como propriedades de objetos.
const calculadora = {
a: 0,
b: 0,
definirValores(a, b) {
this.a = a;
this.b = b;
},
somar() {
return this.a + this.b;
},
multiplicar() {
return this.a * this.b;
}
};
calculadora.definirValores(5, 3);
console.log(calculadora.somar()); // 8Características:
thisrefere-se ao objeto que contém o método- Sintaxe concisa disponível no ES6+ (
metodo(){}em vez demetodo: function(){})
Funções que criam e retornam objetos, sem usar new.
function criarPessoa(nome, idade) {
return {
nome,
idade,
apresentar() {
return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos`;
}
};
}
const pessoa2 = criarPessoa("Carlos", 32);
console.log(pessoa2.apresentar()); // "Olá, meu nome é Carlos e tenho 32 anos"Características:
- Alternativa às funções construtoras e classes
- Não usa
new - Facilita a criação de closures e encapsulamento
Funções que são executadas imediatamente após serem definidas.
(function() {
const mensagem = "Esta função é executada imediatamente";
console.log(mensagem);
})();
// Com parâmetros
(function(texto) {
console.log(`Mensagem: ${texto}`);
})("Olá mundo");Características:
- Cria um escopo isolado
- Evita poluir o escopo global
- Útil para isolar variáveis e evitar conflitos
Funções que podem ser pausadas e retomadas, retornando um iterador.
function* contador() {
let i = 0;
while (true) {
yield i++;
}
}
const gerador = contador();
console.log(gerador.next().value); // 0
console.log(gerador.next().value); // 1
console.log(gerador.next().value); // 2Características:
- Definidas com
function* - Usam
yieldpara pausar e retornar valores - Mantém o estado entre chamadas
- Úteis para criar iteradores e lidar com sequências infinitas
O "hoisting" é um comportamento do JavaScript que move declarações para o topo do escopo atual.
// Function Declaration - hoisted
console.log(soma(2, 3)); // 5 - funciona antes da declaração
function soma(a, b) {
return a + b;
}
// Function Expression - não hoisted da mesma forma
// console.log(subtracao(5, 2)); // Erro: subtracao is not a function
const subtracao = function(a, b) {
return a - b;
};📚 Para uma explicação completa sobre hoisting em JavaScript, incluindo como ele afeta variáveis e funções, consulte o guia dedicado sobre hoisting.
A partir do ES6, é possível definir valores padrão para parâmetros de funções.
function saudar(nome = "Visitante", saudacao = "Olá") {
return `${saudacao}, ${nome}!`;
}
console.log(saudar()); // "Olá, Visitante!"
console.log(saudar("Maria")); // "Olá, Maria!"
console.log(saudar("João", "Bem-vindo")); // "Bem-vindo, João!"