Master JavaScript Array Methods in 2025

Unlock the full potential of JavaScript arrays with our in-depth guide with Examples.

This article explores a wide range of array methods, from classics like map(), filter(), and reduce() to the latest ECMAScript 2023 additions like toSorted(), toReversed(), toSpliced(), and with().

Each method is explained with clear, practical examples to demonstrate its use, making it easy for both beginners and experienced developers to efficiently manipulate arrays.

Whether you’re building dynamic web applications or optimizing data handling, this guide equips you with the knowledge to leverage JavaScript’s powerful array methods in 2025 and beyond.

Join to enhance your coding skills and stay ahead in modern web development!

What is an Array

An array in JavaScript is a data structure used to store multiple values in a single variable. It is an ordered list of elements, which can be of any data type (numbers, strings, objects, or even other arrays). Arrays are versatile and commonly used for tasks like storing lists, iterating over data, and performing operations on collections of items.

Characteristics of Arrays

APIs work like a waiter in a restaurant:

You (user) place an order → it’s your request, like asking a website to fetch data.
The waiter (API) takes the order to the kitchen → the API requests the required data from the server.
The kitchen (server) processes the order → the server fetches the requested information.
The waiter brings the food to your table → the API responds to you.
This entire process happens in a matter of seconds, making websites, apps, and services work smoothly.

Syntax

There are different types of APIs, depending on how they are used and who can access them.

				
					let array = [element1, element2, element3];
// or 
let array = new Array(element1, element2, element3);

Example :

				
					let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 'apple' (accessing the first element)
fruits[1] = 'mango'; // Modifying the second element
console.log(fruits); // ['apple', 'mango', 'orange']

Array Methods

Mutating Methods (Modify the Original Array)

push() – Adds one or more elements to the end of an array and returns the new length.
pop() – Removes the last element from an array and returns that element.
shift() – Removes the first element from an array and returns that element.
unshift() – Adds one or more elements to the beginning of an array and returns the new length.
splice() – Adds, removes, or replaces elements at a specified index in place.
sort() – Sorts the elements of an array in place based on a comparison function.
reverse() – Reverses the order of elements in an array in place.
copyWithin() – Copies a sequence of elements within the array to another position in the same array.
fill() – Fills all or part of an array with a static value.

Non-Mutating Methods (Return a New Array or Value, Original Unchanged)

map() – Creates a new array with the results of calling a function on every element.
filter() – Creates a new array with elements that pass a test provided by a function.
slice() – Returns a shallow copy of a portion of an array from start to end (end not included).
concat() – Merges two or more arrays into a new array.
flat() – Creates a new array with all sub-array elements concatenated recursively up to a specified depth.
flatMap() – Maps each element using a function, then flattens the result into a new array.
toSorted() (ECMAScript 2023) – Returns a new array with elements sorted, leaving the original unchanged.
toReversed() (ECMAScript 2023) – Returns a new array with elements in reversed order, leaving the original unchanged.
toSpliced() (ECMAScript 2023) – Returns a new array with elements added, removed, or replaced at a specified index, leaving the original unchanged.
with() (ECMAScript 2023) – Returns a new array with the element at a specified index replaced, leaving the original unchanged.

Iteration Methods

forEach() – Executes a provided function once for each array element.
reduce() – Reduces the array to a single value by executing a reducer function from left to right.
reduceRight() – Reduces the array to a single value by executing a reducer function from right to left.
every() – Tests whether all elements pass a test provided by a function, returning a boolean.
some() – Tests whether at least one element passes a test provided by a function, returning a boolean.
find() – Returns the first element that satisfies a provided testing function, or undefined.
findIndex() – Returns the index of the first element that satisfies a provided testing function, or -1.
findLast() (ECMAScript 2023) – Returns the last element that satisfies a provided testing function, or undefined.
findLastIndex() (ECMAScript 2023) – Returns the index of the last element that satisfies a provided testing function, or -1.

Accessor Methods

includes() – Determines whether an array contains a specific value, returning a boolean.
indexOf() – Returns the first index at which a given element is found, or -1 if not found.
lastIndexOf() – Returns the last index at which a given element is found, or -1 if not found.
at() (ECMAScript 2022) – Returns the element at a specified index, supporting negative indices to count from the end.
join() – Joins all elements into a string, optionally separated by a specified delimiter.
toString() – Returns a string representing the array and its elements.
toLocaleString() – Returns a localized string representing the array and its elements.

Other Methods

entries() – Returns a new Array Iterator object containing key/value pairs for each index and element.
keys() – Returns a new Array Iterator object containing the keys (indices) of the array.
values() – Returns a new Array Iterator object containing the values of the array.
isArray() (Static Method) – Checks if a value is an array, returning a boolean.