Blog

This guide serves as your definitive reference to JavaScript array methods, categorized by their primary use cases.

In modern web development, arrays are the standard vessel for handling collections of data—whether you are rendering a list of products in React, processing API payloads in Node.js, or manipulating DOM elements.

As JavaScript has evolved through the ECMAScript standards up to 2026, the language has expanded its array utility belt. We now have a robust mix of traditional mutating JavaScript array methods (which change the original array) and modern immutable JavaScript array methods (which safely return new copies).

1. Adding and Removing Elements (Stack & Queue Javascript Array Methods)

These JavaScript array methods allow you to treat arrays like stacks (LIFO) or queues (FIFO). Note: All of these JavaScript array methods mutate the original array.

push()

Adds one or more elements to the end of an array and returns the new length. This JavaScript array method modifies the original array and is commonly used when dynamically appending data such as items in a cart or logs.

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 from an array and returns it. It mutates the array and is useful in stack-based operations like undo functionality.

const tasks = ['code', 'test', 'deploy'];
const completed = tasks.pop();

console.log(tasks); // ['code', 'test']
console.log(completed); // 'deploy'

unshift()

Adds one or more elements to the beginning of an array and returns the updated length. It modifies the original array and is often used in queue-like structures where priority insertion is needed.

const line = ['Bob', 'Charlie'];
line.unshift('Alice');

console.log(line); // ['Alice', 'Bob', 'Charlie']

shift()

Removes the first element from an array and returns it. This JavaScript array method mutates the array and is typically used for queue operations such as processing tasks in order.

const queue = ['Alice', 'Bob', 'Charlie'];
const served = queue.shift();

console.log(queue); // ['Bob', 'Charlie']
console.log(served); // 'Alice'

2. Slicing, Splicing, and Filling

These JavaScript array methods are used for extracting parts of an array, inserting items in the middle, or replacing existing elements.

slice()

Returns a shallow copy of a portion of an array into a new array without modifying the original. It is ideal for extracting subsets of data, especially in immutable workflows like React state management.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const mammals = animals.slice(1, 3);

console.log(mammals); // ['bison', 'camel']
console.log(animals); // Original remains unchanged

splice()

Adds, removes, or replaces elements in-place within an array. It mutates the original array and returns the removed elements. This JavaScript array method is powerful but should be used cautiously in modern applications due to its mutating behavior.

const months = ['Jan', 'March', 'April', 'June'];
// Insert 'Feb' at index 1, delete 0 items
months.splice(1, 0, 'Feb');
console.log(months); // ['Jan', 'Feb', 'March', 'April', 'June']

// Replace 'June' (index 4) with 'May'
months.splice(4, 1, 'May');
console.log(months); // ['Jan', 'Feb', 'March', 'April', 'May']

fill()

Replaces elements in an array with a static value from a start index to an end index. It mutates the original array and is commonly used to initialize arrays with default values.

const seats = [null, null, null, null];
seats.fill('reserved', 1, 3);

console.log(seats); // [null, 'reserved', 'reserved', null]

3. The Functional Powerhouses: Iteration & Transformation

These JavaScript array methods are the core of functional programming in JavaScript. They loop through your data and allow you to transform or filter it without writing manual for loops.

forEach()

Executes a callback function once for each array element. It does not return a new array and is mainly used for side effects such as logging, API calls, or DOM updates.

const users = ['Alice', 'Bob'];
users.forEach((user, index) => {
  console.log(`User ${index + 1}: ${user}`);
});
// Output:
// User 1: Alice
// User 2: Bob

map()

Creates a new array by applying a function to each element. It does not mutate the original array and always returns an array of the same length, making it perfect for transforming data.

const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.2);

console.log(withTax); // [12, 24, 36]

filter()

Creates a new array containing only elements that pass a given condition. It is widely used for searching, filtering, and extracting subsets of data.

const ages = [15, 22, 18, 12, 30];
const adults = ages.filter(age => age >= 18);

console.log(adults); // [22, 18, 30]

reduce()

Executes a reducer function on each element to produce a single accumulated value. It is extremely flexible and can be used for summing values, transforming structures, grouping data, or flattening arrays.

const cart = [
  { item: 'Book', cost: 15 },
  { item: 'Pen', cost: 2 }
];

// 0 is the starting value for the accumulator (total)
const totalCost = cart.reduce((total, currentItem) => {
  return total + currentItem.cost;
}, 0);

console.log(totalCost); // 17

4. Searching and Locating

JavaScript offers multiple ways to find data, depending on whether you need a boolean check, an index, or the item itself.

includes()

Checks whether an array contains a specific value and returns true or false. It is a simple and readable alternative to index-based checks.

const roles = ['admin', 'editor', 'viewer'];
console.log(roles.includes('editor')); // true
console.log(roles.includes('superadmin')); // false

indexOf() and lastIndexOf()

• indexOf(): Returns the first index of a specified element, or -1 if not found. It is useful for locating positions within arrays.

• lastIndexOf(): Returns the last index of a specified element by searching from the end. It is helpful when dealing with duplicate values.

const scores = [10, 20, 30, 20, 40];
console.log(scores.indexOf(20)); // 1
console.log(scores.lastIndexOf(20)); // 3

