Os arrays do JavaScript têm uma das APIs de métodos mais ricas em qualquer linguagem mainstream. Mas a maioria dos tutoriais ensina map e filter com exemplos forçados — dobrando números em um array, filtrando números pares — e depois te deixa descobrir o resto. Vamos percorrer os métodos que realmente aparecem em código de produção, usando dados realistas: produtos, pedidos e registros de usuários.

O Dataset que Usaremos

Para manter os exemplos concretos, usaremos um catálogo de produtos realista ao longo deste artigo:

js
const products = [
  { id: 1, name: 'Wireless Keyboard',  category: 'electronics', price: 79.99,  rating: 4.5, inStock: true  },
  { id: 2, name: 'Mechanical Keyboard', category: 'electronics', price: 149.99, rating: 4.8, inStock: true  },
  { id: 3, name: 'USB-C Hub',          category: 'electronics', price: 49.99,  rating: 4.2, inStock: false },
  { id: 4, name: 'Standing Desk',       category: 'furniture',   price: 499.99, rating: 4.6, inStock: true  },
  { id: 5, name: 'Desk Lamp',           category: 'furniture',   price: 39.99,  rating: 4.1, inStock: true  },
  { id: 6, name: 'Monitor Arm',         category: 'electronics', price: 89.99,  rating: 4.7, inStock: false },
];

map() — Transformar Cada Item

Array.prototype.map() cria um novo array aplicando uma função a cada elemento. É o motor da transformação de dados — reformatando respostas de API no formato que sua UI precisa:

js
// Extract just the display data for a product list component
const productCards = products.map(product => ({
  id:       product.id,
  name:     product.name,
  price:    `$${product.price.toFixed(2)}`,
  badge:    product.inStock ? 'In Stock' : 'Out of Stock',
  stars:    '★'.repeat(Math.round(product.rating))
}));

// productCards[0] → { id: 1, name: 'Wireless Keyboard', price: '$79.99', badge: 'In Stock', stars: '★★★★★' }

// Apply a discount to all prices
const discounted = products.map(p => ({
  ...p,
  price:       parseFloat((p.price * 0.9).toFixed(2)),
  originalPrice: p.price
}));

map() nunca muta o array original — sempre retorna um novo. Por isso é seguro encadeá-lo, e por isso você deve preferi-lo a um loop for quando a transformação é o objetivo.

filter() — Obter um Subconjunto

filter() retorna um novo array contendo apenas os elementos onde o callback retorna true:

js
const inStockProducts  = products.filter(p => p.inStock);
const electronicsOnly  = products.filter(p => p.category === 'electronics');
const affordableInStock = products.filter(p => p.inStock && p.price < 100);

// Chain map + filter to get display-ready affordable in-stock electronics
const featuredItems = products
  .filter(p => p.inStock && p.rating >= 4.5)
  .map(p => ({ id: p.id, name: p.name, price: `$${p.price}` }));

reduce() — O Canivete Suíço

Array.prototype.reduce() é o que os desenvolvedores evitam porque a assinatura parece intimidadora. Mas uma vez que faz sentido, você vai querer usá-lo o tempo todo. Ele "reduz" um array a um único valor — e esse valor pode ser qualquer coisa: um número, um objeto, outro array. Aqui está um caso de uso realista: construir um mapa de busca a partir de um array:

js
// Group products by category (the pattern that makes reduce click)
const byCategory = products.reduce((acc, product) => {
  const cat = product.category;
  if (!acc[cat]) acc[cat] = [];
  acc[cat].push(product);
  return acc;
}, {}); // starting value is an empty object

// byCategory.electronics → [Wireless Keyboard, Mechanical Keyboard, USB-C Hub, Monitor Arm]
// byCategory.furniture   → [Standing Desk, Desk Lamp]

// Build an id → product lookup (O(1) access instead of .find() on every render)
const productById = products.reduce((acc, p) => {
  acc[p.id] = p;
  return acc;
}, {});

