Frontend Academy · Aula

Funções: declarações, expressões e funções de seta

Defina funções de três maneiras, entenda o içamento, use parâmetros e valores de retorno e escreva funções de seta concisas.

Funções: declarações, expressões e funções de seta é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são funções?

Funções são blocos reutilizáveis de código. Elas recebem entradas (parâmetros), executam lógica e opcionalmente retornam uma saída. Funções são valores de primeira classe em JavaScript — podem ser atribuídas a variáveis, passadas como argumentos e retornadas por outras funções.

Declarações de funções

Uma declaração de função cria uma função nomeada usando a palavra-chave function. As declarações são elevadas — você pode chamá-las antes de aparecerem no código.

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

Expressões de função

Uma expressão de função atribui uma função a uma variável. Ela não é elevada (a variável é elevada como undefined). As expressões de função podem ser anônimas ou nomeadas.

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

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

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Funções de seta

Funções de seta são uma sintaxe compacta introduzida no ES6. Elas não têm seu próprio this — herdam this do escopo que as envolve. São ótimas para funções de retorno de chamada e funções curtas.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

Parâmetros e argumentos

Parâmetros são os nomes listados na definição da função. Argumentos são os valores passados ao chamar a função. Argumentos extras são ignorados; argumentos ausentes são undefined.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

Parâmetros padrão

O ES6 permite definir valores padrão para parâmetros. O padrão é usado quando o argumento é undefined (inclusive quando não é passado).

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

A instrução return

As funções retornam undefined por padrão. Use return para produzir um valor. Uma função termina no primeiro return que encontra — o código subsequente não é executado.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

Parâmetros rest

O parâmetro rest ...args coleta todos os argumentos restantes em uma matriz. Ele deve ser o último parâmetro. Ele substitui o antigo objeto arguments no código moderno.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Funções como valores (de primeira classe)

As funções podem ser armazenadas em variáveis, passadas para outras funções como argumentos (retornos de chamada) e retornadas por funções. Isso possibilita padrões poderosos, como métodos de matrizes e ouvintes de eventos.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

Funções puras

Uma função pura retorna a mesma saída para as mesmas entradas e não tem efeitos colaterais (nenhuma alteração no DOM, nenhuma chamada de rede e nenhuma mutação global). Funções puras são fáceis de testar, depurar e compreender.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

Expressões de função invocadas imediatamente (IIFE)

Uma IIFE é executada imediatamente quando definida. Historicamente, era usada para criar um escopo privado. Hoje é menos necessária com módulos e escopo de bloco, mas ainda aparece em bases de código antigas.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

Verificação rápida

Qual das afirmações a seguir é verdadeira sobre funções de seta?

Recapitulação: funções do JavaScript

Declarações de função são elevadas. Expressões de função e funções de seta não são. Funções de seta são concisas e não têm seu próprio this. Use parâmetros padrão para lidar com argumentos ausentes. Funções são valores de primeira classe — passe-as livremente.

Perguntas Frequentes

A aula “Funções: declarações, expressões e funções de seta” é grátis?

Sim — o texto completo de “Funções: declarações, expressões e funções de seta” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Funções: declarações, expressões e funções de seta”?

Defina funções de três maneiras, entenda o içamento, use parâmetros e valores de retorno e escreva funções de seta concisas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Funções: declarações, expressões e funções de seta”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Variáveis: let, const, var e escopo
Tipos de dados: string, number, boolean, null e undefined
Funções: declarações, expressões e funções de seta
Fluxo de controle: if, else, switch, for e while

← Voltar para Frontend Academy