Javascript

Funções: declaração, expressão e arrow functions

Nyck Folleman 4 visualizações

Se os laços evitam a repetição de ações, as funções evitam a repetição de código. Elas são o bloco de construção mais importante de qualquer programa JavaScript — e de qualquer linguagem de programação moderna.

Uma função é um trecho de código com nome próprio que você pode chamar quantas vezes quiser, de qualquer lugar do programa. Sem funções, seu código seria uma lista gigante de instruções impossível de manter.

Por que funções existem?

Antes de ver a sintaxe, entenda o problema que elas resolvem:

// Sem funções — repetição de lógica:
const area1 = 5 * 3;
console.log(`Área: ${area1}`);

const area2 = 8 * 4;
console.log(`Área: ${area2}`);

const area3 = 12 * 7;
console.log(`Área: ${area3}`);

// Com função — lógica definida uma vez, usada várias:
function calcularArea(largura, altura) {
  return largura * altura;
}

console.log(`Área: ${calcularArea(5, 3)}`);
console.log(`Área: ${calcularArea(8, 4)}`);
console.log(`Área: ${calcularArea(12, 7)}`);

Muito melhor. Se a lógica mudar, você altera em um único lugar.

Declaração de função (Function Declaration)

A forma mais clássica de criar uma função:

function saudar(nome) {
  console.log(`Olá, ${nome}! Bem-vindo ao curso.`);
}

saudar("Ana");    // Olá, Ana! Bem-vindo ao curso.
saudar("Carlos"); // Olá, Carlos! Bem-vindo ao curso.
  • function é a palavra-chave
  • saudar é o nome da função
  • nome é o parâmetro — uma variável local que recebe o valor passado
  • "Ana" é o argumento — o valor real passado na chamada

Parâmetros e retorno

Uma função pode receber múltiplos parâmetros e retornar um valor com return:

function somar(a, b) {
  return a + b;
}

const resultado = somar(10, 5);
console.log(resultado); // 15

// O return encerra a função imediatamente
function verificarIdade(idade) {
  if (idade < 18) {
    return "Menor de idade.";
  }
  return "Maior de idade.";
}

console.log(verificarIdade(15)); // Menor de idade.
console.log(verificarIdade(22)); // Maior de idade.

Quando uma função não tem return, ela retorna undefined automaticamente.

Parâmetros padrão (default parameters)

Você pode definir valores padrão para parâmetros caso nenhum argumento seja passado:

function cumprimentar(nome = "visitante", periodo = "dia") {
  return `Bom ${periodo}, ${nome}!`;
}

console.log(cumprimentar("Maria", "tarde")); // Bom tarde, Maria!
console.log(cumprimentar("João"));           // Bom dia, João!
console.log(cumprimentar());                 // Bom dia, visitante!

Extremamente útil para criar funções flexíveis sem quebrar o código quando um argumento é omitido.

Expressão de função (Function Expression)

Em JavaScript, funções são cidadãos de primeira classe — isso significa que podem ser atribuídas a variáveis, passadas como argumento e retornadas por outras funções.

const multiplicar = function(a, b) {
  return a * b;
};

console.log(multiplicar(4, 3)); // 12

A diferença prática em relação à declaração: expressões não sofrem hoisting — você não pode chamá-las antes de defini-las no código. Falaremos mais sobre hoisting no Artigo 08.

Arrow Functions — a sintaxe moderna

Introduzida no ES6 (2015), a arrow function é uma forma mais concisa de escrever funções. É a forma que você mais vai ver em código moderno, React, e Node.js:

// Função tradicional:
function dobrar(n) {
  return n * 2;
}

// Arrow function equivalente:
const dobrar = (n) => {
  return n * 2;
};

// Versão ainda mais curta (quando há apenas um return):
const dobrar = (n) => n * 2;

console.log(dobrar(7)); // 14

Quando a função tem apenas um parâmetro, os parênteses são opcionais:

const quadrado = n => n * n;
console.log(quadrado(5)); // 25

Quando não tem parâmetros, os parênteses são obrigatórios:

