</>Codding
JavaScript0/31 lições

Módulo 2 • Estruturas de dados

Arrays e métodos (map, filter, reduce)

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

Nesta aula, você vai compreender Arrays e métodos (map, filter, reduce) 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 Arrays e métodos (map, filter, reduce) 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 Arrays e métodos (map, filter, reduce) 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 é Arrays e métodos (map, filter, reduce)

Listas guardam valores em ordem, acessados por índice. Dicionários (objetos) guardam pares chave→valor, acessados por nome. Escolher a estrutura certa resolve metade do problema antes do primeiro laço.

Cheque seu entendimento

Qual método devolve um novo array com a mesma quantidade de itens transformados?

1 de 5

O que você aprendeu

  • Listas guardam valores em ordem, acessados por índice. Dicionários (objetos) guardam pares chave→valor, acessados por nome. Escolher a estrutura certa resolve metade do problema antes do primeiro laço.
  • map/filter/reduce dizem O QUE você quer; o laço diria apenas COMO. O dicionário porNome troca busca linear por acesso direto.
  • Evite: Acessar lista[tamanho] em vez de lista[tamanho - 1].
  • Evite: Modificar a lista enquanto a percorre (pula itens).

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 "Arrays e métodos (map, filter, reduce)" 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 "Estruturas de dados".

Quiz rápido

0/2 • 0 certas

1. Qual método devolve um novo array com a mesma quantidade de itens transformados?

2. Qual é o índice do último item de uma lista com 4 elementos?

Laboratório

1/4

1. Faça funcionar

Laboratório de Arrays e métodos (map, filter, reduce): 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.

Arrays e métodos (map, filter, reduce)

JavaScript • Módulo 2: Estruturas de dados • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Arrays e métodos (map, filter, reduce) com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Arrays e métodos (map, filter, reduce) 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 é Arrays e métodos (map, filter, reduce)

Listas guardam valores em ordem, acessados por índice. Dicionários (objetos) guardam pares chave→valor, acessados por nome. Escolher a estrutura certa resolve metade do problema antes do primeiro laço.

Checkpoint: Qual método devolve um novo array com a mesma quantidade de itens transformados? — Resposta: map

2. Como pensar antes de fazer

Índices começam em zero. O último item é tamanho - 1; acessar tamanho direto estoura o limite. Esse é o erro 'index out of range'.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Arrays e métodos (map, filter, reduce)” resolve.

3. Exemplo completo, do início ao resultado

map transforma cada item (mesma quantidade de saída), filter seleciona itens (menos ou igual), reduce condensa a coleção em um único valor. Aprender esses três substitui a maioria dos laços manuais e deixa a intenção explícita.

const produtos = [
  { nome: "Mouse", preco: 80 },
  { nome: "Teclado", preco: 150 },
  { nome: "Monitor", preco: 900 },
];

const nomes = produtos.map((p) => p.nome);
const baratos = produtos.filter((p) => p.preco < 200);
const total = produtos.reduce((acc, p) => acc + p.preco, 0);

console.log(nomes);            // ["Mouse","Teclado","Monitor"]
console.log(baratos.length);   // 2
console.log(total);            // 1130

const porNome = Object.fromEntries(produtos.map((p) => [p.nome, p.preco]));
console.log(porNome["Monitor"]);  // 900 — busca direta
TrechoO que faz
const produtos = [Cria ou atualiza um valor que será usado pelo restante do exemplo.
{ nome: "Mouse", preco: 80 },Contribui para a transformação principal mostrada neste exemplo.
{ nome: "Teclado", preco: 150 },Contribui para a transformação principal mostrada neste exemplo.
{ nome: "Monitor", preco: 900 },Contribui para a transformação principal mostrada neste exemplo.
];Contribui para a transformação principal mostrada neste exemplo.
const nomes = produtos.map((p) => p.nome);Percorre ou transforma uma sequência de valores.
const baratos = produtos.filter((p) => p.preco < 200);Percorre ou transforma uma sequência de valores.
const total = produtos.reduce((acc, p) => acc + p.preco, 0);Percorre ou transforma uma sequência de valores.

Dica: map/filter/reduce dizem O QUE você quer; o laço diria apenas COMO. O dicionário porNome troca busca linear por acesso direto.

Checkpoint: Qual é o índice do último item de uma lista com 4 elementos? — Resposta: 3

4. Do detalhe para o todo

Use dicionário quando a busca é por identidade (por id, por nome) — é praticamente instantânea. Percorrer uma lista inteira para achar um item é O(n) e fica lento conforme os dados crescem.

5. Erros comuns e como corrigi-los

1. Acessar lista[tamanho] em vez de lista[tamanho - 1]. 2. Modificar a lista enquanto a percorre (pula itens). 3. Usar filter quando queria find — um devolve lista, o outro devolve o item.

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 Arrays e métodos (map, filter, reduce): execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