const keyboard = productById[2]; // instant lookup

// Calculate total cart value
const cart      = [{ productId: 1, qty: 2 }, { productId: 4, qty: 1 }];
const cartTotal = cart.reduce((total, item) => {
  const product = productById[item.productId];
  return total + (product.price * item.qty);
}, 0);
// 79.99 * 2 + 499.99 * 1 = 659.97
Dica profissional: Se você está usando reduce() apenas para somar números, considere uma alternativa mais limpa: products.reduce((sum, p) => sum + p.price, 0) está bom para casos simples. Mas para agrupamento e indexação, reduce() é imbatível.

find() e findIndex() — Parar na Primeira Correspondência

Um erro muito comum é usar filter() quando você só precisa de um item. filter() sempre percorre todo o array. find() para assim que encontra uma correspondência — O(1) no melhor caso vs O(n) do filter:

js
// ❌ Returns an array, scans everything even after finding a match
const found = products.filter(p => p.id === 3)[0];

// ✅ Returns the item directly, stops at first match
const product = products.find(p => p.id === 3);
// { id: 3, name: 'USB-C Hub', ... }

// findIndex() — gives you the position (useful for updates and deletions)
const idx = products.findIndex(p => p.id === 3);
// Update immutably:
const updated = [
  ...products.slice(0, idx),
  { ...products[idx], inStock: true },
  ...products.slice(idx + 1)
];

some() e every() — Verificações Booleanas

Quando você precisa de uma resposta sim/não sobre o conteúdo de um array, some() e every() são mais limpos do que filtrar e verificar o tamanho:

js
const hasOutOfStock   = products.some(p => !p.inStock);    // true
const allHighRated    = products.every(p => p.rating >= 4.0); // true
const allInStock      = products.every(p => p.inStock);       // false

// Common pattern: form validation
const formFields = [
  { name: 'email',    value: '[email protected]', valid: true  },
  { name: 'password', value: '',                 valid: false },
  { name: 'username', value: 'dev123',           valid: true  }
];

const isFormValid  = formFields.every(field => field.valid);   // false
const hasAnyError  = formFields.some(field => !field.valid);   // true

flat() e flatMap() — Lidando com Arrays Aninhados

Quando sua API retorna arrays aninhados, flat() e flatMap() os achatam em um único nível. flatMap() é especialmente útil quando uma operação map pode produzir zero, um ou múltiplos itens por entrada:

js
// flat() — collapse one level of nesting
const orderLines = [
  ['Wireless Keyboard', 'USB-C Hub'],
  ['Standing Desk'],
  ['Mechanical Keyboard', 'Monitor Arm', 'Desk Lamp']
];
const allItems = orderLines.flat();
// ['Wireless Keyboard', 'USB-C Hub', 'Standing Desk', 'Mechanical Keyboard', ...]

// flatMap() — map + flat in one pass (more efficient than chaining)
const ordersWithTags = [
  { id: 101, items: ['keyboard', 'hub'],   tags: ['electronics'] },
  { id: 102, items: ['desk', 'lamp'],      tags: ['furniture', 'sale'] },
];

// Get all unique tags across all orders
const allTags = ordersWithTags.flatMap(order => order.tags);
// ['electronics', 'furniture', 'sale']

// Filter-and-extract in one pass with flatMap
const expensiveNames = products.flatMap(p =>
  p.price > 100 ? [p.name] : [] // return empty array to skip, or [value] to include
);
// ['Mechanical Keyboard', 'Standing Desk']

Array.from() — Convertendo Objetos Semelhantes a Arrays

Array.from() converte qualquer iterável em um array real. Isso aparece constantemente com NodeLists do DOM, Sets, Maps e resultados de geradores:

js
// Convert a NodeList to an array so you can use .map() and .filter()
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
const checkedValues = checkboxes
  .filter(el => el.checked)
  .map(el => el.value);

