JavaScript Array Methods - The Complete Cheatsheet

const numbers = [1, 2, 3, 4, 5]

// Double every number
const doubled = numbers.map(n => n * 2)
// [2, 4, 6, 8, 10]

// Real world: transform API data
const users = [
  { id: 1, firstName: 'Alice', lastName: 'Smith' },
  { id: 2, firstName: 'Bob', lastName: 'Jones' },
]

const names = users.map(u => ({
  id: u.id,
  fullName: `${u.firstName} ${u.lastName}`,
}))
// [{ id: 1, fullName: 'Alice Smith' }, ...]

const products = [
  { name: 'Apple', price: 1.5, inStock: true },
  { name: 'Banana', price: 0.5, inStock: false },
  { name: 'Cherry', price: 3.0, inStock: true },
]

// Only in-stock items
const available = products.filter(p => p.inStock)

// In-stock AND affordable
const goodDeals = products.filter(p => p.inStock && p.price < 2)

const numbers = [1, 2, 3, 4, 5]

// Sum
const sum = numbers.reduce((acc, n) => acc + n, 0)
// 15

// Max value
const max = numbers.reduce((max, n) => (n > max ? n : max), -Infinity)
// 5

// Group by category (powerful!)
const items = [
  { name: 'A', category: 'fruit' },
  { name: 'B', category: 'veggie' },
  { name: 'C', category: 'fruit' },
]

const grouped = items.reduce((acc, item) => {
  if (!acc[item.category]) acc[item.category] = []
  acc[item.category].push(item)
  return acc
}, {})
// { fruit: [...], veggie: [...] }

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'admin' },
]

// find — returns the first match (or undefined)
const admin = users.find(u => u.role === 'admin')
// { id: 1, name: 'Alice', role: 'admin' }

// findIndex — returns the index (or -1)
const idx = users.findIndex(u => u.id === 2)
// 1

// findLast() and findLastIndex() — ES2023
const lastAdmin = users.findLast(u => u.role === 'admin')
// { id: 3, name: 'Charlie', role: 'admin' }

const scores = [75, 85, 92, 60, 88]

// some — is at least one true?
const hasHighScore = scores.some(s => s >= 90)
// true (92 qualifies)

// every — are ALL true?
const allPassing = scores.every(s => s >= 60)
// true

// Practical use
const cart = [
  { name: 'Laptop', inStock: true },
  { name: 'Mouse', inStock: true },
  { name: 'Keyboard', inStock: false },
]

const canCheckout = cart.every(item => item.inStock)
// false — keyboard is out of stock

// flat() — flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]]

nested.flat()   // [1, 2, 3, 4, [5, 6]]
nested.flat(2)  // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity)  // fully flatten any depth

// flatMap() — map then flatten (one level)
const sentences = ['Hello World', 'Foo Bar']
const words = sentences.flatMap(s => s.split(' '))
// ['Hello', 'World', 'Foo', 'Bar']

// Real world: flatten API results
const pages = [
  { items: [1, 2, 3] },
  { items: [4, 5, 6] },
]
const allItems = pages.flatMap(p => p.items)
// [1, 2, 3, 4, 5, 6]

// ❌ Default sort uses string comparison!
[10, 1, 21, 2].sort()
// [1, 10, 2, 21] — WRONG

// ✅ Numeric sort
[10, 1, 21, 2].sort((a, b) => a - b)
// [1, 2, 10, 21] — Correct!

// Sort strings
['banana', 'apple', 'cherry'].sort((a, b) => a.localeCompare(b))
// ['apple', 'banana', 'cherry']

// Sort objects
const users = [
  { name: 'Charlie', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 },
]
users.sort((a, b) => a.age - b.age)
// Sorted by age: Bob, Charlie, Alice

// toSorted() — returns NEW sorted array (non-mutating)
const arr = [3, 1, 2]
const sorted = arr.toSorted((a, b) => a - b)
// arr is still [3, 1, 2], sorted is [1, 2, 3]

// toReversed() — returns NEW reversed array
const reversed = arr.toReversed()
// arr is still [3, 1, 2]

// toSpliced() — returns NEW array with spliced elements
const spliced = arr.toSpliced(1, 1, 10, 20)
// [3, 10, 20, 2]

// with() — returns NEW array with one element changed
const updated = arr.with(0, 99)
// [99, 1, 2]

const arr = [1, 2, 3, NaN]

// indexOf returns index (-1 if not found), can't find NaN
arr.indexOf(2)    // 1
arr.indexOf(NaN)  // -1 ❌

// includes returns boolean, handles NaN correctly
arr.includes(2)    // true
arr.includes(NaN)  // true ✅
arr.includes(5)    // false