When we write JavaScript, we often work with arrays.

An array is simply a box that can store many values together.

Example:

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

Think of this like a basket of fruits.

Now JavaScript gives us some special tools (methods) to work with these baskets easily.

In this article we will learn:

• push()

• pop()

• shift()

• unshift()

• map()

• filter()

• reduce()

• forEach()

Don't worry. We will understand them in the simplest way possible.

---

1. push() – Add Item to the End

Imagine you have a fruit basket.

You want to add a new fruit at the end.

That is what push() does.

Example

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

fruits.push("mango");

console.log(fruits);

Before

["apple", "banana"]

After

["apple", "banana", "mango"]

So push() adds an item at the end of the array.

---

2. pop() – Remove Item from the End

Now imagine you take the last fruit out of the basket.

That is pop().

Example

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

fruits.pop();

console.log(fruits);

Before

["apple", "banana", "mango"]

After

["apple", "banana"]

So pop() removes the last item.

---

3. shift() – Remove First Item

If you remove the first item in the basket, we use shift().

Example

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

fruits.shift();

console.log(fruits);

Before

["apple", "banana", "mango"]

After

["banana", "mango"]

So shift() removes the first item.

---

4. unshift() – Add Item to the Beginning

If you want to add a fruit at the front, use unshift().

Example

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

fruits.unshift("apple");

console.log(fruits);

Before

["banana", "mango"]

After

["apple", "banana", "mango"]

So unshift() adds an item at the beginning.

---

5. forEach() – Do Something for Every Item

Sometimes we want to look at every item in the array.

We can use forEach().

Example

let numbers = [1, 2, 3];

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

Output:

1
2
3

So forEach() runs a function for each item in the array.

---

6. map() – Transform Every Item

Imagine you have numbers and you want to change every number.

Example: double each number.

Example

let numbers = [1, 2, 3];

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

console.log(doubled);

Before

[1, 2, 3]

After

[2, 4, 6]

So map() creates a new array after transforming every value.

---

Traditional for loop vs map()

Using for loop

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

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

Using map()

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

map() is shorter and easier to read.

---

7. filter() – Select Some Items

Imagine you have numbers and you only want big numbers.

filter() helps us pick items based on a rule.

Example

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

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

console.log(bigNumbers);

Before

[5, 12, 8, 20]

After

[12, 20]

So filter() returns only the values that pass the condition.

---

Traditional for loop vs filter()

Using for loop

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

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

Using filter()

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

Much cleaner and easier.

---

8. reduce() – Combine Everything into One Value

reduce() is used when we want to combine all values into one result.

Example: calculate the total sum.

Example

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

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

console.log(total);

Output:

10

How reduce works

Step 1

0 + 1 = 1

Step 2

1 + 2 = 3

Step 3

3 + 3 = 6

Step 4

6 + 4 = 10

So reduce() keeps adding values until we get a final result.

---

Simple Visualization

map()

[1,2,3]

↓ double

[2,4,6]

filter()

[5,12,8,20]

↓ keep numbers >10

[12,20]

reduce()

[1,2,3,4]

1+2+3+4

= 10

---

Small Practice Assignment

Try this in your browser console.

Step 1: Create an array

let numbers = [5,10,15,20];

Step 2: Double numbers using map()

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

Result

[10,20,30,40]

Step 3: Get numbers greater than 10 using filter()

let greater = numbers.filter(num => num > 10);

Result

[15,20]

Step 4: Calculate total using reduce()

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

Result

50

---

Final Thoughts

JavaScript arrays become very powerful when we use these methods.

The most commonly used ones are:

• push()

• pop()

• shift()

• unshift()

• map()

• filter()

• reduce()

• forEach()