JavaScript Array Methods — The Complete Cheatsheet for 2026

Introduction

Why This Matters

JavaScript array methods are the backbone of modern web development. React components process data with map, API responses are filtered with filter, totals are computed with reduce, and ES2023+ introduced toSorted, toReversed, and findLast that modify arrays non-destructively. Knowing which method to reach for — and when — separates junior from senior code.

Array methods also work hand-in-hand with TypeScript generics, making them the standard way to write type-safe data transformations in Next.js, React, Node.js, and any modern JavaScript codebase. They are consistently tested in technical interviews and appear in every front-end and full-stack role.

map — Transform Every Element

const prices = [10, 25, 50, 100]
 
// Multiply every element
const discounted = prices.map(p => p * 0.9)
// [9, 22.5, 45, 90]
 
// Transform objects
interface User { id: number; name: string; email: string }
const users: User[] = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
]
const names = users.map(u => u.name)
// ['Alice', 'Bob']

filter — Keep Elements That Match

const scores = [85, 42, 91, 60, 78, 33]
 
const passing = scores.filter(s => s >= 60)
// [85, 91, 60, 78]
 
// Filter objects
const activeUsers = users.filter(u => u.id > 1)
 
// Type guard with filter
const maybeNumbers: (number | null)[] = [1, null, 3, null, 5]
const numbers = maybeNumbers.filter((n): n is number => n !== null)
// numbers is now number[]

reduce — Accumulate a Value

const cart = [
  { name: "Widget", price: 9.99, qty: 2 },
  { name: "Gadget", price: 24.99, qty: 1 },
]
 
// Sum total
const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0)
// 44.97
 
// Group by category
const words = ["apple", "banana", "avocado", "blueberry", "cherry"]
const grouped = words.reduce<Record<string, string[]>>((acc, word) => {
  const letter = word[0]
  acc[letter] = acc[letter] ? [...acc[letter], word] : [word]
  return acc
}, {})
// { a: ['apple', 'avocado'], b: ['banana', 'blueberry'], c: ['cherry'] }

find and findIndex

const products = [
  { id: 1, name: "Widget", inStock: false },
  { id: 2, name: "Gadget", inStock: true },
  { id: 3, name: "Doohickey", inStock: true },
]
 
const firstInStock = products.find(p => p.inStock)
// { id: 2, name: 'Gadget', inStock: true }
 
const idx = products.findIndex(p => p.id === 3)
// 2
 
// findLast — search from end (ES2023)
const lastInStock = products.findLast(p => p.inStock)
// { id: 3, name: 'Doohickey', inStock: true }

some and every

const ages = [18, 22, 16, 30, 15]
 
console.log(ages.some(a => a < 18))    // true — at least one minor
console.log(ages.every(a => a >= 18))  // false — not all are adults
console.log(ages.every(a => a > 0))    // true — all positive

flat and flatMap

const nested = [[1, 2], [3, 4], [5, [6, 7]]]
 
nested.flat()     // [1, 2, 3, 4, 5, [6, 7]]
nested.flat(2)    // [1, 2, 3, 4, 5, 6, 7]
 
// flatMap: map then flatten one level
const sentences = ["Hello World", "Foo Bar"]
const words = sentences.flatMap(s => s.split(" "))
// ['Hello', 'World', 'Foo', 'Bar']

Non-Mutating Methods (ES2023)

const nums = [3, 1, 4, 1, 5]
 
// toSorted — returns new sorted array (does not mutate)
const sorted = nums.toSorted((a, b) => a - b)  // [1, 1, 3, 4, 5]
console.log(nums)  // [3, 1, 4, 1, 5] — unchanged
 
// toReversed — returns new reversed array
const reversed = nums.toReversed()  // [5, 1, 4, 1, 3]
 
// toSpliced — remove/insert without mutation
const spliced = nums.toSpliced(1, 2, 9, 9)  // [3, 9, 9, 1, 5]
 
// with — replace element at index
const updated = nums.with(0, 99)  // [99, 1, 4, 1, 5]
 
// at — access from end
console.log(nums.at(-1))   // 5 — last element
console.log(nums.at(-2))   // 1 — second from last

includes, indexOf, slice

const fruits = ["apple", "banana", "cherry"]
 
fruits.includes("banana")   // true
fruits.indexOf("cherry")    // 2
fruits.indexOf("mango")     // -1
 
// slice — extract portion (non-mutating)
fruits.slice(1)      // ['banana', 'cherry']
fruits.slice(0, 2)   // ['apple', 'banana']
fruits.slice(-1)     // ['cherry'] — last element

Chaining Methods

interface Order {
  id: number
  status: "pending" | "shipped" | "delivered"
  total: number
  customerId: number
}
 
const orders: Order[] = [
  { id: 1, status: "shipped", total: 120, customerId: 1 },
  { id: 2, status: "pending", total: 85, customerId: 2 },
  { id: 3, status: "delivered", total: 200, customerId: 1 },
]
 
// Customer 1's delivered orders sorted by total
const result = orders
  .filter(o => o.customerId === 1 && o.status === "delivered")
  .map(o => ({ id: o.id, total: o.total }))
  .toSorted((a, b) => b.total - a.total)
 
// [{ id: 3, total: 200 }]

Common Mistakes

Using forEach when you need the result — forEach returns undefined
Mutating arrays inside map or filter callbacks
Forgetting to pass an initial value to reduce — causes issues on empty arrays
Using find and not checking for undefined when element might not exist
Using sort() instead of toSorted() — sort() mutates the original array

Best Practices

Prefer non-mutating methods (toSorted, toReversed) to avoid unexpected side effects
Use TypeScript generics to keep type safety through method chains
Provide an initial value to reduce to handle empty array edge cases
Use findIndex + with to update an element non-destructively
Prefer at(-1) over arr[arr.length - 1] for last element access

Key Takeaways

map transforms every element and returns a new array of the same length
filter keeps elements matching a predicate; use type guards for TypeScript narrowing
reduce accumulates a single value — provide an initial value for safety
find returns the first match or undefined; findLast searches from the end (ES2023)
flat and flatMap work with nested arrays; flatMap is map + flat(1)
ES2023 added toSorted, toReversed, toSpliced, and with for non-mutating operations
at(-1) is the clean way to access the last element of an array

Introduction#

Why This Matters#

map — Transform Every Element#

filter — Keep Elements That Match#

reduce — Accumulate a Value#

find and findIndex#

some and every#

flat and flatMap#

Non-Mutating Methods (ES2023)#

includes, indexOf, slice#

Chaining Methods#

Common Mistakes#

Best Practices#

Key Takeaways#

Related reading