Tutorial JavaScript Developer Tools Cheat Sheet

Free JavaScript Array Methods Cheat Sheet Online — Interactive Reference for Developers

· 14 min read

JavaScript arrays are the workhorse of modern web development. Every application — from a simple to-do list to a complex data visualization dashboard — relies on arrays to store, transform, and present information. The language provides more than forty built-in array methods, each designed for a specific purpose. Yet this abundance creates a cognitive burden. Even experienced developers pause to recall whether splice mutates the original array, how reduce accumulates values, or the exact difference between find and filter. During code reviews, technical interviews, and daily coding, developers constantly search for array method syntax and behavior. Our free interactive JavaScript array methods cheat sheet eliminates this friction. It organizes every method into searchable categories, provides concise syntax references, live code examples, and clear mutating versus non-mutating labels. Everything runs client-side in your browser — no data ever leaves your machine.

Why Developers Need a JavaScript Array Methods Cheat Sheet

JavaScript arrays are deceptively simple. The basic syntax — square brackets, comma-separated values, zero-based indexing — takes minutes to learn. But mastering the full API surface takes years. The ECMAScript specification defines over forty array methods, and new ones arrive with every annual release. Some methods mutate the original array. Others return new arrays. Some accept callbacks with specific signatures. Some support thisArg. Some skip empty slots in sparse arrays. Others do not.

The real problem is retrieval friction. When you are deep in a coding session, switching contexts to search documentation breaks flow. Opening a new tab, typing a query, skimming MDN, and finding the right example can consume several minutes. A well-organized js array cheat sheet reduces that time to seconds. An interactive cheat sheet goes further — it lets you search by method name, filter by category, and copy code examples instantly. Whether you are preparing for a frontend interview, reviewing a pull request, or building a new feature, having every array method at your fingertips keeps you productive.

JavaScript Array Basics: A Quick Review

Before diving into methods, let us establish what arrays are and why they matter. In JavaScript, an array is an ordered collection of values. Unlike arrays in statically typed languages, JavaScript arrays are dynamic, heterogeneous, and resizable. They can hold any type — numbers, strings, objects, functions, even other arrays.


const mixed = [42, 'hello', true, { name: 'Alice' }, [1, 2, 3]];

Arrays are implemented as objects with numeric keys and a special length property. This design makes them incredibly flexible but also introduces edge cases. For example, arrays can have holes — indices with no assigned value — which some methods skip and others treat as undefined.


const sparse = [1, , 3];
console.log(sparse.length); // 3
console.log(sparse[1]);     // undefined

JavaScript also has array-like objects — structures that have numeric indices and a length property but lack array methods. The most common example is arguments in older functions, or NodeList returned by document.querySelectorAll. You can convert array-like objects to real arrays using Array.from or the spread operator.


const nodeList = document.querySelectorAll('div');
const nodes = Array.from(nodeList);
// or
const nodes2 = [...nodeList];

Understanding these fundamentals helps explain why certain methods behave the way they do. Now let us explore the methods themselves.

Mutator Methods: Changing the Original Array

Mutator methods modify the array they are called on. This is important because unintended mutation is one of the most common sources of bugs in JavaScript applications. When you pass an array to a function and that function calls .sort(), the original array changes — which may surprise the caller. Our cheat sheet clearly labels every mutator with a warning badge so you never accidentally modify data.

Adding and Removing Elements at the Ends

The four fundamental stack and queue operations are push, pop, shift, and unshift.

push adds one or more elements to the end of an array and returns the new length:


const fruits = ['apple', 'banana'];
const newLength = fruits.push('cherry', 'date');
console.log(fruits);    // ['apple', 'banana', 'cherry', 'date']
console.log(newLength); // 4

pop removes the last element and returns it:


const fruits = ['apple', 'banana', 'cherry'];
const last = fruits.pop();
console.log(last);   // 'cherry'
console.log(fruits); // ['apple', 'banana']

shift removes the first element and returns it. This is slower than pop on large arrays because every remaining element must be re-indexed:


const fruits = ['apple', 'banana', 'cherry'];
const first = fruits.shift();
console.log(first);  // 'apple'
console.log(fruits); // ['banana', 'cherry']

unshift adds one or more elements to the beginning:


const fruits = ['banana', 'cherry'];
const newLength = fruits.unshift('apple');
console.log(fruits);    // ['apple', 'banana', 'cherry']
console.log(newLength); // 3

splice: The Swiss Army Knife of Array Mutation

splice is the most powerful mutator. It can add, remove, or replace elements at any position:


