JavaScript Array Methods

Introduction

Arrays are one of the most-used data structures in JavaScript, and most of their power comes from their built-in methods — functions you call on an array to add, remove, search, transform, or reorder its elements. This guide covers the methods you reach for every day, explains the all-important difference between methods that mutate the original array and those that return a new array, and shows each one with a runnable example.

If you are new to arrays themselves, start with the JavaScript Array chapter, then come back here.

Understanding JavaScript Arrays

An array stores an ordered list of values in a single variable. The values can be of any of the JavaScript data types — numbers, strings, objects, even other arrays — and you do not have to decide the size in advance.

Creating an Array

The simplest way to create an array is with square-bracket literal syntax:

let fruits = ["Apple", "Banana", "Cherry"];

This creates an array named fruits with three string elements.

Accessing Array Elements

Elements are accessed by their index, a zero-based position counting from the start of the array:

The length property tells you how many elements there are, and at() accepts negative indexes so at(-1) always gives you the last element.

Mutating vs. Non-Mutating Methods

Before looking at individual methods, learn this distinction — it explains most array bugs:

• Mutating methods change the array in place. push, pop, shift, unshift, splice, sort, reverse, and fill all modify the array you call them on.
• Non-mutating methods leave the original untouched and return a new array or value. map, filter, slice, concat, reduce, find, and the newer toSorted/toSpliced/toReversed fall into this group.

When you share an array across functions or store it in state (for example in a React component), prefer non-mutating methods so you do not accidentally change data somebody else is relying on.

Core Array Methods

Adding and Removing Elements

push()

push() appends one or more elements to the end of the array and returns the new length.

unshift()

unshift() inserts elements at the beginning of the array.

pop()

pop() removes the last element and returns it. Together with push(), it lets an array act as a stack (last in, first out).

shift()

shift() removes the first element and returns it. Note that shift and unshift are slower than push/pop because every remaining element has to be re-indexed.

Finding Elements

indexOf()

indexOf() returns the first index of a value, or -1 if the value is not found. It uses strict equality, so it cannot find objects by their contents.

includes()

includes() answers a simpler yes/no question: is this value in the array? It is clearer than indexOf(x) !== -1 and, unlike indexOf, it can find NaN.

find() and findIndex()

When you need to locate an element by a condition rather than an exact value, use find() (returns the element) or findIndex() (returns its index). Both stop at the first match.

some() and every()

some() returns true if at least one element passes the test; every() returns true only if all of them do.

Iterating and Transforming

These methods take a callback function and are the heart of modern, declarative JavaScript. They pair naturally with the patterns in the JavaScript Loops chapter.

forEach()

forEach() runs a function once per element. It always returns undefined, so use it for side effects (like logging), not for building a new value.

map()

map() creates a new array by transforming each element. The new array always has the same length as the original.

filter()

filter() creates a new array containing only the elements for which the callback returns a truthy value.

reduce()

reduce() boils an array down to a single value by repeatedly applying a function. The callback receives an accumulator and the current element; the second argument to reduce is the starting value of the accumulator.

You can chain these transformers: map first, then filter, then reduce, each step producing the input for the next.

Reordering and Slicing

sort()

sort() sorts in place. By default it compares elements as strings, which gives surprising results for numbers — 10 sorts before 2 because "10" comes before "2" alphabetically. Always pass a compare function when sorting numbers.

reverse()

reverse() flips the order of the elements in place.

slice()

slice(start, end) returns a shallow copy of a portion of the array. The end index is not included, and the original is left untouched — making slice() a handy way to copy an array.

splice()

splice(start, deleteCount, ...items) is the all-purpose in-place editor: it can remove, replace, and insert. Here it inserts "Grape" at index 2 without deleting anything (deleteCount is 0).

concat()

concat() merges arrays into a new array without changing the originals. The spread syntax ([...a, ...b]) does the same thing — see Rest parameters and spread syntax.

fill()

fill(value, start, end) overwrites a range of elements with a static value, in place.

Immutable (Copying) Methods

Introduced in ES2023, these methods do exactly what sort, splice, and reverse do — but they return a new array and leave the original alone. They are ideal for state you must not mutate.

toSorted()

toSpliced()

Conclusion

Mastering JavaScript array methods is one of the highest-leverage skills in the language: map, filter, and reduce replace most manual loops, while knowing which methods mutate versus copy prevents a whole class of bugs. Keep practicing with the runnable examples above, and explore related topics like the JavaScript Array basics and spread syntax.

Practice