# JavaScript Array Methods You Must Know

When we write JavaScript, we often work with **arrays**.

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

Example:

```plaintext
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

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

fruits.push("mango");

console.log(fruits);
```

### Before

```plaintext
["apple", "banana"]
```

### After

```plaintext
["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

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

fruits.pop();

console.log(fruits);
```

### Before

```plaintext
["apple", "banana", "mango"]
```

### After

```plaintext
["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

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

fruits.shift();

console.log(fruits);
```

### Before

```plaintext
["apple", "banana", "mango"]
```

### After

```plaintext
["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

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

fruits.unshift("apple");

console.log(fruits);
```

### Before

```plaintext
["banana", "mango"]
```

### After

```plaintext
["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

```plaintext
let numbers = [1, 2, 3];

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

Output:

```plaintext
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

```plaintext
let numbers = [1, 2, 3];

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

console.log(doubled);
```

### Before

```plaintext
[1, 2, 3]
```

### After

```plaintext
[2, 4, 6]
```

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

* * *

# Traditional for loop vs map()

### Using for loop

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

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

### Using map()

```plaintext
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

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

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

console.log(bigNumbers);
```

### Before

```plaintext
[5, 12, 8, 20]
```

### After

```plaintext
[12, 20]
```

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

* * *

# Traditional for loop vs filter()

### Using for loop

```plaintext
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()

```plaintext
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

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

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

console.log(total);
```

Output:

```plaintext
10
```

### How reduce works

Step 1

```plaintext
0 + 1 = 1
```

Step 2

```plaintext
1 + 2 = 3
```

Step 3

```plaintext
3 + 3 = 6
```

Step 4

```plaintext
6 + 4 = 10
```

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

* * *

# Simple Visualization

### map()

```plaintext
[1,2,3]

↓ double

[2,4,6]
```

### filter()

```plaintext
[5,12,8,20]

↓ keep numbers >10

[12,20]
```

### reduce()

```plaintext
[1,2,3,4]

1+2+3+4

= 10
```

* * *

# Small Practice Assignment

Try this in your browser console.

### Step 1: Create an array

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

### Step 2: Double numbers using map()

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

Result

```plaintext
[10,20,30,40]
```

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

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

Result

```plaintext
[15,20]
```

### Step 4: Calculate total using reduce()

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

Result

```plaintext
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()