JavaScript

Updated for 2026

JavaScript Array Methods Cheatsheet 2026

Complete guide to JavaScript Array prototype methods, functional iteration, search techniques, transformations, and mutation styles.

Target Version Compatibility

Interactive Skill Mastery

Mark commands as learned to build your customized reference tracker. Retained locally in this browser.

Level:Novice

Command Mastery Progress0 of 22 Mastered (0%)

Iterators

arr.forEach((item, index) => { console.log(item, index); });

AdvancedPerformance

Execute a callback function once for each item in the array.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
  console.log(item, index);
});

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const keys = arr.keys(); for (const key of keys) { ... }

BeginnerBasics

Return a new Array Iterator containing the index keys of the array.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const keys = arr.keys();
for (const key of keys) { ... }

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

Transformers

const doubled = arr.map(item => item * 2);

BeginnerBasics

Create a new array with the transformed results of calling a callback on every element.

When to Use

When you want to transform every single item in an array using a callback function, returning a brand new array of the same length.

Common Mistakes

Using map when you don't intend to return a value. If you are just running side-effects (like logging or updating DOM), use 'forEach' instead.

Shortcut / Pro-Tip

Can be chained directly: arr.map(...).filter(...)

Example

const ages = [10, 20, 30];
const nextYearAges = ages.map(age => age + 1);

Output Example

Console / Terminal

[11, 21, 31]

const nested = arr.flatMap(x => [x, x * 2]);

AdvancedPerformance

Map each element with a transformation, then flatten the result into a single array.

When to Use

When transforming every element in an array, yielding a new array with the mapped outputs without mutating the original elements.

Common Mistakes

Using map for general loops without returning values. Use forEach instead.

Shortcut / Pro-Tip

Map preserves the exact length of the original array.

Example

const arr = [1, 2, 3, 4, 5];
const nested = arr.flatMap(x => [x, x * 2]);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const flatArr = nested.flat(2);

BeginnerBasics

Recursively flatten nested arrays up to the specified depth dimension.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const flatArr = nested.flat(2);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

Filters

const odds = arr.filter(num => num % 2 !== 0);

IntermediateAdvanced

Create a new array populated with all elements that pass the custom boolean test.

When to Use

When you need to filter down elements from an array based on a boolean condition, yielding a clean subset array.

Common Mistakes

Expecting filter to mutate the original array. Filter is immutable and returns a *new* array.

Shortcut / Pro-Tip

Always returns an array, even if only 1 item matches, or an empty array [] if none match.

Example

const prices = [15, 20, 35, 40];
const expensive = prices.filter(p => p > 30);

Output Example

Console / Terminal

[35, 40]

Searchers

const found = arr.find(item => item.id === 42);

BeginnerBasics

Retrieve the value of the first element that satisfies the provided testing filter.

When to Use

When searching for the existence, position, or specific value of items inside your array.

Common Mistakes

Forgetting that 'find' returns only the *first* matching element, or returns 'undefined' if no element matches.

Shortcut / Pro-Tip

Use 'some()' if you only need a quick true/false check on whether an element matches.

Example

const arr = [1, 2, 3, 4, 5];
const found = arr.find(item => item.id === 42);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const idx = arr.findIndex(item => item.id === 42);

AdvancedPerformance

Retrieve the index of the first element satisfying the test function, or -1 if none match.

When to Use

When searching for the existence, position, or specific value of items inside your array.

Common Mistakes

Forgetting that 'find' returns only the *first* matching element, or returns 'undefined' if no element matches.

Shortcut / Pro-Tip

Use 'some()' if you only need a quick true/false check on whether an element matches.

Example

const arr = [1, 2, 3, 4, 5];
const idx = arr.findIndex(item => item.id === 42);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const contains = arr.includes(val);

BeginnerBasics

Check if the array contains a specific value and return a boolean.

When to Use

When searching for the existence, position, or specific value of items inside your array.

Common Mistakes

Forgetting that 'find' returns only the *first* matching element, or returns 'undefined' if no element matches.

Shortcut / Pro-Tip

Use 'some()' if you only need a quick true/false check on whether an element matches.

Example

const arr = [1, 2, 3, 4, 5];
const contains = arr.includes(val);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const firstIndex = arr.indexOf(val);

AdvancedPerformance

Return the first index at which a given element can be found, or -1.

When to Use

When searching for the existence, position, or specific value of items inside your array.

Common Mistakes

Forgetting that 'find' returns only the *first* matching element, or returns 'undefined' if no element matches.

Shortcut / Pro-Tip

Use 'some()' if you only need a quick true/false check on whether an element matches.

Example

const arr = [1, 2, 3, 4, 5];
const firstIndex = arr.indexOf(val);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const matchesAny = arr.some(x => x > 100);

BeginnerBasics

Return true if at least one element in the array passes the testing function.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const matchesAny = arr.some(x => x > 100);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const matchesAll = arr.every(x => x > 0);

BeginnerBasics

Return true if all elements in the array satisfy the testing function.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const matchesAll = arr.every(x => x > 0);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

Reducers

const sum = arr.reduce((acc, curr) => acc + curr, 0);

AdvancedPerformance

Accumulate array values from left to right into a single output using a reducer.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, curr) => acc + curr, 0);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const sumRight = arr.reduceRight((acc, curr) => acc + curr, 0);

AdvancedPerformance