const arr = ['a', 'b', 'c', 'd', 'e'];

// Remove 2 elements starting at index 1
const removed = arr.splice(1, 2);
console.log(arr);     // ['a', 'd', 'e']
console.log(removed); // ['b', 'c']

// Insert elements without removing
arr.splice(1, 0, 'x', 'y');
console.log(arr); // ['a', 'x', 'y', 'd', 'e']

// Replace elements
arr.splice(1, 2, 'b', 'c');
console.log(arr); // ['a', 'b', 'c', 'd', 'e']

The syntax is array.splice(start, deleteCount, ...items). Negative start counts from the end. If deleteCount is omitted, all elements from start to the end are removed.

sort and reverse

sort sorts elements in place and returns the sorted array. By default, it converts elements to strings and compares UTF-16 code units — which produces surprising results with numbers:


const nums = [10, 2, 30, 1];
nums.sort();
console.log(nums); // [1, 10, 2, 30] — wrong!

Always provide a compare function for numeric sorting:


const nums = [10, 2, 30, 1];
nums.sort((a, b) => a - b);
console.log(nums); // [1, 2, 10, 30]

// Descending order
nums.sort((a, b) => b - a);
console.log(nums); // [30, 10, 2, 1]

reverse reverses the array in place:


const arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]

fill and copyWithin

fill replaces all or part of an array with a static value:


const arr = new Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

const nums = [1, 2, 3, 4, 5];
nums.fill('x', 1, 3);
console.log(nums); // [1, 'x', 'x', 4, 5]

copyWithin copies a sequence of elements within the same array:


const arr = ['a', 'b', 'c', 'd', 'e'];
arr.copyWithin(0, 3, 5);
console.log(arr); // ['d', 'e', 'c', 'd', 'e']

Both methods are rarely used in application code but are essential for low-level array manipulation and algorithm implementations.

Accessor Methods: Reading Without Changing

Accessor methods return a value or a new array without modifying the original. These are the safest methods to use when you want to avoid side effects.

concat and join

concat merges arrays or values into a new array:


const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2, 5, 6);
console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(arr1);     // [1, 2] — unchanged

Modern JavaScript often prefers the spread operator for concatenation:


const combined = [...arr1, ...arr2, 5, 6];

join creates a string from array elements:


const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // 'Hello world'

const csv = ['a', 'b', 'c'].join(',');
console.log(csv); // 'a,b,c'

slice: The Non-Mutating Subset Extractor

slice returns a shallow copy of a portion of an array. Unlike splice, it does not modify the original:


const arr = ['a', 'b', 'c', 'd', 'e'];
const subset = arr.slice(1, 4);
console.log(subset); // ['b', 'c', 'd']
console.log(arr);    // ['a', 'b', 'c', 'd', 'e'] — unchanged

// Negative indices count from the end
const lastTwo = arr.slice(-2);
console.log(lastTwo); // ['d', 'e']

slice() with no arguments creates a shallow copy of the entire array — a common pattern for defensive copying.

indexOf, lastIndexOf, and includes

indexOf returns the first index of a value, or -1 if not found:


const arr = ['a', 'b', 'c', 'b'];
console.log(arr.indexOf('b'));     // 1
console.log(arr.indexOf('z'));     // -1
console.log(arr.indexOf('b', 2));  // 3 — start search from index 2

lastIndexOf searches from the end:


console.log(arr.lastIndexOf('b')); // 3

includes returns a boolean — cleaner for existence checks:


const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(5)); // false

// Supports fromIndex and NaN (unlike indexOf)
console.log([NaN].includes(NaN)); // true

at: Modern Indexing with Negative Support

at returns the element at a given index, supporting negative indices:


const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(0));  // 'a'
console.log(arr.at(-1)); // 'd' — last element
console.log(arr.at(-2)); // 'c' — second to last

at(-1) is much more readable than arr[arr.length - 1] for accessing the last element.

Iteration Methods: The Power of Functional Programming

Iteration methods are where JavaScript arrays truly shine. They enable declarative, functional-style programming that is more readable and composable than imperative loops. Every iteration method accepts a callback function that receives (element, index, array) and an optional thisArg.

forEach: Side Effects Only

forEach executes a callback for each element. It always returns undefined:


const nums = [1, 2, 3];
nums.forEach(n => console.log(n * 2));
// Logs: 2, 4, 6

Use forEach when you need side effects — logging, DOM manipulation, or external state updates. Do not use it when you need a transformed array. That is what map is for.

map: Transform Every Element

map creates a new array by applying a function to every element:


