JavaScript Array Methods

In the previous topic, we learned how arrays allow us to store multiple values in a single variable.

For example:

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

But JavaScript arrays can do much more than just store values. JavaScript provides many built-in methods that help us add, remove, search, sort, transform, and process array elements.

These are called array methods.

What are Array Methods?

Array methods are built-in functions provided by JavaScript that allow us to perform operations on arrays.

For example:

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

fruits.push("Mango");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

Here, push() is an array method that adds an element to the end of the array.

Adding and Removing Elements

Let's start with the methods you'll use most often.

push()

Adds one or more elements to the end of an array.

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

fruits.push("Mango");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

pop()

Removes the last element from an array.

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

let removed = fruits.pop();

console.log(fruits);
console.log(removed);

Output:

["Apple", "Banana"]
Mango

An interesting thing about pop() is that it returns the element it removed.

unshift()

Adds elements to the beginning of an array.

let fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

shift()

Removes the first element.

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

let removed = fruits.shift();

console.log(fruits);
console.log(removed);

Output:

["Banana", "Mango"]
Apple

So these four methods are easy to remember:

Searching Arrays

includes()

Checks whether an array contains a particular value.

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

console.log(fruits.includes("Banana"));

Output:

true

If the value doesn't exist:

console.log(fruits.includes("Orange"));

Output:

false

indexOf()

Returns the index of the first occurrence of a value.

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

console.log(fruits.indexOf("Mango"));

Output:

2

If the value isn't found, it returns -1.

find()

find() is useful when we want to find an element based on a condition.

let numbers = [10, 20, 30, 40];

let result = numbers.find(number => number > 25);

console.log(result);

Output:

30

find() returns the first element that satisfies the condition.

If nothing matches, it returns undefined.

findIndex()

findIndex() works similarly to find(), but returns the index of the matching element.

let numbers = [10, 20, 30, 40];

let index = numbers.findIndex(number => number > 25);

console.log(index);

Output:

2

Extracting and Modifying Parts of an Array

slice()

slice() creates a new array containing a portion of the original array.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let result = fruits.slice(1, 3);

console.log(result);

Output:

["Banana", "Mango"]

The ending index (3) is not included.

So:

slice(1, 3)
     ↑  ↑
   start end

takes elements at indexes 1 and 2.

Importantly, slice() does not modify the original array.

splice()

splice() can be used to add, remove, or replace elements.

For example, removing an element:

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

fruits.splice(1, 1);

console.log(fruits);

Output:

["Apple", "Mango"]

The first argument specifies where to start, and the second specifies how many elements to remove.

We can also add elements:

let fruits = ["Apple", "Mango"];

fruits.splice(1, 0, "Banana");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

Unlike slice(), splice() changes the original array.

Transforming Arrays

Now we get to some of the most useful modern array methods.

map()

map() creates a new array by transforming every element.

For example, let's double every number:

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6, 8]

The original array remains unchanged:

Original → [1, 2, 3, 4]
New      → [2, 4, 6, 8]

map() is extremely common in modern JavaScript.

filter()

filter() creates a new array containing only the elements that satisfy a condition.

For example, finding even numbers:

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Output:

[2, 4, 6]

So:

map()    → Transform elements
filter() → Select elements

reduce()

reduce() is used when we want to combine all elements into one final value.

For example, calculating a total:

let numbers = [10, 20, 30, 40];

let total = numbers.reduce((sum, number) => {
    return sum + number;
}, 0);

console.log(total);

Output:

100

Here, reduce() takes all the numbers and gradually combines them into one value.

It can be extremely useful for calculating totals, averages, counts, and other aggregated results.

Looping with forEach()

forEach() executes a function once for every element in an array.

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

fruits.forEach(fruit => {
    console.log(fruit);
});

Output:

Apple
Banana
Mango

Compared with a traditional for loop, forEach() can make simple array iteration cleaner.

One important difference is that forEach() is not designed to produce a new array like map() does.

Sorting Arrays

sort()

The sort() method sorts the elements of an array.

For strings:

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

fruits.sort();

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

Sorting Numbers

There is a small JavaScript gotcha here.

By default, sort() converts elements to strings and sorts them lexicographically.

So:

let numbers = [10, 2, 30, 5];

numbers.sort();

console.log(numbers);

may produce:

[10, 2, 30, 5]

For numerical sorting, provide a comparison function:

let numbers = [10, 2, 30, 5];

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

console.log(numbers);

Output:

[2, 5, 10, 30]

For descending order:

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

Reversing an Array

The reverse() method reverses the order of elements.

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

fruits.reverse();

console.log(fruits);

Output:

["Mango", "Banana", "Apple"]

Like sort(), reverse() modifies the original array.

Joining Array Elements

join()

join() combines all array elements into a single string.

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

let result = fruits.join(", ");

console.log(result);

Output:

Apple, Banana, Mango

You can choose any separator:

let result = fruits.join(" - ");

console.log(result);

Output:

Apple - Banana - Mango

concat()

concat() combines arrays and returns a new array.

let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Potato"];

let food = fruits.concat(vegetables);

console.log(food);

Output:

["Apple", "Banana", "Carrot", "Potato"]

The original arrays aren't changed.

Some Important Array Methods at a Glance

A Practical Example

Let's say we have a list of product prices and want to find the total price of products costing more than ₹500.

let prices = [300, 800, 1200, 450, 700];

let expensiveProducts = prices.filter(price => price > 500);

let total = expensiveProducts.reduce((sum, price) => {
    return sum + price;
}, 0);

console.log(expensiveProducts);
console.log(total);

Output:

[800, 1200, 700]
2700

Here, we combined two array methods:

filter() → Select products above ₹500
reduce() → Calculate their total

This kind of chaining is very common in real JavaScript applications.

Conclusion

JavaScript array methods make it much easier to work with collections of data without writing repetitive loops and logic.

The most important methods to become comfortable with are:

push()
pop()
shift()
unshift()
slice()
splice()
map()
filter()
reduce()
forEach()
find()
includes()
sort()

A particularly useful group to remember is:

map() transforms, filter() selects, and reduce() combines.

Once you're comfortable with these methods, working with arrays in JavaScript becomes much easier—and you'll see them constantly in real-world code.