const produtos = [
  { nome: "Mouse", preco: 80 },
  { nome: "Teclado", preco: 150 },
  { nome: "Monitor", preco: 900 },
];

const nomes = produtos.map((p) => p.nome);
const baratos = produtos.filter((p) => p.preco < 200);
const total = produtos.reduce((acc, p) => acc + p.preco, 0);

console.log(nomes);            // ["Mouse","Teclado","Monitor"]
console.log(baratos.length);   // 2
console.log(total);            // 1130

const porNome = Object.fromEntries(produtos.map((p) => [p.nome, p.preco]));
console.log(porNome["Monitor"]);  // 900 — busca direta

Dica: Volte ao exemplo resolvido e compare a estrutura. Acessar lista[tamanho] em vez de lista[tamanho - 1].

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Arrays e métodos (map, filter, reduce) 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 Arrays e métodos (map, filter, reduce), identifique um risco citado na aula e registre ou implemente a correção.

const produtos = [
  { nome: "Mouse", preco: 80 },
  { nome: "Teclado", preco: 150 },
  { nome: "Monitor", preco: 900 },
];

const nomes = produtos.map((p) => p.nome);
const baratos = produtos.filter((p) => p.preco < 200);
const total = produtos.reduce((acc, p) => acc + p.preco, 0);

console.log(nomes);            // ["Mouse","Teclado","Monitor"]
console.log(baratos.length);   // 2
console.log(total);            // 1130

const porNome = Object.fromEntries(produtos.map((p) => [p.nome, p.preco]));
console.log(porNome["Monitor"]);  // 900 — busca direta

Dica: Acessar lista[tamanho] em vez de lista[tamanho - 1].

4. 4. Aplique em um caso novo

Crie uma variação própria usando Arrays e métodos (map, filter, reduce). Mude os dados ou o cenário e demonstre que o resultado continua correto.

const produtos = [
  { nome: "Mouse", preco: 80 },
  { nome: "Teclado", preco: 150 },
  { nome: "Monitor", preco: 900 },
];

const nomes = produtos.map((p) => p.nome);
const baratos = produtos.filter((p) => p.preco < 200);
const total = produtos.reduce((acc, p) => acc + p.preco, 0);

console.log(nomes);            // ["Mouse","Teclado","Monitor"]
console.log(baratos.length);   // 2
console.log(total);            // 1130

const porNome = Object.fromEntries(produtos.map((p) => [p.nome, p.preco]));
console.log(porNome["Monitor"]);  // 900 — busca direta

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

Revisão

  • Listas guardam valores em ordem, acessados por índice. Dicionários (objetos) guardam pares chave→valor, acessados por nome. Escolher a estrutura certa resolve metade do problema antes do primeiro laço.
  • map/filter/reduce dizem O QUE você quer; o laço diria apenas COMO. O dicionário porNome troca busca linear por acesso direto.
  • Evite: Acessar lista[tamanho] em vez de lista[tamanho - 1].
  • Evite: Modificar a lista enquanto a percorre (pula itens).

Exemplo comentado

const produtos = [
  { nome: "Mouse", preco: 80 },
  { nome: "Teclado", preco: 150 },
  { nome: "Monitor", preco: 900 },
];

const nomes = produtos.map((p) => p.nome);
const baratos = produtos.filter((p) => p.preco < 200);
const total = produtos.reduce((acc, p) => acc + p.preco, 0);

console.log(nomes);            // ["Mouse","Teclado","Monitor"]
console.log(baratos.length);   // 2
console.log(total);            // 1130

const porNome = Object.fromEntries(produtos.map((p) => [p.nome, p.preco]));
console.log(porNome["Monitor"]);  // 900 — busca direta

map/filter/reduce dizem O QUE você quer; o laço diria apenas COMO. O dicionário porNome troca busca linear por acesso direto.

Erros comuns

  • Acessar lista[tamanho] em vez de lista[tamanho - 1].
  • Modificar a lista enquanto a percorre (pula itens).
  • Usar filter quando queria find — um devolve lista, o outro devolve o item.

Quiz e gabarito completo

  1. 1. Qual método devolve um novo array com a mesma quantidade de itens transformados?

    • a) filter
    • b) map
    • c) reduce
    • d) find

    Gabarito: b) map — map transforma item a item mantendo o tamanho.

  2. 2. Qual é o índice do último item de uma lista com 4 elementos?

    • a) 4
    • b) 3
    • c) 0
    • d) Depende da linguagem

    Gabarito: b) 3 — Índices vão de 0 a tamanho - 1.

Codding • JavaScript • Arrays e métodos (map, filter, reduce) • Prova final e certificado em codding.lovable.app/cursos/javascript/prova