// Deduplicate an array using Set → Array.from
const tags    = ['electronics', 'sale', 'electronics', 'new', 'sale'];
const unique  = Array.from(new Set(tags));
// ['electronics', 'sale', 'new']

// Create a range (like Python's range())
const range = Array.from({ length: 5 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

// Extract Map entries for further processing
const priceMap = new Map(products.map(p => [p.id, p.price]));
const prices   = Array.from(priceMap.values()); // [79.99, 149.99, ...]

Ordenação Correta

O sort() padrão converte tudo para strings, o que significa que números ordenam errado e a ordenação de strings quebra para caracteres não-ASCII. Sempre passe um comparador:

js
// ❌ Default sort — wrong for numbers
[10, 9, 100, 2].sort(); // [10, 100, 2, 9] ← string order

// ✅ Numeric sort
[10, 9, 100, 2].sort((a, b) => a - b); // [2, 9, 10, 100] ascending
[10, 9, 100, 2].sort((a, b) => b - a); // [100, 10, 9, 2] descending

// Sort products by price ascending
const byPrice = [...products].sort((a, b) => a.price - b.price);

// Sort by name — use localeCompare for proper string ordering
const byName = [...products].sort((a, b) =>
  a.name.localeCompare(b.name, 'en', { sensitivity: 'base' })
);

// Multi-key sort: category first, then rating descending
const sorted = [...products].sort((a, b) => {
  if (a.category !== b.category) return a.category.localeCompare(b.category);
  return b.rating - a.rating;
});
Atenção: sort() muta o array original. Sempre faça spread primeiro ([...products].sort(...)) se você precisar manter a ordem original intacta.

Object.groupBy() — Agrupamento ES2024

Antes do ES2024, você usaria reduce() para agrupar arrays (como mostrado anteriormente). Agora existe um método nativo: Object.groupBy(). É mais limpo para casos de agrupamento simples:

js
// Group products by category — ES2024
const grouped = Object.groupBy(products, p => p.category);
// {
//   electronics: [Wireless Keyboard, Mechanical Keyboard, USB-C Hub, Monitor Arm],
//   furniture:   [Standing Desk, Desk Lamp]
// }

// Group by stock status
const byStock = Object.groupBy(products, p => p.inStock ? 'available' : 'unavailable');

// Group orders by month
const orders = [
  { id: 1, date: new Date('2026-01-15'), total: 129.99 },
  { id: 2, date: new Date('2026-01-22'), total: 49.99  },
  { id: 3, date: new Date('2026-02-05'), total: 89.99  },
];
const byMonth = Object.groupBy(orders, o =>
  o.date.toLocaleString('en', { month: 'long', year: 'numeric' })
);

Object.groupBy() está disponível no Node.js 21+ e em todos os navegadores modernos a partir de meados de 2024. Verifique a referência groupBy do MDN para compatibilidade atual. Para ambientes mais antigos, o padrão reduce() ainda funciona.

Ferramentas Úteis

Ao trabalhar com arrays de dados JSON de APIs, estas ferramentas economizam tempo real: Formatador JSON para inspecionar payloads profundamente aninhados, JSON Path para consultar campos específicos de grandes arrays, e Formatador JS para limpar código com encadeamento de métodos. A referência de Array do MDN vale a pena guardar nos favoritos — há mais métodos do que a maioria dos desenvolvedores conhece.

Conclusão

Os métodos de array do JavaScript cobrem a maior parte do que você buscaria em uma biblioteca utilitária. map() e filter() para transformar e criar subconjuntos, reduce() para agrupar e indexar, find() em vez de filter()[0] para buscas, flatMap() para filtrar e transformar em uma única passagem, e Object.groupBy() para agrupamento limpo em ambientes modernos. A chave é usar a ferramenta certa para o trabalho — e saber que a maioria dos loops pode ser substituída por um método bem escolhido.

← All JavaScript articles Browse all categories →