const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums);    // [1, 2, 3] — unchanged

map preserves array length. The output always has the same number of elements as the input. If you need to change the length, use filter or flatMap.

filter: Select Matching Elements

filter creates a new array with elements that pass a test:


const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

The callback must return a truthy value to include the element. filter is ideal for removing unwanted items from a dataset.

reduce: Accumulate to a Single Value

reduce is the most flexible iteration method. It accumulates a single value from an array:


const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

// Build an object from an array
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const byId = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(byId); // { 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' } }

reduceRight works the same but iterates from right to left:


const arr = ['a', 'b', 'c'];
const reversed = arr.reduceRight((acc, el) => acc + el, '');
console.log(reversed); // 'cba'

find, findIndex, findLast, and findLastIndex

find returns the first element that matches a condition, or undefined:


const users = [
  { id: 1, name: 'Alice', active: false },
  { id: 2, name: 'Bob', active: true },
  { id: 3, name: 'Carol', active: true }
];
const firstActive = users.find(u => u.active);
console.log(firstActive); // { id: 2, name: 'Bob', active: true }

findIndex returns the index instead of the element:


const idx = users.findIndex(u => u.name === 'Carol');
console.log(idx); // 2

findLast and findLastIndex (ES2023) search from the end:


const lastActive = users.findLast(u => u.active);
console.log(lastActive); // { id: 3, name: 'Carol', active: true }

const lastActiveIdx = users.findLastIndex(u => u.active);
console.log(lastActiveIdx); // 2

some and every: Boolean Tests

some returns true if at least one element passes:


const nums = [1, 3, 5, 8];
const hasEven = nums.some(n => n % 2 === 0);
console.log(hasEven); // true

every returns true only if all elements pass:


const allPositive = nums.every(n => n > 0);
console.log(allPositive); // true

Both methods short-circuit — they stop iterating as soon as the result is determined.

flat and flatMap: Handling Nested Arrays

flat flattens nested arrays to a specified depth:


const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());    // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));   // [1, 2, 3, 4, 5, 6]

flatMap maps each element and flattens the result by one level. It is equivalent to map().flat(1) but more efficient:


