</>Codding
JavaScript0/31 lições

Módulo 1 • Fundamentos

Funções, arrow functions e closures

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Funções, arrow functions e closures com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Funções, arrow functions e closures com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Entrada

Reconheça os dados e condições disponíveis.

2

Processamento

Use Funções, arrow functions e closures para transformar a entrada.

3

Saída

Confira o resultado e os casos que podem falhar.

0/6 atividades
1

Entenda o problema

O que é Funções, arrow functions e closures

Função é um bloco com nome que recebe entradas e devolve uma saída. É a ferramenta principal para não repetir código e para testar pedaços isolados do programa.

Cheque seu entendimento

O que uma função sem return devolve?

1 de 5

O que você aprendeu

  • Função é um bloco com nome que recebe entradas e devolve uma saída. É a ferramenta principal para não repetir código e para testar pedaços isolados do programa.
  • desconto tem valor padrão: chamar sem ele funciona. A função devolve o número; quem chama decide imprimir, salvar ou somar.
  • Evite: Esquecer o return e receber undefined/None.
  • Evite: Função que faz cinco coisas diferentes e ninguém consegue reaproveitar.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Funções, arrow functions e closures" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de JavaScriptCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Fundamentos".

Quiz rápido

0/2 • 0 certas

1. O que uma função sem return devolve?

2. Por que preferir retornar em vez de imprimir dentro da função?

Laboratório

1/4

1. Faça funcionar

Laboratório de Funções, arrow functions e closures: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Escreva sua solução e clique em Verificar.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Funções, arrow functions e closures

JavaScript • Módulo 1: Fundamentos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Funções, arrow functions e closures com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Funções, arrow functions e closures com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Funções, arrow functions e closures

Função é um bloco com nome que recebe entradas e devolve uma saída. É a ferramenta principal para não repetir código e para testar pedaços isolados do programa.

Checkpoint: O que uma função sem return devolve? — Resposta: undefined / None

2. Como pensar antes de fazer

Parâmetro é o nome na definição; argumento é o valor passado na chamada. Uma boa função tem poucos parâmetros e uma única responsabilidade — se o nome precisa de um 'e' ('salvaEEnvia'), provavelmente são duas funções.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Funções, arrow functions e closures” resolve.

3. Exemplo completo, do início ao resultado

Retorno encerra a função na hora. Funções que só imprimem são difíceis de testar; prefira retornar o valor e deixar quem chamou decidir o que fazer com ele.

function calcularTotal(precos, desconto = 0) {
  const soma = precos.reduce((acc, p) => acc + p, 0);
  return soma - soma * desconto;   // retorna, não imprime
}

const total = calcularTotal([10, 20, 30], 0.1);
console.log(total);   // 54

// arrow function equivalente
const dobro = (n) => n * 2;
console.log(dobro(21));   // 42
TrechoO que faz
function calcularTotal(precos, desconto = 0) {Cria uma estrutura reutilizável para organizar comportamento.
const soma = precos.reduce((acc, p) => acc + p, 0);Percorre ou transforma uma sequência de valores.
return soma - soma * desconto; // retorna, não imprimeProduz ou devolve o resultado que permite conferir a execução.
}Contribui para a transformação principal mostrada neste exemplo.
const total = calcularTotal([10, 20, 30], 0.1);Cria ou atualiza um valor que será usado pelo restante do exemplo.
console.log(total); // 54Produz ou devolve o resultado que permite conferir a execução.
// arrow function equivalenteComentário de orientação: documenta a intenção sem executar uma ação.
const dobro = (n) => n * 2;Cria ou atualiza um valor que será usado pelo restante do exemplo.

Dica: desconto tem valor padrão: chamar sem ele funciona. A função devolve o número; quem chama decide imprimir, salvar ou somar.

Checkpoint: Por que preferir retornar em vez de imprimir dentro da função? — Resposta: Porque o valor pode ser testado e reaproveitado por quem chamou

