Métodos de Array: map, filter, reduce
Um conceito de arrays & iteração que toda pessoa desenvolvedora JavaScript precisa dominar.
Introdução
Métodos de Array: map, filter, reduce é uma parte central de Arrays & Iteração em JavaScript. Esta lição explica o que é, como a linguagem de fato implementa isso e os padrões e armadilhas que separam o uso "copiar e colar" do entendimento real. Leia o exemplo de código e depois fixe o conceito com os pontos-chave.
Por que existe
Métodos de Array: map, filter, reduce existe para resolver um problema concreto do dia a dia em JavaScript. Entender por que foi criado — a aresta afiada ou o padrão repetitivo que ele elimina — é o que permite reconhecer o momento certo de usá-lo, em vez de recorrer a ele por hábito.
Analogia
Pense em Métodos de Array: map, filter, reduce como uma ferramenta de formato bem definido na sua caixa de JavaScript: poderosa quando o problema tem o formato certo, desajeitada quando forçada. A habilidade está em reconhecer o encaixe rapidamente.
Como funciona
Por baixo dos panos, Métodos de Array: map, filter, reduce segue regras que a engine aplica de forma consistente. Aprenda essas regras uma vez — o que a linguagem avalia, em que ordem e o que ela captura ou copia — e os casos surpreendentes deixam de surpreender.
No código
const orders = [
{ total: 30, paid: true },
{ total: 20, paid: false },
{ total: 50, paid: true },
]
const revenue = orders
.filter((o) => o.paid) // keep paid orders
.map((o) => o.total) // pull out totals
.reduce((sum, n) => sum + n, 0) // 80Quando usar
Recorra a isso quando
- O problema tem claramente o formato para o qual Métodos de Array: map, filter, reduce foi feito.
- Usar Métodos de Array: map, filter, reduce deixa o código mais legível, não apenas mais curto.
- Você entende a regra bem o suficiente para prever o resultado.
Evite quando
- Uma construção mais simples e óbvia expressa a mesma intenção.
- Usar Métodos de Array: map, filter, reduce esconderia um comportamento que o time teria que adivinhar.
Trade-offs
Vantagens
- Expressa um padrão comum de JavaScript de forma clara e idiomática.
- Reduz boilerplate e toda uma classe de bugs manuais.
Desvantagens
- Mal usado, Métodos de Array: map, filter, reduce esconde comportamento e cria bugs sutis.
- Seus casos de borda precisam ser entendidos, não decorados.
Como todo recurso da linguagem, Métodos de Array: map, filter, reduce troca um tipo de clareza por outro. Recorra a ele quando deixa a intenção óbvia e evite quando uma construção mais simples se lê melhor.
Erros comuns
Fique atento a
- Usar Métodos de Array: map, filter, reduce sem entender o que a engine realmente faz.
- Copiar um trecho e supor que os casos de borda batem com a sua situação.
Pense como sênior
Visão de Engenheiro(a) Sênior
Pessoas sêniores explicam Métodos de Array: map, filter, reduce em termos das regras da linguagem — ordem de avaliação, referências vs cópias, síncrono vs assíncrono — e não apenas do uso.
Visão de Engenheiro(a) Sênior
Elas conhecem os casos de borda de Métodos de Array: map, filter, reduce e escrevem código que o time consegue ler sem precisar executar.
Lembre-se
Métodos de Array: map, filter, reduce segue regras consistentes — aprenda a regra, não só a sintaxe.
Lembre-se
Legível vence esperto: use Métodos de Array: map, filter, reduce quando ele esclarece a intenção.
Resumo
Métodos de Array: map, filter, reduce é um bloco de construção de arrays & iteração em JavaScript. Conheça a regra que a engine aplica, as armadilhas comuns e quando uma alternativa mais simples se lê melhor.
Pontos-chave
- Métodos de Array: map, filter, reduce resolve um problema específico e recorrente do JavaScript.
- O comportamento segue regras previsíveis da engine.
- Prefira legibilidade a esperteza ao aplicá-lo.
Suas anotações
Salvo neste dispositivo