const dizerOla = () => "Olá!";
console.log(dizerOla()); // Olá!

Comparativo das três formas

// 1. Declaração de função
function somar(a, b) {
  return a + b;
}

// 2. Expressão de função
const somar = function(a, b) {
  return a + b;
};

// 3. Arrow function
const somar = (a, b) => a + b;

// As três fazem a mesma coisa neste caso:
console.log(somar(3, 4)); // 7

Funções dentro de funções

Funções podem chamar outras funções — e é assim que construímos programas complexos a partir de peças simples:

function calcularDesconto(preco, percentual) {
  return preco * (percentual / 100);
}

function calcularPrecoFinal(preco, percentual) {
  const desconto = calcularDesconto(preco, percentual);
  return preco - desconto;
}

const precoFinal = calcularPrecoFinal(200, 15);
console.log(`Preço final: R$ ${precoFinal}`); // Preço final: R$ 170

Cada função faz uma coisa só e faz bem feito. Isso é o começo do que chamamos de clean code — código limpo e fácil de manter.

Funções como argumentos (callbacks)

Uma das características mais poderosas do JavaScript: passar funções como argumento para outras funções. Esse conceito se chama callback e vai aparecer muito nos próximos artigos.

function executarOperacao(a, b, operacao) {
  return operacao(a, b);
}

const soma = (a, b) => a + b;
const subtracao = (a, b) => a - b;
const multiplicacao = (a, b) => a * b;

console.log(executarOperacao(10, 5, soma));          // 15
console.log(executarOperacao(10, 5, subtracao));     // 5
console.log(executarOperacao(10, 5, multiplicacao)); // 50

Você passa a função como se fosse um dado. O JavaScript executa ela no momento certo. Elegante e poderoso.

Boas práticas com funções

1. Nomes descritivos — verbos que explicam a ação:

// ❌ Ruim — nome vago
function calc(x, y) { return x + y; }

// ✅ Bom — nome claro
function calcularTotalPedido(subtotal, frete) {
  return subtotal + frete;
}

2. Uma função, uma responsabilidade:

// ❌ Ruim — faz coisas demais
function processarPedido(pedido) {
  // valida o pedido
  // calcula o total
  // aplica desconto
  // envia email
  // salva no banco
}

// ✅ Bom — cada função tem seu papel
function validarPedido(pedido) { /* ... */ }
function calcularTotal(pedido) { /* ... */ }
function aplicarDesconto(total, cupom) { /* ... */ }

3. Prefira retornar valores a usar efeitos colaterais:

// ❌ Evite modificar variáveis externas dentro da função
let total = 0;
function somar(valor) {
  total += valor; // efeito colateral — difícil de rastrear
}

// ✅ Prefira receber e retornar
function somar(totalAtual, valor) {
  return totalAtual + valor;
}

Tarefa para você

Desafio 1: Crie uma função calcularIMC(peso, altura) que retorne o IMC e uma mensagem de classificação.

// IMC = peso / (altura * altura)
// < 18.5 → Abaixo do peso
// 18.5 a 24.9 → Peso normal
// 25 a 29.9 → Sobrepeso
// >= 30 → Obesidade

console.log(calcularIMC(70, 1.75)); // deve retornar algo como "IMC: 22.9 — Peso normal"

Desafio 2: Reescreva a função acima como arrow function de uma linha (só o cálculo, sem a mensagem).

const calcularIMC = (peso, altura) => ???;

Conclusão

Neste artigo você aprendeu:

  • Por que funções existem e que problema resolvem
  • Declaração de função e seus parâmetros
  • Como usar return para retornar valores
  • Parâmetros padrão para funções flexíveis
  • Expressões de função e a diferença prática
  • Arrow functions e suas variações de sintaxe
  • Funções como argumentos — o conceito de callback
  • Boas práticas essenciais

No próximo artigo vamos explorar os Arrays em profundidade — uma das estruturas de dados mais usadas no JavaScript, com métodos poderosos como map, filter e reduce.

 

📚 Fontes e Referências