Array Methods You Must Know in JavaScript

When you first learn arrays, things feel pretty manageable.

Create an array. Access elements by index. Maybe write a for loop. Done.

But the moment you start building something real, the limitations show up fast. You need to transform data, filter out certain values, add or remove items dynamically, or calculate a total from a list.

And writing a manual for loop every single time gets old very quickly.

This is exactly why JavaScript ships with built-in array methods. They're purpose-built tools that already know how to handle the most common array tasks — so you don't have to reinvent the wheel every time.

In this blog, we'll cover six methods you'll end up using in almost every JavaScript project. For each one, we'll look at what it does, see a clear example, and track how the array changes step by step.

Open your browser console and follow along. Trying these yourself is what makes them actually stick.

---

push() and pop()

Let's start with the two simplest ones.

Think of a stack of plates. When you add a plate, it goes on top. When you remove one, you also take from the top. That's exactly how push() and pop() work — both operate at the end of the array.

push() — Add to the End

const tasks = ["Design", "Review", "Test"];
tasks.push("Deploy");

console.log(tasks);
// ["Design", "Review", "Test", "Deploy"]

Before:

["Design", "Review", "Test"]

After push("Deploy"):

["Design", "Review", "Test", "Deploy"]
                                 ↑
                            added here

pop() — Remove from the End

const tasks = ["Design", "Review", "Test", "Deploy"];
tasks.pop();

console.log(tasks);
// ["Design", "Review", "Test"]

Before:

["Design", "Review", "Test", "Deploy"]
                                 ↑
                           removed here

After:

["Design", "Review", "Test"]

Easy rule to remember:

• push() → add at the end

• pop() → remove from the end

Both methods modify the original array directly.

---

unshift() and shift()

Now let's flip to the other end — the beginning of the array.

Think of a queue at a coffee shop. New customers join from the back, and the person at the front gets served first and leaves. That's the logic behind unshift() and shift().

unshift() — Add to the Beginning

const queue = ["Rahul", "Priya"];
queue.unshift("Meera");

console.log(queue);
// ["Meera", "Rahul", "Priya"]

Before:

["Rahul", "Priya"]

After unshift("Meera"):

["Meera", "Rahul", "Priya"]
    ↑
 added here

shift() — Remove from the Beginning

const queue = ["Meera", "Rahul", "Priya"];
queue.shift();

console.log(queue);
// ["Rahul", "Priya"]

Easy rule:

• unshift() → add at the beginning

• shift() → remove from the beginning

---

forEach() — Do Something for Every Element

Before we get into transformation methods, let's understand about forEach().

Sometimes you don't want to change the array — you just want to do something with each element. Print it, log it, send it somewhere.

The traditional way:

const scores = [88, 74, 95, 61];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

The forEach() way:

const scores = [88, 74, 95, 61];

scores.forEach(function(score) {
  console.log(score);
});

// 88
// 74
// 95
// 61

Same result. Less boilerplate. You can almost read it like English:

"For each score in this array, print it."

One important thing: forEach() does not return a new array. It's used for performing actions — logging, updating the DOM, triggering side effects. Not for transforming or creating new data.

---

map() — Transform Every Element

map() is one of the most used methods in all of JavaScript.

Use it when you want to take every element in an array and transform it into something else. The original stays untouched and a brand new array comes out the other side.

const prices = [100, 250, 80, 400];

const discounted = prices.map(function(price) {
  return price * 0.9; // 10% off
});

console.log(discounted);
// [90, 225, 72, 360]

Original:

[100, 250, 80, 400]

After map():

[90, 225, 72, 360]

Every element went through the same transformation. The original prices array is completely unchanged.

Two things to remember about map():

1. It always returns a new array

2. The new array always has the same number of elements as the original — it transforms, not removes

---

filter() — Keep Only What Matches

While map() transforms every element, filter() is selective. It goes through the array and keeps only the elements where a condition returns true. Everything else gets dropped.

const scores = [45, 82, 38, 91, 67, 55];

const passing = scores.filter(function(score) {
  return score >= 60;
});

console.log(passing);
// [82, 91, 67]

Original:

[45, 82, 38, 91, 67, 55]

After filter(score >= 60):

[82, 91, 67]

45, 38, and 55 didn't pass the condition so they were left out. The rest made it through.

Unlike map(), the output array can be shorter than the original — it only keeps what matches.

And just like map(), filter() returns a new array. The original is untouched.

---

reduce() — Combine Everything into One Value

reduce() is the one that confuses beginners the most. But the core idea is simple.

Where map() transforms and filter() selects, reduce() combines — it takes every element in the array and accumulates them into a single result.

The most common example is calculating a total:

const cart = [299, 149, 499, 89];

const total = cart.reduce(function(sum, item) {
  return sum + item;
}, 0);

console.log(total); // 1036

Let's see through exactly what happens here:

Start:     sum = 0
Step 1:    0 + 299 = 299
Step 2:    299 + 149 = 448
Step 3:    448 + 499 = 947
Step 4:    947 + 89 = 1036

Final result: 1036

The 0 at the end is the starting value of sum. Each time the function runs, sum carries the running total forward. By the end, you have one final accumulated value.

The whole array reduced to a single number. That's why it's called reduce.

---

Quick Reference

Method	What it does	Modifies original?	Returns
push()	Add to end	Yes	New length
pop()	Remove from end	Yes	Removed element
unshift()	Add to beginning	Yes	New length
shift()	Remove from beginning	Yes	Removed element
forEach()	Run function for each item	No	undefined
map()	Transform every element	No	New array
filter()	Keep matching elements	No	New array
reduce()	Combine into single value	No	Single value

---

Assignment — Try yourSelf

const numbers = [4, 11, 3, 18, 7, 25];

// Step 1: Double every number using map()
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);
// [8, 22, 6, 36, 14, 50]

// Step 2: Filter numbers greater than 10
const filtered = doubled.filter(function(num) {
  return num > 10;
});
console.log(filtered);
// [22, 36, 14, 50]

// Step 3: Calculate total sum using reduce()
const total = filtered.reduce(function(sum, num) {
  return sum + num;
}, 0);
console.log(total);
// 122

Run each step one at a time. After each line, log the result and confirm it matches what you expected. If something surprises you, read through it again and trace why.

Also try:

• Using push() to add a number to numbers before any of the steps

• Using filter() with a different condition — say, only even numbers

• Changing the starting value of reduce() from 0 to 100 and seeing what changes

---

Wrapping Up

Array methods aren't just shortcuts. They're how JavaScript developers think about working with data.

Once these feel natural:

• push / pop → end of array

• unshift / shift → beginning of array

• forEach → do something per element

• map → transform every element

• filter → keep what matches

• reduce → combine into one value

You'll find yourself reaching for them constantly. They show up in API responses, React state updates, form data, search filtering basically everywhere real data is handled.

The console is your best friend here. Try each one, break things, change values, and watch what happens. That's the fastest way to go from knowing what these methods are to actually thinking in them.