const sentences = ['Hello world', 'Goodbye moon'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['Hello', 'world', 'Goodbye', 'moon']

map vs forEach vs reduce: The Interview Question

This is one of the most common JavaScript interview questions. Here is the definitive answer:

  • map transforms each element and returns a new array of the same length. Use it for pure transformations.
  • forEach executes a side effect for each element and returns nothing. Use it for operations that do not produce a value.
  • reduce accumulates a single value from all elements. Use it when no more specific method exists.

As a rule of thumb: prefer the most specific method. Use map for transformations, filter for selection, find for searching, some/every for boolean tests, and only reach for reduce when you need custom accumulation.

Method Chaining

One of the greatest strengths of non-mutating methods is composability. You can chain them into readable data pipelines:


const users = [
  { name: 'Alice', age: 25, role: 'admin' },
  { name: 'Bob', age: 17, role: 'user' },
  { name: 'Carol', age: 30, role: 'user' },
  { name: 'David', age: 22, role: 'admin' }
];

const adultAdminNames = users
  .filter(u => u.age >= 18)
  .filter(u => u.role === 'admin')
  .map(u => u.name.toUpperCase());

console.log(adultAdminNames); // ['ALICE', 'DAVID']

Because filter and map return new arrays, chaining is safe and predictable. This pattern is the foundation of functional data processing in JavaScript.

Searching and Sorting

Searching and sorting are fundamental operations. JavaScript provides several approaches with different trade-offs.

Sorting with Custom Compare Functions

We covered sort in the mutator section, but sorting deserves deeper attention. For objects, you almost always need a custom comparator:


const users = [
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Carol', age: 35 }
];

// Sort by age ascending
users.sort((a, b) => a.age - b.age);

// Sort by name alphabetically
users.sort((a, b) => a.name.localeCompare(b.name));

// Sort by multiple criteria: age desc, then name asc
users.sort((a, b) => {
  if (b.age !== a.age) return b.age - a.age;
  return a.name.localeCompare(b.name);
});

Remember that sort is not guaranteed to be stable in older JavaScript engines, though modern engines implement stable sort.

Linear Search Methods

For unsorted arrays, linear search methods scan each element:


const arr = [10, 20, 30, 40];

// indexOf / lastIndexOf — primitive values only
console.log(arr.indexOf(30)); // 2

// includes — primitive values, handles NaN
console.log(arr.includes(20)); // true

// find / findIndex / findLast — with predicate function
console.log(arr.find(n => n > 25));      // 30
console.log(arr.findIndex(n => n > 25)); // 2

For sorted arrays, binary search is theoretically faster (O(log n) vs O(n)), but JavaScript does not provide a built-in binary search method. If you need one, implement it manually or use a library.

ES2015+ New Methods

Modern JavaScript has significantly expanded the array API. Here are the most important additions from recent ECMAScript versions.

Static Methods: Array.from, Array.isArray, Array.of

Array.from creates an array from an iterable or array-like object:


// From a Set
const unique = Array.from(new Set([1, 2, 2, 3]));
console.log(unique); // [1, 2, 3]

// From a string
const chars = Array.from('hello');
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

// With a mapping function
const doubled = Array.from([1, 2, 3], n => n * 2);
console.log(doubled); // [2, 4, 6]

Array.isArray reliably checks if a value is an array:


console.log(Array.isArray([]));        // true
console.log(Array.isArray({}));        // false
console.log(Array.isArray('hello'));   // false

Array.of creates an array from arguments, avoiding the single-number argument trap of new Array():


console.log(new Array(3));   // [empty × 3] — creates 3 empty slots
console.log(Array.of(3));    // [3] — creates array with one element
console.log(Array.of(1, 2, 3)); // [1, 2, 3]

ES2023 Non-Mutating Alternatives

ES2023 introduced non-mutating versions of the most commonly mutated operations. These return new arrays instead of modifying the original:


const arr = [3, 1, 4, 1, 5];

// toSorted — returns new sorted array
const sorted = arr.toSorted((a, b) => a - b);
console.log(sorted); // [1, 1, 3, 4, 5]
console.log(arr);    // [3, 1, 4, 1, 5] — unchanged!

// toReversed — returns new reversed array
const reversed = arr.toReversed();
console.log(reversed); // [5, 1, 4, 1, 3]

// toSpliced — returns new array with splice applied
const spliced = arr.toSpliced(1, 2, 'a', 'b');
console.log(spliced); // [3, 'a', 'b', 1, 5]

// with — returns new array with element at index replaced
const replaced = arr.with(2, 'x');
console.log(replaced); // [3, 1, 'x', 1, 5]

These methods are transformative for functional programming. They eliminate an entire class of mutation bugs and make array operations predictable and chainable.

flat, flatMap, findLast, findLastIndex

We covered these in earlier sections, but note their ECMAScript origins: flat and flatMap arrived in ES2019, while findLast and findLastIndex came in ES2023. Always check browser compatibility when using newer methods, or transpile with Babel.

Common Pitfalls and Best Practices

Even experienced developers make mistakes with array methods. Here are the most common pitfalls and how to avoid them.

Mutating vs Non-Mutating: Choose Consciously

One of the most frequent bugs is accidentally mutating an array that should remain unchanged:


// BAD: mutates the original
function getSorted(arr) {
  return arr.sort((a, b) => a - b);
}

const data = [3, 1, 2];
const sorted = getSorted(data);
console.log(data); // [1, 2, 3] — original was mutated!

// GOOD: returns a new array
function getSorted(arr) {
  return [...arr].sort((a, b) => a - b);
  // or: return arr.toSorted((a, b) => a - b);
}

When writing utility functions, always consider whether the caller expects the original array to be preserved.

When to Use map vs forEach

A common anti-pattern is using forEach to build an array:


// BAD: imperative, verbose
const doubled = [];
[1, 2, 3].forEach(n => doubled.push(n * 2));

// GOOD: declarative, clear
const doubled = [1, 2, 3].map(n => n * 2);

Use map for transformations, filter for selection, and forEach only for side effects that do not produce a value.

Avoid reduce Abuse

reduce is powerful but often overused. Consider these alternatives:


// OVERLY COMPLEX reduce
const sum = [1, 2, 3].reduce((a, b) => a + b, 0);

// Simpler: no reduce needed for basic sum
// (Though reduce is still fine here — the issue is complex cases)

// BAD: reduce for filtering
const evens = [1, 2, 3, 4].reduce((acc, n) => {
  if (n % 2 === 0) acc.push(n);
  return acc;
}, []);

// GOOD: use the right tool
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);

// BAD: reduce for finding max
const max = [1, 5, 3].reduce((a, b) => a > b ? a : b);

// GOOD: Math.max with spread
const max = Math.max(...[1, 5, 3]);

Reserve reduce for genuine accumulation problems: building objects from arrays, grouping, pipelining, and custom aggregations.

Sparse Arrays and Empty Slots

