Logo

ToolsKit Plus

Search tools
Ctrl K
Favoritekofi

JavaScript Array Methods Explorer

Interactive guide and cheat sheet for JavaScript array methods

JavaScript Array Methods Explorer is a visual guide to help you find the perfect array method for your needs. Compare map, filter, reduce, and more with examples and mutation details.

Categories
Javascript Tools
Search Array Methods
immutablemutatenew arraybooleanfindremove
map()
IMMUTABLE
Creates a new array with the results of calling a provided function on every element in the calling array.
Returns:New Array
Best Use Case:
When you want to transform every element in an array and get a new array of the same length.
Example:
[1, 2, 3].map(x => x * 2); // [2, 4, 6]
filter()
IMMUTABLE
Creates a new array with all elements that pass the test implemented by the provided function.
Returns:New Array
Best Use Case:
When you want to remove elements that don't meet a certain condition.
Example:
[1, 2, 3, 4].filter(x => x > 2); // [3, 4]
reduce()
IMMUTABLE
Executes a reducer function on each element of the array, resulting in a single output value.
Returns:Single value
Best Use Case:
When you want to calculate a total, flatten an array, or build a new object/array based on the current one.
Example:
[1, 2, 3, 4].reduce((acc, curr) => acc + curr, 0); // 10
forEach()
MUTATES
Executes a provided function once for each array element.
Returns:undefined
Best Use Case:
When you want to execute side effects (like logging or saving to DB) for each item.
Example:
[1, 2, 3].forEach(x => console.log(x));
find()
IMMUTABLE
Returns the value of the first element in the provided array that satisfies the provided testing function.
Returns:Element value or undefined
Best Use Case:
When you want to find ONE specific element in an array.
Example:
[{id: 1}, {id: 2}].find(x => x.id === 2); // {id: 2}
findIndex()
IMMUTABLE
Returns the index of the first element in the array that satisfies the provided testing function.
Returns:Number (index)
Best Use Case:
When you want to know the position of an element in an array.
Example:
[10, 20, 30].findIndex(x => x > 15); // 1
some()
IMMUTABLE
Tests whether at least one element in the array passes the test implemented by the provided function.
Returns:Boolean
Best Use Case:
When you want to know if AT LEAST ONE item matches a condition.
Example:
[1, 2, 3].some(x => x > 2); // true
every()
IMMUTABLE
Tests whether all elements in the array pass the test implemented by the provided function.
Returns:Boolean
Best Use Case:
When you want to know if EVERY item matches a condition.
Example:
[1, 2, 3].every(x => x > 0); // true
includes()
IMMUTABLE
Determines whether an array includes a certain value among its entries.
Returns:Boolean
Best Use Case:
When you want to check if a primitive value exists in the array.
Example:
['apple', 'banana'].includes('apple'); // true
push()
MUTATES
Adds one or more elements to the end of an array and returns the new length of the array.
Returns:Number (new length)
Best Use Case:
When you want to add items to the END of an existing array.
Example:
const a = [1]; a.push(2); // a is [1, 2]
pop()
MUTATES
Removes the last element from an array and returns that element.
Returns:Removed element
Best Use Case:
When you want to remove the LAST item from an existing array.
Example:
const a = [1, 2]; a.pop(); // a is [1]
shift()
MUTATES
Removes the first element from an array and returns that removed element.
Returns:Removed element
Best Use Case:
When you want to remove the FIRST item from an existing array.
Example:
const a = [1, 2]; a.shift(); // a is [2]
unshift()
MUTATES
Adds one or more elements to the beginning of an array and returns the new length of the array.
Returns:Number (new length)
Best Use Case:
When you want to add items to the BEGINNING of an existing array.
Example:
const a = [1]; a.unshift(0); // a is [0, 1]
splice()
MUTATES
Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
Returns:New array with deleted items
Best Use Case:
When you want to add/remove/replace elements at ANY position.
Example:
const a = [1, 2, 3]; a.splice(1, 1, 'x'); // a is [1, 'x', 3]
slice()
IMMUTABLE
Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
Returns:New Array
Best Use Case:
When you want to get a piece of an array WITHOUT modifying the original.
Example:
[1, 2, 3, 4].slice(1, 3); // [2, 3]
sort()
MUTATES
Sorts the elements of an array in place and returns the sorted array.
Returns:Reference to same array
Best Use Case:
When you want to reorder items in an array.
Example:
[3, 1, 2].sort(); // [1, 2, 3]

What is JavaScript Array Methods Explorer?

JavaScript Array Methods Explorer is an interactive cheat sheet designed to take the guesswork out of array manipulation. With so many methods available in modern JavaScript (ES6 and beyond), it's often hard to remember which one mutates the original array, which one returns a new array, or which one is most efficient for a specific task.

This tool provides a centralized database of the most commonly used array methods, complete with clear descriptions, use cases, and code examples.

How to Use

  1. Search and Filter: Use the search bar to find methods by name (e.g., reduce) or by behavior (e.g., mutate or transform).
  2. Review the Cards: Each card displays:
    • Method Name: The exact name used in code.
    • Mutation Badge: Green for IMMUTABLE (returns a new array/value) and Red for MUTATES (modifies the original array).
    • Description: A plain-English explanation of what the method does.
    • Returns: What the method actually gives you back.
    • Best Use Case: When you should choose this method over others.
    • Example: A short snippet illustrating the method in action.
  3. Quick Tags: Click on the common tags under the search bar to jump to specific categories of methods.

Basic Knowledge: Mutating vs. Non-Mutating

One of the most important distinctions in JavaScript array methods is whether they change (mutate) the original array or return a new one.

  • Non-Mutating (Non-destructive): Methods like map(), filter(), slice(), and concat() do not change the original array. They return a brand new array. This is the preferred approach in modern frameworks like React.
  • Mutating (Destructive): Methods like push(), pop(), sort(), and splice() modify the original array directly. Use these when you want to save memory or are working in an environment where state mutations are expected.

Common "I want to..." Scenarios

  • Transform every item: Use map().
  • Remove certain items: Use filter().
  • Find one specific item: Use find().
  • Check if any item matches: Use some().
  • Check if all items match: Use every().
  • Calculate a single value (e.g., sum): Use reduce().
  • Get a sub-section of an array: Use slice().

FAQ

Q: Should I always avoid mutating methods?
A: In functional programming and React, yes. However, in plain JavaScript or performance-critical loops, mutating is sometimes faster.

Q: What is the difference between slice() and splice()?
A: slice() is non-mutating and returns a piece of the array. splice() is mutating and is used to add/remove/replace items at specific positions.

Q: Can I stop a forEach() loop?
A: No, you cannot break or return from a forEach() loop. If you need to stop early, use a standard for loop or methods like some() or every().

Q: Which method is fastest?
A: Performance varies by browser, but generally, standard for loops are fastest. However, for most applications, readability and maintainability (using map, filter, etc.) are more important than micro-optimizations.

Send Feedback

Help us improve! Share your thoughts or report an issue.

ToolsKit Plus
AboutTermsPrivacyContact

Copyright © 2022 - 2026 ToolsKit Plus. Unless otherwise noted, all code MIT license.

Made with by Complete JavaScript