DevPath · Aprenda a programar ESPTEN

Projetos práticos

Processar dados com map, filter e reduce

Processar listas de dados

Grande parte do trabalho real consiste em transformar listas de dados: vendas, usuários, produtos... O trio map, filter e reduce é a ferramenta perfeita.

const vendas = [
  { produto: "teclado", preco: 25, quantidade: 3 },
  { produto: "mouse", preco: 15, quantidade: 5 },
  { produto: "monitor", preco: 150, quantidade: 1 },
];

// 1. map: calcular o total de cada linha
const totais = vendas.map((v) => v.preco * v.quantidade);

// 2. filter: apenas vendas caras
const caras = vendas.filter((v) => v.preco > 20);

// 3. reduce: receita total
const receitaTotal = vendas.reduce(
  (acc, v) => acc + v.preco * v.quantidade,
  0
);

console.log(totais);       // [75, 75, 150]
console.log(receitaTotal); // 300

Encadear transformações

A verdadeira potência aparece ao encadear esses métodos:

const receitaProdutosCaros = vendas
  .filter((v) => v.preco > 20)
  .map((v) => v.preco * v.quantidade)
  .reduce((acc, total) => acc + total, 0);

Leia o fluxo de cima para baixo: filtra, transforma e agrega. É declarativo e muito legível.

Exemplos

Agrupar e resumir dados

const usuarios = [
  { nome: "Ana", ativo: true },
  { nome: "Luis", ativo: false },
  { nome: "Eva", ativo: true },
];
const ativos = usuarios.filter((u) => u.ativo).map((u) => u.nome);
console.log("Usuários ativos:", ativos);
Coloque isto em prática

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →
← Como abordar um projetoModelar com classes →