Accumulate array values from right to left into a single output.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const sumRight = arr.reduceRight((acc, curr) => acc + curr, 0);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

Mutators

arr.push(newElement);

IntermediateTeam Workflow

Append one or more elements to the end of the array and return the updated length.

When to Use

When directly mutating the array, removing, replacing, or appending items in memory.

Common Mistakes

Mutating array states directly in React. In React, always make a shallow copy (e.g. [...arr]) before modifying.

Shortcut / Pro-Tip

Splice mutates in-place, while slice creates a safe, immutable copy.

Example

const arr = [1, 2, 3, 4, 5];
arr.push(newElement);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const lastItem = arr.pop();

BeginnerBasics

Remove the very last element of the array and return that element.

When to Use

When directly mutating the array, removing, replacing, or appending items in memory.

Common Mistakes

Mutating array states directly in React. In React, always make a shallow copy (e.g. [...arr]) before modifying.

Shortcut / Pro-Tip

Splice mutates in-place, while slice creates a safe, immutable copy.

Example

const arr = [1, 2, 3, 4, 5];
const lastItem = arr.pop();

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const firstItem = arr.shift();

BeginnerBasics

Remove the very first element of the array and return that element.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const firstItem = arr.shift();

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

arr.unshift(newFirstElement);

BeginnerBasics

Prepend one or more elements to the beginning of the array and return the new length.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
arr.unshift(newFirstElement);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const sliced = arr.slice(start, end);

BeginnerBasics

Return a safe shallow copy of a portion of an array without altering the original array.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(start, end);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

const removed = arr.splice(startIndex, count, item1);

AdvancedPerformance

Alter the array content by deleting, replacing, or inserting new elements.

When to Use

When directly mutating the array, removing, replacing, or appending items in memory.

Common Mistakes

Mutating array states directly in React. In React, always make a shallow copy (e.g. [...arr]) before modifying.

Shortcut / Pro-Tip

Splice mutates in-place, while slice creates a safe, immutable copy.

Example

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(startIndex, count, item1);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

arr.sort((a, b) => a - b);

BeginnerBasics

Sort the elements of the array in place according to a custom comparison function.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
arr.sort((a, b) => a - b);

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

arr.reverse();

BeginnerBasics

Invert the order of the array elements in place.

When to Use

Use when you want to execute operations on JavaScript Arrays to transform, search, or mutate elements.

Common Mistakes

Mutating arrays accidentally when you should treat them immutably, especially in React states.

Shortcut / Pro-Tip

Chaining array methods together creates clean functional pipelines.

Example

const arr = [1, 2, 3, 4, 5];
arr.reverse();

Output Example

Console / Terminal

// Returns transformed or queried elements depending on array dimensions

JS Array Methods Best Practices

1Maintain Immutability

Avoid methods that mutate the original array (e.g. splice, push, sort) inside state-management libraries like React. Use map, filter, or slice instead.

2Return Values in Map/Reduce

Ensure your callback functions always return a value, otherwise map arrays will be populated with undefined.

3Use flatMap Over map.flat

Combining map and flat into flatMap() is cleaner, more performant, and executes in a single pass.

4Select the Right Search Tool

Use find() for objects, indexOf() for primitive values, and includes() for a quick boolean check.

5Provide Initial Value in Reduce

Always provide an initial accumulator value to prevent runtime type crashes on empty arrays.

Common JS Array Methods Errors & Solutions

Error

Cannot read properties of undefined (reading 'map')

Solution

Ensure the variable is initialized as an array [] before running iteration loops. Guard it with optional chaining: arr?.map().

Error

Array mutated directly inside React State

Solution

Do not use mutate methods. Create a shallow copy first (e.g. const newArr = [...oldArr]; newArr.push(x);) then update state.

Error

reduce of empty array with no initial value

Solution

Always supply a fallback initial value as the second argument to reduce (e.g. arr.reduce((acc, x) => acc + x, 0)).

Error

find() returns undefined

Solution

Always check if your search return matches undefined before reading properties on the output object.

Error

sort() sorts numbers incorrectly

Solution

By default, sort() converts elements to strings. Pass a comparator function: arr.sort((a,b) => a - b) to sort numbers numerically.

Common JS Array Methods Interview Questions

Q1What is the difference between map() and forEach()?

map() transforms every element in an array and returns a brand-new array of identical length. forEach() executes side-effects for each element and returns undefined.

Q2What is the difference between slice() and splice()?

slice() is immutable and returns a shallow copy of a portion of an array. splice() is mutable and modifies the original array in-place by adding, replacing, or deleting elements.

Q3How does the reduce() method work?

reduce() runs a reducer callback function on each element of the array, passing the accumulated result from the previous iteration, yielding a single aggregated value.

Q4What does flatMap() do?

flatMap() applies a transformation callback to each element, and then flattens the result by one level, executing map and flat in a single optimized pass.

Q5What is the difference between find() and filter()?

find() returns only the first single element that matches the testing condition, while filter() returns a new array containing all elements that match.

Related Resources

Tool

REST API Tester

Test API routes and endpoints directly in your browser with full request controls.

Tool

JSON Formatter & Validator

Beautify, validate, and minify JSON structures instantly.

Article

Best Free Online Developer Tools

An expert review of must-have online utilities for developers.

Cheatsheet

Git Cheatsheet

Essential command reference for local and remote version control repositories.