You use arrays to store lists of numbers, names, products, tasks, and much more. But just storing data is not enough — you also need ways to add, remove, update, and process that data.

That is where JavaScript array methods become super useful.

In this blog, we will understand some of the most beginner-friendly and commonly used array methods:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

I’ll explain each one with simple practical examples, show the array state before and after, and also compare traditional for loops with map() and filter().

Let’s begin.

Why learn array methods?

Imagine you have a list of marks, product prices, or student names.

You may want to:

• add a new item

• remove the last item

• remove the first item

• update every value

• select only some values

• calculate a total

• print each value one by one

Array methods make these tasks much easier and cleaner.

push() — Add element to the end

The push() method adds one or more elements to the end of an array.

Example

let fruits = ["apple", "banana"];

console.log("Before:", fruits);

fruits.push("mango");

console.log("After:", fruits);

Output

Before: ["apple", "banana"]
After: ["apple", "banana", "mango"]

Practical use case

Suppose you are building a to-do app and a user adds a new task.

You can use push() to add that task at the end of the list.

let tasks = ["Study JS", "Practice coding"];
tasks.push("Revise arrays");

console.log(tasks);

["Study JS", "Practice coding", "Revise arrays"]

pop() — Remove element from the end

The pop() method removes the last element from an array.

Example

let fruits = ["apple", "banana", "mango"];

console.log("Before:", fruits);

fruits.pop();

console.log("After:", fruits);

Output

Before: ["apple", "banana", "mango"]
After: ["apple", "banana"]

Practical use case

You can think of this like removing the latest item from a cart or undoing the last step in a list.

unshift() — Add element to the beginning

The unshift() method adds one or more elements to the beginning of an array.

Example

let colors = ["blue", "green"];

console.log("Before:", colors);

colors.unshift("red");

console.log("After:", colors);

Output

Before: ["blue", "green"]
After: ["red", "blue", "green"]

Practical use case

This is useful when you want the newest item to appear first, like showing the latest notification at the top.

shift() — Remove element from the beginning

The shift() method removes the first element from an array.

Example

let colors = ["red", "blue", "green"];

console.log("Before:", colors);

colors.shift();

console.log("After:", colors);

Output

Before: ["red", "blue", "green"]
After: ["blue", "green"]

Practical use case

This can be helpful when processing a queue, where the first item should be removed first.

forEach() — Do something for every element

The forEach() method runs a function for each element of an array.

It is mainly used when you want to loop through the array and perform an action, like printing values.

Example

let numbers = [10, 20, 30];

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

Output

10
20
30

Practical use case

If you want to display every username or print every score, forEach() is very handy.

let students = ["Aman", "Riya", "Kunal"];

students.forEach(function(student) {
  console.log("Welcome " + student);
});

Output

Welcome Aman
Welcome Riya
Welcome Kunal

Important point

forEach() is great for doing something with each item, but it does not return a new transformed array like map().

map() — Create a new array by transforming each element

The map() method creates a new array by applying a function to every element of the original array.

This is one of the most useful methods in JavaScript.

Example

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

console.log("Original:", numbers);

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

console.log("New array:", doubled);
console.log("Original after map:", numbers);

Output

Original: [1, 2, 3, 4]
New array: [2, 4, 6, 8]
Original after map: [1, 2, 3, 4]

What to notice?

• map() does not change the original array

• it creates a brand new array

• each element gets transformed

Practical example

Suppose you have product prices and want to apply a 10 rupee increase to each price.

let prices = [100, 200, 300];

let updatedPrices = prices.map(function(price) {
  return price + 10;
});

console.log(updatedPrices);

[110, 210, 310]

Traditional for loop vs map()

Let’s compare both.

Using for loop

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

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

console.log(doubled);

Using map()

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

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

console.log(doubled);

Why map() feels cleaner

With map():

• less code

• easy to read

• directly shows that you are transforming data

If your goal is “convert each item into something else,” map() is usually better.

filter() — Create a new array with selected elements

The filter() method creates a new array containing only the elements that match a condition.

Example

let numbers = [5, 12, 8, 20, 3];

console.log("Original:", numbers);

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

console.log("Filtered:", greaterThanTen);
console.log("Original after filter:", numbers);

Output

Original: [5, 12, 8, 20, 3]
Filtered: [12, 20]
Original after filter: [5, 12, 8, 20, 3]

What to notice?

• filter() does not change the original array

• it returns a new array

• only elements that pass the condition stay in the new array

Practical example

Suppose you want to show only students who passed.

let marks = [35, 80, 25, 90, 40];

let passed = marks.filter(function(mark) {
  return mark >= 40;
});

