JavaScript Array Methods: map, splice, sort, and for...of

When choosing a JavaScript array API, ask two questions first: do you want a new array or do you want to mutate the existing one? Do you need early exit or sequential await? map, filter, and slice return new arrays. splice, sort, and reverse mutate the array. When you need break, continue, or sequential async work, use for...of.

Mutating vs non-mutating methods

In React state, reducers, and data pipelines, prefer non-mutating methods unless mutation is deliberate and local.

Add and remove items

const tools = ["Raycast", "IINA"]

tools.push("AppCleaner")
const last = tools.pop()

Those methods modify tools. To keep the original array unchanged:

const withBrew = [...tools, "Homebrew"]
const withoutIINA = tools.filter((tool) => tool !== "IINA")

This matters when references are used to detect updates.

slice vs splice

slice(start, end) returns a new array for the half-open range [start, end):

const values = [0, 1, 2, 3, 4]
values.slice(1, 4) // [1, 2, 3]
values             // [0, 1, 2, 3, 4]

splice(start, deleteCount, ...items) mutates the array and returns removed items:

const values = ["a", "b", "c"]
const removed = values.splice(1, 1, "B", "B2")

removed // ["b"]
values  // ["a", "B", "B2", "c"]

Modern runtimes also provide toSpliced for a non-mutating version:

const next = values.toSpliced(1, 1, "new")

map, filter, and reduce

Use map to transform each item:

const names = tools.map((tool) => tool.name)

Use filter to keep items that match a condition:

const freeTools = tools.filter((tool) => tool.price === 0)

Use reduce to collapse a list into one result:

const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

If the reducer callback needs many comments, a plain loop may be clearer. Do not compress business logic into reduce just to look functional.

find, some, and every

const iina = tools.find((tool) => tool.slug === "iina")
const hasFreeTool = tools.some((tool) => tool.price === 0)
const allAvailable = tools.every((tool) => tool.available)

• find returns the first matching item or undefined.
• some stops once it finds true.
• every stops once it finds false.

If you only need an existence check, do not filter the whole array and then check .length.

sort and toSorted

sort mutates the original array, and its default comparison is string-based:

[10, 2, 30].sort() // [10, 2, 30]

For numeric sorting:

const ascending = numbers.toSorted((a, b) => a - b)

If toSorted is unavailable:

const ascending = [...numbers].sort((a, b) => a - b)

Comparison functions should be stable and deterministic. Avoid random comparison functions.

for, forEach, for...of, and for...in

Use for when you need indexes, exact stepping, or two-pointer logic:

for (let index = 0; index < items.length; index += 1) {
  if (items[index].hidden) continue
  render(items[index])
}

Use forEach for simple synchronous side effects, but remember that you cannot break and it does not await async callbacks:

items.forEach((item) => console.log(item.id))

Use for...of for iterables, early exit, and sequential async work:

for (const item of items) {
  if (!item.valid) break
  await save(item)
}

for...in iterates enumerable string property names and is not the right default for arrays.

Quick selection table

Related FreeMac guides

• For destructuring and copying objects, read JavaScript Object Copy: Destructuring, Shallow Copy, and Deep Copy.
• For safe optional access, read JavaScript Optional Chaining: When to Use ?..
• For async ordering, read JavaScript Event Loop: Tasks, Microtasks, and Rendering.