Array Methods You Must Know in JavaScript

When you first learn array in JavaScript they feel pretty simple. You create an array, access them using indexes, maybe run a for loop to go through the items. And for a while, that works perfectly.

But the moment you start building real applications, something becomes obvious. You often need to modify array, transform values, filter data, or calculate something from all the elements.

And writing a manual for loop for every little task quickly become repetitive. This is exactly why JavaScript provides built-in array methods. These methods are basically tools designed to work with arrays. Instead of writing long loops, you can call a method that already knows how to handle the job. Once you start using these methods regularly, your code becomes shorter, easier to read.

In this guide, we’ll go through six array methods that every JavaScript developer ends up using almost daily. We’ll understand what they do, look at simple examples, and see how they change the array step by step.

If you're learning JavaScript, I recommend opening your browser console and trying each example yourself.

---

push() and pop()

Let’s start with two of the simplest methods, these methods work at the end of an array. Imagine a stack of books on a table. When you add a book, you place it on top of the stack, and when you remove one, you also remove the top book first.
This is exactly how push() and pop() behave.

push()

push() adds a new element to the end of the array.

const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

Before:

[1, 2, 3]

After push:

[1, 2, 3, 4]
            ↑
         added here

So push() simply attaches a new value to the end.

---

pop()

pop() does the opposite. It removes the last element from the array.

const numbers = [1, 2, 3, 4];
numbers.pop();
console.log(numbers); // [1, 2, 3]

Before:

[1, 2, 3, 4]
            ↑
        removed

After:

[1, 2, 3]

So the pattern becomes very easy to remember:
push() - add at the end
pop() - remove fro the end

One important thing to note: both of these modify the original array.

---

shift() and unshift()

Now let’s look at methods that work at the beginning of the array instead of the end. Imagine a queue at a ticket counter. The person who arrives first stands at the front of the line, and the next person stands behind them. When the counter opens, the person at the front leaves first.
That’s the same idea behind shift() and unshift().

unshift()

unshift() adds a new element to the beginning of the array.

const fruits = ["Mango", "Banana"];
fruits.unshift("Apple");
console.log(fruits); // ["Apple", "Mango", "Banana"]

Before:

["Mango", "Banana"]

After:

["Apple", "Mango", "Banana"]
   ↑
 added here

---

shift()

shift() removes the first element from the array.

const fruits = ["Apple", "Mango", "Banana"];
fruits.shift();
console.log(fruits); // ["Mango", "Banana"]

So the rule becomes:
unshift() - add at beginning
shift() - remove from beginning

---

forEach()

Before moving to transformation methods, let’s talk about something very common. Sometimes we simply want to do something with every element in an array.
The traditional way is using a for loop.

const numbers = [1, 2, 3];

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

But JavaScript provides a cleaner alternative called forEach().

const numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

Output:

1
2
3

forEach() simply goes through the array and runs a function for every element.

You can read it almost like a sentence:

For each number in this array, print it

It’s more readable and avoids writing loop boilerplate every time. One important detail forEach() does not return a new array.

It is mostly used when you want to perform an action, like printing something or triggering a side effect.

---

map()

Now we come to one of the most useful array methods: map(). map() is used when you want to transform every element in an array. Imagine you have a list of prices and you want to apply a discount, or you have numbers and want to double them.
This is where map() shines.

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8]

Original array:

[1, 2, 3, 4]

After map:

[2, 4, 6, 8]

Every element went through the transformation. The important thing about map() is it creates a new array, the original array stays unchanged.

Another thing to remember map() always returns an array with the same number of elements as the original. It transforms values but does not remove them.

---

filter()

Sometimes we don’t want to transform every value. Instead, we want to select only certain items.

For example:

• numbers greater than 10

• students who passed an exam

• products that are in stock

That’s where filter() comes in.

const numbers = [3, 8, 1, 12, 5, 15];

const result = numbers.filter(function(num) {
  return num > 5;
});

console.log(result); // [8, 12, 15]

Original array:

[3, 8, 1, 12, 5, 15]

Filtered result:

[8, 12, 15]

So what happened?
filter() checked each element. If the condition returned true, the element stayed. If it returned false, the element was skipped. The result is a new array containing only the matching values.

---

reduce()

reduce() is often the method beginners find most confusing. But the core idea is actually simple. reduce() takes all the values of an array and combines them into a single result. A common example is calculating a total sum.

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

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

console.log(total); // 10

Step by step:

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

So each element contributes to a running total. The variable sum keeps accumulating the result. That’s why it’s called reduce. Because the entire array eventually becomes one final value.

---

Practice Assignment

To really understand these methods, try this small exercise.

const numbers = [3, 7, 2, 14, 9, 21];

Step 1: Double every number

const doubled = numbers.map(num => num * 2);
console.log(doubled);

Step 2: Get numbers greater than 10

const filtered = doubled.filter(num => num > 10);
console.log(filtered);

Step 3: Calculate the total sum

const total = filtered.reduce((sum, num) => sum + num, 0);
console.log(total);

Try running each step in your console and observe what happens.

---

Final Understanding

Array methods make working with data in JavaScript much easier. Instead of writing manual loops for everything, these methods give you clear and expressive tools for common tasks.
Just remember the core ideas:

push / pop => add or remove at the end

shift / unshift => add or remove at the beginning

forEach => run something for every element

map => transform elements

filter => keep elements that match a condition

reduce => combine everything into a single value

Once you start using these methods regularly, your JavaScript code becomes cleaner, more readable, and easier to maintain.

And the best way to truly understand them?
Open your console, experiment with arrays, and see how each method changes the data step by step.

That’s where the learning really happens.