console.log(passed);

[80, 90, 40]

Traditional for loop vs filter()

Using for loop

let numbers = [5, 12, 8, 20, 3];
let result = [];

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

console.log(result);

Using filter()

let numbers = [5, 12, 8, 20, 3];

let result = numbers.filter(function(num) {
  return num > 10;
});

console.log(result);

Why filter() is better here

With filter(), the purpose is obvious:

we are selecting values based on a condition.

reduce() — Turn the whole array into a single value

The reduce() method is used when you want to take all array elements and combine them into one final result.

That final result can be:

• a sum

• a total price

• a count

• a single object

• many other things

For beginners, the easiest example is finding the total sum of numbers.

Example

let numbers = [10, 20, 30];

let total = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(total);

Output

60

Beginner-friendly explanation

Inside reduce():

• accumulator stores the running result

• currentValue is the current item from the array

• 0 is the starting value

So this happens step by step:

• start with 0

• 0 + 10 = 10

• 10 + 20 = 30

• 30 + 30 = 60

Final result: 60

Simple real-life use case

Suppose you have shopping prices and want the total bill.

let cartPrices = [199, 299, 499];

let totalBill = cartPrices.reduce(function(total, price) {
  return total + price;
}, 0);

console.log(totalBill);

997

Keep this in mind

At first, reduce() may feel a little confusing.

That is completely normal.

Start by using it only for total sum. Once you get comfortable, then explore more advanced uses.

Before and After Array State Summary

Here’s a quick recap of how these methods affect arrays.

push()

Before: ["a", "b"]
After:  ["a", "b", "c"]

pop()

Before: ["a", "b", "c"]
After:  ["a", "b"]

unshift()

Before: ["b", "c"]
After:  ["a", "b", "c"]

shift()

Before: ["a", "b", "c"]
After:  ["b", "c"]

map()

Original: [1, 2, 3]
New:      [2, 4, 6]

filter()

Original: [5, 12, 8, 20]
New:      [12, 20]

reduce()

Original: [10, 20, 30]
Result:   60

forEach()

Original: [1, 2, 3]
Action: prints each value

When should you use which method?

Use:

• push() when you want to add to the end

• pop() when you want to remove from the end

• unshift() when you want to add to the beginning

• shift() when you want to remove from the beginning

• forEach() when you want to do something with each item

• map() when you want to transform every item into a new array

• filter() when you want to keep only matching items

• reduce() when you want one final value from all items

Flowchart: How map() works

Original array: [1, 2, 3]

1  ──transform──> 2
2  ──transform──> 4
3  ──transform──> 6

New array: [2, 4, 6]

Flowchart: How filter() works

Original array: [5, 12, 8, 20]
Condition: value > 10

5   ──> No  ──> skip
12  ──> Yes ──> keep
8   ──> No  ──> skip
20  ──> Yes ──> keep

New array: [12, 20]

Simple visual for reduce() accumulating values

Array: [10, 20, 30]

Start with accumulator = 0

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60

Final result: 60

Practice in browser console

The best way to learn these methods is to try them yourself.

Open your browser console and test small examples like this:

let nums = [2, 4, 6, 8];

nums.push(10);
console.log(nums);

let doubled = nums.map(function(n) {
  return n * 2;
});
console.log(doubled);

let bigNums = nums.filter(function(n) {
  return n > 5;
});
console.log(bigNums);

When you run code yourself, the concepts stay in your mind much better.

Mini assignment for you

Try this on your own.

Step 1: Create an array of numbers

let numbers = [4, 7, 12, 15, 3];

Step 2: Use map() to double each number

Expected idea:

[8, 14, 24, 30, 6]

Step 3: Use filter() to get numbers greater than 10

Expected idea:

[12, 15]

Step 4: Use reduce() to calculate total sum

Expected idea:

41

Full practice solution

let numbers = [4, 7, 12, 15, 3];

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

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

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

console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThanTen);
console.log("Total sum:", total);

Final thoughts

Array methods are one of the most important parts of JavaScript.

If you are a beginner, focus first on understanding:

• what each method does

• whether it changes the original array or creates a new one

• when to use it in real projects

A good learning order is:

1. push() / pop()

2. shift() / unshift()

3. forEach()

4. map()

5. filter()

6. reduce()

Do not worry about chaining methods right now.

First become comfortable using each one individually.

Once these basics become clear, your JavaScript code will start looking much cleaner and more professional.

Quick challenge

Take this array:

let nums = [1, 5, 10, 20];

Try to do these yourself:

• add 50 at the end

• remove the first element

• create a new array with all values tripled

• create another array with only values greater than 10

• find the total sum