Métodos de Array em JavaScript: map, filter, reduce e mais (Com Exemplos)

Os arrays são a estrutura de dados fundamental no desenvolvimento com JavaScript. Seja processando respostas de APIs, filtrando resultados em uma interface ou agregando métricas de negócio, você utilizará métodos de manipulação de arrays constantemente. Muitos desenvolvedores, no entanto, ainda se prendem ao uso de loops for tradicionais quando uma abordagem declarativa seria muito mais legível, concisa e menos suscetível a erros.

Este guia explora detalhadamente os principais métodos de arrays do JavaScript, acompanhados de cenários reais para que você aplique no seu dia a dia de codificação.

forEach — Iteração Direta

O método forEach executa uma função de callback para cada item do array. Ele não retorna um novo array, tornando-se a escolha ideal quando o objetivo é disparar efeitos colaterais (side effects), como exibir logs no console, atualizar elementos no DOM ou salvar dados em objetos externos.

const usuarios = [
  { nome: 'Alice', cargo: 'admin' },
  { nome: 'Beto', cargo: 'editor' },
  { nome: 'Carla', cargo: 'visualizador' }
];

usuarios.forEach((usuario, indice) => {
  console.log(`${indice + 1}. ${usuario.nome} (${usuario.cargo})`);
});
// 1. Alice (admin)
// 2. Beto (editor)
// 3. Carla (visualizador)

Detalhe importante: Você não consegue interromper (break) a execução de um forEach. Se precisar de uma saída antecipada, prefira o uso do for...of ou do método some.

map — Transformação de Dados

O map gera um novo array aplicando uma transformação em cada item original. Ele não altera o array base, o que é um pilar da imutabilidade em bibliotecas como React e Vue, além de ser essencial em pipelines de processamento de dados.

const produtos = [
  { nome: 'Teclado', preco: 75 },
  { nome: 'Mouse', preco: 40 },
  { nome: 'Monitor', preco: 350 }
];

// Gerando strings formatadas
const etiquetas = produtos.map(
  p => `${p.nome}: R$ ${p.preco.toFixed(2)}`
);
// ['Teclado: R$ 75.00', 'Mouse: R$ 40.00', 'Monitor: R$ 350.00']

// Extraindo apenas os preços
const precos = produtos.map(p => p.preco);
// [75, 40, 350]

filter — Filtragem Condicional

O filter retorna um novo array composto apenas pelos elementos que atendem a um critério específico (retornam true no callback). É a forma mais limpa e declarativa de remover itens de listas baseando-se em condições.

const caros = produtos.filter(p => p.preco > 50);
// [{ nome: 'Teclado', preco: 75 }, { nome: 'Monitor', preco: 350 }]

// Encadeando filter com map
const nomesCaros = produtos
  .filter(p => p.preco > 50)
  .map(p => p.nome);
// ['Teclado', 'Monitor']

reduce — Agregação e Redução

O reduce é a ferramenta mais versátil do arsenal JavaScript. Ele percorre o array acumulando um valor único, que pode ser um total numérico, um objeto estruturado ou até um novo array modificado.

// Somar todos os preços
const total = produtos.reduce((soma, p) => soma + p.preco, 0);
// 465

// Agrupar usuários por cargo
const agrupados = usuarios.reduce((acc, user) => {
  acc[user.cargo] = acc[user.cargo] || [];
  acc[user.cargo].push(user.nome);
  return acc;
}, {});
// { admin: ['Alice'], editor: ['Beto'], visualizador: ['Carla'] }

Dica: Sempre defina um valor inicial para o acumulador (o segundo argumento do reduce). Omiti-lo pode gerar erros inesperados caso o array esteja vazio.

find & findIndex — Buscas Precisas

O find retorna o primeiro elemento que satisfaz uma condição, ou undefined. O findIndex retorna a posição (índice) do elemento, ou -1 caso não seja encontrado.

const pedidos = [
  { id: 'ORD-001', status: 'enviado' },
  { id: 'ORD-002', status: 'pendente' },
  { id: 'ORD-003', status: 'entregue' }
];

const pendente = pedidos.find(o => o.status === 'pendente');
// { id: 'ORD-002', status: 'pendente' }

const indicePendente = pedidos.findIndex(o => o.status === 'pendente');
// 1

some & every — Verificações Booleanas

O some verifica se pelo menos um elemento atende ao teste. O every checa se todos os elementos atendem. Ambos param de processar assim que obtêm a resposta (short-circuit).

const notas = [82, 91, 76, 95, 88];

const temReprovado = notas.some(n => n < 60);
// false

const todosAprovados = notas.every(n => n >= 70);
// true

includes — Verificação de Existência

O includes retorna um booleano verificando se um valor existe no array. Ele é superior ao indexOf porque é capaz de detectar corretamente o valor NaN.

const perfis = ['admin', 'editor', 'leitor'];

perfis.includes('admin');   // true
[1, 2, NaN].includes(NaN);  // true (correto)
[1, 2, NaN].indexOf(NaN);   // -1 (falha ao buscar NaN)

flat & flatMap — Achatando Arrays

O flat reduz a profundidade de arrays aninhados. Já o flatMap mapeia e depois achata um nível, sendo extremamente eficiente para transformar estruturas complexas em um único nível.

const frases = ['olá mundo', 'javascript é incrível'];
const palavras = frases.flatMap(f => f.split(' '));
// ['olá', 'mundo', 'javascript', 'é', 'incrível']

sort — Ordenação (Atenção à Mutação)

O sort ordena o array original. Por padrão, ele converte elementos para strings, o que é um erro comum com números. Sempre forneça uma função comparadora.

// Ordenação numérica crescente
[10, 9, 100].sort((a, b) => a - b);
// [9, 10, 100]

Dica: Se precisar evitar a mutação do array original, use toSorted() (disponível no ES2023) ou crie uma cópia com [...array].sort().

Novidades do ES2023 e Performance

A especificação recente trouxe métodos imutáveis poderosos como toSorted(), toReversed() e with(). Quanto à performance, lembre-se: encadear muitos métodos (como .filter().map()) cria múltiplos arrays intermediários. Em datasets gigantescos, um loop único ou um reduce pode ser significativamente mais performático.