4. Do detalhe para o todo

Escopo: variáveis criadas dentro da função só existem lá dentro. Isso é proteção, não limitação — evita que uma parte do programa estrague a outra sem querer.

5. Erros comuns e como corrigi-los

1. Esquecer o return e receber undefined/None. 2. Função que faz cinco coisas diferentes e ninguém consegue reaproveitar. 3. Depender de variáveis globais em vez de receber parâmetros.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Faça funcionar

Laboratório de Funções, arrow functions e closures: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

function calcularTotal(precos, desconto = 0) {
  const soma = precos.reduce((acc, p) => acc + p, 0);
  return soma - soma * desconto;   // retorna, não imprime
}

const total = calcularTotal([10, 20, 30], 0.1);
console.log(total);   // 54

// arrow function equivalente
const dobro = (n) => n * 2;
console.log(dobro(21));   // 42

Dica: Volte ao exemplo resolvido e compare a estrutura. Esquecer o return e receber undefined/None.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Funções, arrow functions e closures deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Funções, arrow functions e closures, identifique um risco citado na aula e registre ou implemente a correção.

function calcularTotal(precos, desconto = 0) {
  const soma = precos.reduce((acc, p) => acc + p, 0);
  return soma - soma * desconto;   // retorna, não imprime
}

const total = calcularTotal([10, 20, 30], 0.1);
console.log(total);   // 54

// arrow function equivalente
const dobro = (n) => n * 2;
console.log(dobro(21));   // 42

Dica: Esquecer o return e receber undefined/None.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Funções, arrow functions e closures. Mude os dados ou o cenário e demonstre que o resultado continua correto.

function calcularTotal(precos, desconto = 0) {
  const soma = precos.reduce((acc, p) => acc + p, 0);
  return soma - soma * desconto;   // retorna, não imprime
}

const total = calcularTotal([10, 20, 30], 0.1);
console.log(total);   // 54

// arrow function equivalente
const dobro = (n) => n * 2;
console.log(dobro(21));   // 42

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • Função é um bloco com nome que recebe entradas e devolve uma saída. É a ferramenta principal para não repetir código e para testar pedaços isolados do programa.
  • desconto tem valor padrão: chamar sem ele funciona. A função devolve o número; quem chama decide imprimir, salvar ou somar.
  • Evite: Esquecer o return e receber undefined/None.
  • Evite: Função que faz cinco coisas diferentes e ninguém consegue reaproveitar.

Exemplo comentado

function calcularTotal(precos, desconto = 0) {
  const soma = precos.reduce((acc, p) => acc + p, 0);
  return soma - soma * desconto;   // retorna, não imprime
}

const total = calcularTotal([10, 20, 30], 0.1);
console.log(total);   // 54

// arrow function equivalente
const dobro = (n) => n * 2;
console.log(dobro(21));   // 42

desconto tem valor padrão: chamar sem ele funciona. A função devolve o número; quem chama decide imprimir, salvar ou somar.

Erros comuns

  • Esquecer o return e receber undefined/None.
  • Função que faz cinco coisas diferentes e ninguém consegue reaproveitar.
  • Depender de variáveis globais em vez de receber parâmetros.

Quiz e gabarito completo

  1. 1. O que uma função sem return devolve?

    • a) Zero
    • b) undefined / None
    • c) O último valor calculado
    • d) Erro

    Gabarito: b) undefined / None — Sem return explícito a função devolve o valor vazio da linguagem.

  2. 2. Por que preferir retornar em vez de imprimir dentro da função?

    • a) É mais rápido
    • b) Porque o valor pode ser testado e reaproveitado por quem chamou
    • c) Porque print não existe em produção
    • d) Não há diferença

    Gabarito: b) Porque o valor pode ser testado e reaproveitado por quem chamou — Retornar separa cálculo de apresentação — base de código testável.

Codding • JavaScript • Funções, arrow functions e closures • Prova final e certificado em codding.lovable.app/cursos/javascript/prova