Métodos de Array em JavaScript: map, filter, reduce e cia

Arrays vêm com uma caixa de ferramentas

Os arrays em JavaScript trazem um conjunto enorme de métodos prontos. Quase tudo que você faria com um for — transformar valores, escolher alguns, somar o total — tem um método que resolve em uma linha, lê melhor e ainda combina bem com os outros.

O kit inicial são três métodos: map, filter e reduce. Domine esses três, mais alguns primos próximos, e aquele seu código cheio de loops vira algo que dá pra entender de bate-pronto.

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

Cada método recebe um callback e devolve algum resultado. Repare que nenhum deles alterou nums — vale a pena gravar isso bem cedo.

map: transformando cada elemento do array

O array map em JavaScript recebe uma função e a executa em cada elemento, juntando os valores retornados num novo array do mesmo tamanho. Use quando você quer "uma saída para cada entrada".

const users = [
    { name: "Ada", age: 36 },
    { name: "Boris", age: 29 },
    { name: "Chen", age: 41 },
];

const names = users.map(user => user.name);
const labels = users.map(user => `${user.name} (${user.age})`);

console.log(names);
console.log(labels);

O callback também recebe o índice como segundo argumento, caso você precise: arr.map((item, i) => ...). Quando não precisar, é só ignorar.

Um erro clássico: usar map quando você não precisa do array retornado. Se a ideia é só imprimir cada item ou salvar no banco, o certo é forEach ou um loop comum.

filter: mantendo só o que interessa

O filter executa um predicado — uma função que devolve true ou false — em cada elemento e mantém os que retornarem um valor "truthy". O array resultante tem o mesmo tamanho do original ou menos.

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
    { name: "Chair", price: 90, inStock: true },
];

const available = products.filter(p => p.inStock);
const affordable = products.filter(p => p.price < 50);

console.log(available);
console.log(affordable);

map e filter encaixam naturalmente em cadeia. Leia a sequência da esquerda para a direita como um pipeline:

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
];

const inStockNames = products
    .filter(p => p.inStock)
    .map(p => p.name);

console.log(inStockNames);

Filtre primeiro e só depois faça o map — assim o map roda apenas sobre os que sobreviveram.

reduce: reduzindo um array a um único valor

O reduce é o mais versátil dos três. Você passa uma função redutora no formato (acumulador, item) => novoAcumulador e um valor inicial. Ele percorre o array, entrega cada item para o redutor junto com o acumulador atual e, no final, devolve o valor em que o acumulador terminou.

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

const sum = nums.reduce((acc, n) => acc + n, 0);
const max = nums.reduce((acc, n) => (n > acc ? n : acc), -Infinity);

console.log(sum);
console.log(max);

O resultado não precisa ser um número. Pode ser um objeto, outro array, uma string — qualquer coisa que você queira construir:

const people = [
    { name: "Ada", team: "red" },
    { name: "Boris", team: "blue" },
    { name: "Chen", team: "red" },
    { name: "Dari", team: "blue" },
];

const byTeam = people.reduce((acc, person) => {
    (acc[person.team] ??= []).push(person.name);
    return acc;
}, {});

console.log(byTeam);

Sempre passe o valor inicial (o segundo argumento). Sem ele, o reduce usa o primeiro elemento como acumulador inicial, o que quebra em arrays vazios e, na maioria das vezes, nem é o comportamento que você queria.

O reduce é poderoso, mas fica difícil de ler quando a lógica começa a embolar. Se o seu reducer passa de umas poucas linhas, um for...of tradicional costuma ser bem mais claro.

forEach: efeitos colaterais, sem retorno

O forEach é tipo um map que não devolve array. Ele serve pra quando você quer fazer alguma coisa com cada item — dar um log, chamar uma API, atualizar o DOM — sem precisar gerar uma nova coleção.

const messages = ["oi", "olá", "e aí"];

messages.forEach((msg, i) => {
    console.log(`${i}: ${msg}`);
});

Duas coisas importantes para saber:

• forEach retorna undefined. Ou seja, não dá pra encadear um .map() depois.
• Também não dá pra sair do forEach antes da hora com break. Se você precisar interromper no meio, use for...of ou some/every.

Se você se pegar escrevendo arr.forEach(x => results.push(transform(x))), isso é um map disfarçado.

find e findIndex: só um elemento, por favor