find() and findIndex()

• find(): Returns the first element that satisfies a given condition. If no match is found, it returns undefined. It is ideal when you need the actual object instead of just its index.

• findIndex(): Returns the index of the first element that matches a condition, or -1 if no match is found. Useful when position matters.

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

const jane = users.find(u => u.name === 'Jane');
console.log(jane); // { id: 2, name: 'Jane' }

const janeIndex = users.findIndex(u => u.name === 'Jane');
console.log(janeIndex); // 1

findLast() and findLastIndex() (ES2023)

These behave identically to find() and findIndex(), but they search the array from the end to the beginning.

const temperatures = [72, 85, 90, 65, 88];
// Find the last temperature recorded over 80 degrees
const lastHotTemp = temperatures.findLast(t => t > 80);

console.log(lastHotTemp); // 88

5. Testing Array Elements

Sometimes you just need to validate the data inside an array without modifying it.

some()

Checks if at least one element satisfies a condition and returns true immediately once a match is found. It is efficient for validation checks.

const permissions = ['read', 'write', 'delete'];
const canDelete = permissions.some(p => p === 'delete');

console.log(canDelete); // true

every()

Checks if all elements satisfy a condition. It stops execution as soon as a failure is detected, making it efficient for validation scenarios.

const studentGrades = [85, 90, 92, 88];
const allPassed = studentGrades.every(grade => grade >= 60);

console.log(allPassed); // true

6. The Modern Immutable JavaScript array Methods (ES2023+)

Historically, sorting or reversing an array mutated the original data. To fix this, JavaScript introduced new methods that perform the action but return a new copy.

toSorted() vs sort()

• sort() Sorts the elements of an array in place and returns the sorted array. By default, it sorts values as strings, so a compare function is often required for numbers.

• toSorted() Returns a new sorted array without modifying the original. It is the modern, immutable alternative to sort().

const nums = [3, 1, 4, 2];
const sortedNums = nums.toSorted((a, b) => a - b);

console.log(sortedNums); // [1, 2, 3, 4]
console.log(nums); // [3, 1, 4, 2] (Original is safe!)

toReversed() vs reverse()

Returns a new array with the elements in reverse order.

const steps = ['Step 1', 'Step 2', 'Step 3'];
const backwards = steps.toReversed();

console.log(backwards); // ['Step 3', 'Step 2', 'Step 1']

toSpliced() vs splice()

Returns a new array with some elements removed and/or replaced.

const colors = ['red', 'green', 'blue'];
const newColors = colors.toSpliced(1, 1, 'yellow');

console.log(newColors); // ['red', 'yellow', 'blue']
console.log(colors); // ['red', 'green', 'blue']

with()

Returns a new array with a specific index replaced with a new value. It is a cleaner and immutable replacement for direct index assignment.

const techStack = ['React', 'Angular', 'Vue'];
const updatedStack = techStack.with(1, 'Svelte');

console.log(updatedStack); // ['React', 'Svelte', 'Vue']

7. Flattening, Joining, and Grouping

join()

Converts all elements of an array into a string, separated by a specified delimiter. It is useful for building readable output or formatted strings.

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

flat()

Flattens nested arrays into a single array up to a specified depth. It is useful when working with deeply nested data structures.

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

flatMap()

Applies a mapping function and then flattens the result by one level. It is more efficient than using map() followed by flat().

const sentences = ["Hello world", "How are you"];
const wordsArray = sentences.flatMap(sentence => sentence.split(' '));

console.log(wordsArray); // ["Hello", "world", "How", "are", "you"]

Object.groupBy() (ES2024)

Groups elements of an array into an object based on a callback function. It simplifies grouping logic that previously required reduce().

const pets = [
  { name: 'Rex', species: 'dog' },
  { name: 'Whiskers', species: 'cat' },
  { name: 'Fido', species: 'dog' }
];

const groupedPets = Object.groupBy(pets, pet => pet.species);

/* Result:
{
  dog: [{ name: 'Rex', species: 'dog' }, { name: 'Fido', species: 'dog' }],
  cat: [{ name: 'Whiskers', species: 'cat' }]
}
*/

8. Static JavaScript Array Methods

These JavaScript array methods are called directly on the Array constructor, not on an array instance.

Array.isArray()

Checks whether a value is an array and returns a boolean. It is the most reliable method for type checking arrays.

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({ foo: 123 })); // false

Array.from()

Creates a new array from iterable or array-like objects such as strings, NodeLists, or arguments. It is useful for converting non-array data into arrays.

const string = "JS";
const charArray = Array.from(string);

console.log(charArray); // ['J', 'S']

References

• MDN Web Docs: Array
• ECMAScript Specification (TC39)

Conclusion

The JavaScript array API is vast, but you don’t need to memorize every single detail overnight. Start by categorizing them in your mind: mutating vs. immutable, and searching vs. transforming.

As you build applications in 2026, lean heavily into the functional JavaScript array methods (map, filter, reduce) and the newer immutable JavaScript array methods (toSorted, with). By treating your arrays as immutable data structures, you will write cleaner, more predictable code that is easier to debug and perfectly suited for modern reactive frameworks.