JavaScript Array Methods Explained for Beginners: push, pop, map, filter & reduce

When learning JavaScript, arrays are one of the most important things you’ll work with. Arrays store multiple values, and JavaScript provides many built-in methods to manipulate them easily.

In this blog, we will explore some common array methods with very simple examples and before/after states.

1) push() and Pop()

These are the methods that work at the end of the array.

push() : This adds an element at the end of the array. Let us understand from below example.

let chai = ["ginger", "oolong", "rose"];

chai.push("green");

So the array earlier was,

["ginger", "oolong", "rose"]

and after push command the array becomes,

["ginger", "oolong", "rose", "green"]

Now, pop() : This method removes the last element of the given array. See the below example for reference.

let chai = ["ginger", "oolong", "rose", "green"];

chai.pop("green");

Earlier the array was,

["ginger", "oolong", "rose", "green"]

and after pop() the array becomes,

["ginger", "oolong", "rose"]

These operations are mostly used in 1D array and stack Data Structures. It can simply be remembered by the example of building blocks in which last element is on top and first element is at bottom and after the operations,

1. To add from top, we use push()

2. To remove from top, we use pop()

---

2) shift() and unshift()

These are methods that work at the beginning of an array.

shift() removes the first element of an array and shifts all remaining elements one position to the left (e.g., index 1 becomes 0, index 2 becomes 1). Look carefully at below example for better understanding.

let numbers = [10, 20, 30];

numbers.shift();

Before the array was,

[10, 20, 30]

After shift(), the array becomes,

[20, 30]

unshift() adds an element to the beginning of an array and shifts all existing elements one position to the right (e.g., index 0 becomes 1, index 1 becomes 2, and so on). From below example:

let numbers = [20, 30];

numbers.unshift(10);

So before the array was,

[20, 30]

After unshift() the array becomes,

[10, 20, 30]

---

3) map()

This method is used when we want to transform every element in an array. This method creates a new array by applying a callback function to every element of an existing array without changing the original array.

Example: double all numbers in a given array.

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

let result = numbers.map(num => num * 2);

Before:

[1,2,3,4]

After map():

[2,4,6,8]

We can understand clearly from above diagram about map() method,

The diagram shows how map() works:

1. Start with an array

2. Loop through each element

3. Apply a function

4. Return new values

5. Store results in a new array

Such that the original array remains unchanged. You might be thinking "Why do we need map if we can do it from traditional for-loop?"

Traditional loop vs map

For loop:

let doubled = [];

for(let i=0;i<numbers.length;i++){
  doubled.push(numbers[i] * 2);
}

Using map():

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

map() is shorter and cleaner.

---

4) filter()

filter() is used when we want to create a new array to keep only elements that match a condition or pass the given test.

Example: voters greater than 18 years of age.

let age = ["6", "10", "19", "25"];

let result = age.filter(age => age > 18);

So, before the array was:

["6", "10", "19", "25"]

After .filter() the array becomes:

["19", "25"]

Below is flowchart to understand clearly from above diagram about filter() method,

The above diagram shows:

1. Go through each element

2. Check condition

3. If condition is true then keep element

4. If condition is false then discard

A new filtered array is returned without altering the original array. "Why do we need filter if we can do it from traditional for-loop?"

Traditional loop vs map

For loop:

let result = [];

for(let i=0;i<numbers.length;i++){
  if(numbers[i] > 10){
    result.push(numbers[i]);
  }
}

filter() :

let result = numbers.filter(n => n > 10);

Much cleaner.

---

5) reduce()

reduce() is used to combine all array values into a single value (in other words, it is used to reduce the array to single value).

It is commonly used to find sum, average and count values.

Example: sum of numbers.

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

let total = numbers.reduce((acc, num) => acc + num, 0);

Lets understand step by step what happens here:

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

So, final output is:

10

Let us understand a bit in detail through flowchart diagram below:

So from the diagram, the essence of reduce can be extracted as below points:

1. Start with array

2. Initialize accumulator

3. Loop through elements

4. Add values to accumulator

5. Return final accumulated value

---

6) forEach()

forEach() simply loops through each element in the array. Basically it executes a function on each element. Point to be noted is that, it does not return a new array.

Let us understand by below example:

let numbers = [1,2,3];

numbers.forEach(num => {
  console.log(num);
});

The output is:

1
2
3

We can use forEach() when you just want to perform an action.

It is commonly used for logging values, updating UI, printing results.

---

For Beginners, the best way of Learning JavaScript is by writing code ourselves. So i have an Assignment for my readers. So, open your browser in laptop/PC and right Click → inspect → console and try below assignment.

Practice Assignment

Do try this in your browser console.

// Step 1: Create an array of numbers
const numbers = [2, 5, 8, 12, 4];

const result = numbers
  .map(num => num * 2)        // doubles each number
  .filter(num => num > 10)    // only keeps numbers greater than 10
  .reduce((sum, num) => sum + num, 0); // Calculate total sum

console.log(result);

Step-by-Step Explanation:

Original Array:

[2, 5, 8, 12, 4]

After map() (double each number):

[4, 10, 16, 24, 8]

After filter() (numbers > 10):

[16, 24]

After reduce() (sum all numbers):

16 + 24 = 40

Final Output:

40

Learning these array methods will make your JavaScript code cleaner, shorter, and more powerful.

If you found this helpful, follow for more beginner-friendly JavaScript guides.