O find devolve o primeiro elemento que satisfaz a condição, ou undefined caso nenhum bata. Já o findIndex devolve o índice desse elemento (ou -1 se não achar nada).

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Boris" },
    { id: 3, name: "Chen" },
];

const boris = users.find(u => u.name === "Boris");
const borisIndex = users.findIndex(u => u.name === "Boris");

console.log(boris);
console.log(borisIndex);

find para no primeiro resultado que bate com a condição. Evite filter(...)[0] — isso varre o array inteiro só pra descartar o resto.

some e every: perguntas que retornam booleano

O some retorna true se pelo menos um elemento passar no teste. Já o every só retorna true quando todos passam.

const scores = [82, 91, 77, 64, 88];

console.log(scores.some(s => s >= 90));   // true — pelo menos um A
console.log(scores.every(s => s >= 60));  // true — ninguém foi reprovado
console.log(scores.every(s => s >= 80));  // false

Os dois fazem short-circuit — o some para na primeira ocorrência true, e o every para no primeiro false. São a ferramenta certa para responder perguntas do tipo "tem algum...?" / "todos são...?".

slice vs splice: copiar ou cortar

Os nomes são parecidos, mas o comportamento é bem diferente.

O slice(start, end) devolve uma cópia rasa de um trecho do array, sem mexer no original. O end é exclusivo; se você omitir, ele vai até o final.

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
const last = letters.slice(-2);

console.log(middle);
console.log(last);
console.log(letters);  // inalterado

splice(start, deleteCount, ...items) altera o array no lugar. Ele remove deleteCount elementos a partir da posição start, opcionalmente insere novos itens e retorna os elementos removidos.

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "X", "Y", "Z");

console.log(letters);   // ["a", "X", "Y", "Z", "d", "e"]
console.log(removed);   // ["b", "c"]

Mnemônico: slice é seguro (copia), enquanto splice faz cirurgia direto no array original.

Métodos que mutam vs métodos que não mutam

Essa diferença faz toda a diferença no dia a dia. Código que altera sem querer um array compartilhado é um dos bugs mais chatos de rastrear.

Mutam (alteram o original e geralmente retornam outra coisa):

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

Não mutam (retornam um novo array ou valor, sem mexer no original):

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

Os dois traiçoeiros são sort e reverse — parecem inofensivos e mutam o array sem avisar. Se você quer uma cópia ordenada, faça um slice antes:

const nums = [3, 1, 4, 1, 5];

const sorted = nums.slice().sort((a, b) => a - b);

console.log(sorted);
console.log(nums);  // inalterado

O JavaScript moderno também traz as versões que não mutam o array: toSorted, toReversed, toSpliced e with. Elas devolvem um novo array e deixam o original intacto. Já funcionam em todos os runtimes atuais — então, sempre que puder, prefira essas.

const nums = [3, 1, 4, 1, 5];

console.log(nums.toSorted((a, b) => a - b));
console.log(nums.toReversed());
console.log(nums);  // continua [3, 1, 4, 1, 5]

flat e flatMap

O flat achata arrays aninhados em um nível (ou mais, se você passar a profundidade como argumento). Já o flatMap é um map seguido de um flat de um nível — bem útil quando cada item gera zero ou mais saídas.

const nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());

const sentences = ["olá mundo", "como você está"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);

flatMap é a forma elegante de "expandir" itens — uma entrada, várias saídas — sem precisar recorrer a um flat() depois.

Juntando tudo na prática

Um exemplo pequeno e realista. Dada uma lista de pedidos, calcule a receita total dos pedidos concluídos acima de R$ 50:

const orders = [
    { id: 1, total: 120, status: "completed" },
    { id: 2, total: 30, status: "completed" },
    { id: 3, total: 200, status: "pending" },
    { id: 4, total: 75, status: "completed" },
    { id: 5, total: 45, status: "completed" },
];

const revenue = orders
    .filter(o => o.status === "completed")
    .filter(o => o.total > 50)
    .reduce((sum, o) => sum + o.total, 0);

console.log(revenue);

Três métodos, um pipeline, zero controle manual de loop. Cada etapa já diz o que faz. Dá pra fundir os dois filter em um só, mas separar fica legível — e às vezes ajuda bastante na hora de debugar.

A seguir: Map e Set

Arrays dão conta muito bem de sequências ordenadas, mas ficam desajeitados quando você precisa de busca rápida por chave ou de uma coleção de valores únicos. O JavaScript tem duas estruturas de dados nativas justamente pra esses casos — Map e Set — e é esse o tema da próxima página.