Sparse arrays behave inconsistently across methods:


const sparse = [1, , 3];

// forEach skips empty slots
sparse.forEach((n, i) => console.log(i, n));
// Logs: 0 1, 2 3

// map skips empty slots but preserves them
const doubled = sparse.map(n => n * 2);
console.log(doubled); // [2, empty, 6]

// Object.keys ignores empty slots
console.log(Object.keys(sparse)); // ['0', '2']

Avoid sparse arrays in application code. If you need placeholders, use null or undefined explicitly.

Performance Considerations

Method chains create intermediate arrays, which can be expensive for very large datasets:


// Creates 2 intermediate arrays
const result = hugeArray
  .filter(x => x.active)
  .map(x => x.name)
  .slice(0, 10);

For performance-critical code with massive arrays, consider a single reduce or a generator-based approach. For typical application data (hundreds or thousands of items), the readability of method chains is worth the minimal overhead.

Quick Reference Summary

Here is a condensed JavaScript array methods cheat sheet organized by category:

CategoryMethodsMutates?
Add/Remove Endspush, pop, shift, unshiftYes
Add/Remove MiddlespliceYes
Sort/Reversesort, reverseYes
Fill/Copyfill, copyWithinYes
Combineconcat, joinNo
SubsetsliceNo
Search PrimitivesindexOf, lastIndexOf, includesNo
Search with Predicatefind, findIndex, findLast, findLastIndexNo
Transformmap, flatMapNo
FilterfilterNo
Testsome, everyNo
IterateforEachNo
Accumulatereduce, reduceRightNo
FlattenflatNo
Index AccessatNo
Static MethodsArray.from, Array.isArray, Array.ofNo
ES2023 Non-MutatingtoSorted, toReversed, toSpliced, withNo

Try Our Interactive JavaScript Array Methods Cheat Sheet

Reading about array methods is valuable, but having an interactive reference at your fingertips is transformative. Our free JavaScript Array Methods Cheat Sheet puts every method into a searchable, filterable interface with these features:

  • Real-time search — find methods by name, description, or example
  • Category filtering — narrow to mutators, accessors, iterators, or ES2023 methods
  • Mutating / non-mutating badges — instantly see which methods modify the original array
  • Syntax highlighting — code examples are color-coded for readability
  • One-click copy — copy any code example to your clipboard instantly
  • 100% client-side — no data leaves your browser

Bookmark it, share it with your team, and never search for array method syntax again.

Related Developer Tools

DevToolkit offers a growing collection of free developer utilities. Check out these related tools:

Frequently Asked Questions

What is the difference between map and forEach in JavaScript?

map creates and returns a new array by applying a function to every element, while forEach executes a function on each element but returns undefined. Use map when you need a transformed array; use forEach for side effects like logging or DOM updates.

Which JavaScript array methods mutate the original array?

Mutator methods that change the original array include: push, pop, shift, unshift, splice, sort, reverse, fill, and copyWithin. All other common methods like map, filter, slice, and concat return new arrays and leave the original untouched.

When should I use reduce instead of map or filter?

Use reduce when you need to accumulate a single value from an array — such as a sum, an object, or another array with a custom structure. For simple transformations, prefer map. For selecting elements, prefer filter. Avoid reduce when a more specific method exists.

What are the new array methods introduced in ES2023?

ES2023 introduced toSorted, toReversed, toSpliced, and with — non-mutating versions of sort, reverse, splice, and index assignment. It also added findLast and findLastIndex for searching from the end of an array.

Is the JavaScript Array Methods Cheat Sheet free to use?

Yes. The DevToolkit JavaScript Array Methods Cheat Sheet is completely free with no limits, no registration, and no advertisements. It runs entirely in your browser with no data sent to any server.

Conclusion

JavaScript array methods are the foundation of data manipulation in modern web development. With over forty methods spanning mutation, access, iteration, and transformation, the API is rich but can be overwhelming. Our free interactive JavaScript array methods cheat sheet removes the friction from learning and referencing these methods. Whether you are debugging a reduce accumulator, preparing for an interview question about map versus forEach, or exploring the new ES2023 non-mutating alternatives, the cheat sheet puts every method, syntax, and example at your fingertips. Bookmark it, share it with your team, and keep shipping better JavaScript.

For the latest JavaScript language features, see our JavaScript ES2024+ Features Cheat Sheet article and try the interactive ES2024+ tool for modern APIs like Object.groupBy, Promise.withResolvers, and iterator helpers.

Found this useful? Check out our free developer tools or browse more articles.