JavaScript Array Methods Cheat Sheet

JavaScript arrays are everywhere. Whether you're transforming API responses, filtering user input, or building complex data pipelines, array methods are the tools you reach for daily. But with over 30 methods on Array.prototype, it's easy to lose track of which method does what, what it returns, and whether it mutates the original array.

This cheat sheet covers every major array method — from the classics like push() and map() to the newest ES2023 additions like toSorted(), toReversed(), and with(). Methods are grouped by category so you can quickly find what you need.

Quick Legend

Throughout this guide, each method table includes the following columns:

• Method — The method name and its parameters
• Description — What the method does
• Returns — The return value type
• Mutates? — Whether it modifies the original array
• Example — A concise code snippet

1. Mutator Methods

Mutator methods change the original array. Use them when you want to modify data in place. Be careful — these can lead to unintended side effects if referenced elsewhere in your code.

Adding & Removing Elements

Sorting & Reversing

2. Accessor Methods

Accessor methods do not mutatethe original array. They return a new array or value. These are generally safer and more predictable — prefer them over mutators when you don't need in-place modification.

Creating New Arrays

Searching & Checking

3. Iterator Methods

Iterator methods loop over the array and execute a callback. They are the workhorses of functional JavaScript. All iterator methods return a new value — they never mutate the original array.

arr
  .filter(x => x > 0)
  .map(x => x * 2)
  .reduce((sum, x) => sum + x, 0)

4. ES2023: The New Wave

The 2023 update to ECMAScript introduced three new array methods that return new arrays instead of mutating in place. These are the non-mutating alternatives to sort(),reverse(), and bracket assignment.

5. Static Methods

These are methods on the Array constructor itself, not on instances.

6. Practical Examples

Removing Duplicates

const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];
// [1, 2, 3, 4]

Grouping Objects by Property

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];

const grouped = users.reduce((acc, user) => {
  (acc[user.role] = acc[user.role] || []).push(user);
  return acc;
}, {});
// { admin: [Alice, Charlie], user: [Bob] }

Deep Flattening

const nested = [1, [2, [3, [4]]]];
nested.flat(Infinity);
// [1, 2, 3, 4]

Safe Sorting (Immutably)

const arr = [3, 1, 4, 1, 5];
const sorted = arr.toSorted((a, b) => a - b);
// sorted = [1, 1, 3, 4, 5]
// arr = [3, 1, 4, 1, 5] (unchanged!)

7. Performance Notes

• push/pop are O(1) — fastest way to add/remove from end.
• shift/unshift are O(n) — they re-index all elements.
• splice is O(n) in worst case due to re-indexing.
• filter/map create new arrays — chaining many of them uses more memory. For performance-critical paths, consider a single reduce() or a loop.
• flat(Infinity) is convenient but slow for deeply nested arrays. Use iterative flattening for large datasets.
• sort() uses Timsort (O(n log n)) and is stable as of ES2019.

8. Quick Reference Table

All methods at a glance. M = Mutator, A = Accessor, I = Iterator.

Browser Support

All methods covered here are well-supported in modern browsers:

• ES2023 methods (toSorted, toReversed, with, toSpliced): Chrome 110+, Firefox 115+, Safari 16.4+, Node 20+
• ES2019+ methods (flat, flatMap): Chrome 69+, Firefox 62+, Safari 12+, Node 11+
• All others: Supported everywhere including IE9+ (with polyfills for find, findIndex)

Common Mistakes & How to Avoid Them

Even experienced developers trip over these array method gotchas. Here are the five most common pitfalls and how to dodge them.

1. Forgetting That sort() Sorts Strings by Default

sort() converts every element to a string before comparing, so [10, 2, 1].sort() returns [1, 10, 2] — not the numeric order you expected. Always pass a comparator for numbers:

[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]

2. Mutating an Array While Iterating Over It

Calling splice() inside a forEach() loop shifts the indexes of every remaining element, which causes items to be silently skipped. Instead of removing elements in place, build a new array with filter() — it is safer and easier to reason about.

3. Using map() for Side Effects

map() exists to transform data and always returns a new array. If you only need to run side effects like logging or DOM updates, use forEach() instead. Calling map() and discarding its return value allocates an unused array and signals the wrong intent to readers.

4. filter(Boolean) Silently Drops Falsy Values

filter(Boolean) is a popular one-liner, but it also removes 0, "", and NaN. When those values are meaningful data, use an explicit predicate such as x => x !== null && x !== undefined.

5. map() Skips Holes in Sparse Arrays

Array(3).map(x => 1) returns an array of empty holes, not [1, 1, 1]. Create a dense array first with Array.from({ length: 3 }) or [...Array(3)] before mapping over it.