# Array Methods You Must Know

Suppose, You have a **basket of apples 🍎**.  
Sometimes you **add apples**, sometimes you **remove apples**, and sometimes you **inspect each apple and do something with it**.

Arrays in JavaScript work very much like that basket.

Let’s walk through the most useful tools you have for managing that basket.

* * *

# 1\. push() and pop()

### Real-world example

Think of a **stack of plates in a kitchen**.

You **add a plate to the top**.  
You **remove a plate from the top**.

That’s exactly how `push()` and `pop()` work.

![https://homework.study.com/cimages/multimages/16/stack_push_operation2294814496370743228.jpg](https://homework.study.com/cimages/multimages/16/stack_push_operation2294814496370743228.jpg align="center")

![https://miro.medium.com/1%2ARnChXJJa6z9Rif_3WeYXow.png](https://miro.medium.com/1%2ARnChXJJa6z9Rif_3WeYXow.png align="center")

![https://dsavisualizer.in/og/stack/pushPop.png](https://dsavisualizer.in/og/stack/pushPop.png align="center")

4

### Example

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

fruits.push("mango");
```

Before:

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

After:

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

`push()` → adds to the **end**.

* * *

Now removing:

```plaintext
fruits.pop();
```

Before:

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

After:

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

`pop()` → removes from the **end**.

* * *

# 2\. shift() and unshift()

### Real-world example

Imagine a **queue at a ticket counter**.

The **first person leaves the line** → shift  
  
A **new person joins the front** → unshift

![https://drek4537l1klr.cloudfront.net/maras/Figures/09fig02_alt.jpg](https://drek4537l1klr.cloudfront.net/maras/Figures/09fig02_alt.jpg align="center")

![https://media.licdn.com/dms/image/v2/D4D12AQGhN9eXFvoIIg/article-inline_image-shrink_1000_1488/article-inline_image-shrink_1000_1488/0/1694545805561?e=2147483647&t=pbLQmMbiDtR3MmwzlglMQ13e4JXTZDsRgCp6w9dvJx8&v=beta](https://media.licdn.com/dms/image/v2/D4D12AQGhN9eXFvoIIg/article-inline_image-shrink_1000_1488/article-inline_image-shrink_1000_1488/0/1694545805561?e=2147483647&t=pbLQmMbiDtR3MmwzlglMQ13e4JXTZDsRgCp6w9dvJx8&v=beta align="center")

![https://dotnettrickscloud.blob.core.windows.net/article/data%20structures/3720240720175248.webp](https://dotnettrickscloud.blob.core.windows.net/article/data%20structures/3720240720175248.webp align="center")

4

### Example

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

### shift()

```plaintext
fruits.shift();
```

Before

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

After

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

`shift()` → removes the **first item**

* * *

### unshift()

```plaintext
fruits.unshift("orange");
```

Before

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

After

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

`unshift()` → adds to the **start**

* * *

# 3\. map()

### Real-world example

Imagine a **teacher grading papers**.

Every paper gets **+5 bonus marks**.

The teacher goes through **every paper** and **updates it**.

That’s `map()`.

![https://miro.medium.com/v2/resize%3Afit%3A1400/0%2AWNet6Iaf0Pb69qlF.png](https://miro.medium.com/v2/resize%3Afit%3A1400/0%2AWNet6Iaf0Pb69qlF.png align="center")

4

### Example

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

Goal: double every number.

```plaintext
let result = numbers.map(function(num) {
  return num * 2;
});
```

Before

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

After

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

Important idea:

👉 `map()` **creates a new array**

Original array stays the same.

* * *

### Traditional loop vs map

**Traditional for loop**

```plaintext
let result = [];

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

**Using map**

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

Cleaner. Less code. Same result.

* * *

# 4\. filter()

### Real-world example

Imagine a **security guard checking IDs**.

Only people **above 18** can enter.

The guard checks everyone but **lets only some people through**.

That’s `filter()`.

![https://www.w3resource.com/w3r_images/javascript-array-exercise-39.png](https://www.w3resource.com/w3r_images/javascript-array-exercise-39.png align="center")

![https://cdn.ablebits.com/_img-blog/filter/excel-filter-function.png](https://cdn.ablebits.com/_img-blog/filter/excel-filter-function.png align="center")

![https://learn.microsoft.com/en-us/dotnet/visual-basic/programming-guide/concepts/linq/media/filtering-data/linq-filter-operation.png](https://learn.microsoft.com/en-us/dotnet/visual-basic/programming-guide/concepts/linq/media/filtering-data/linq-filter-operation.png align="center")

4

### Example

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

Get numbers greater than 10.

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

Before

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

After

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

Important idea:

👉 `filter()` **keeps some items and removes others**

* * *

# 5\. reduce() (Beginner Friendly)

### Real-world example

Imagine counting **total money in your wallet**.

You pick each note and **add it to the total**.

₹100 → total = 100  
  
₹50 → total = 150  
  
₹20 → total = 170

That process is exactly what `reduce()` does.

![https://miro.medium.com/v2/resize%3Afit%3A1200/1%2AOG-ZHMUanuMHjxOOeEoivw.png](https://miro.medium.com/v2/resize%3Afit%3A1200/1%2AOG-ZHMUanuMHjxOOeEoivw.png align="center")

4

### Example

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

Calculate total sum.

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

Step by step:

```plaintext
0 + 5 = 5
5 + 10 = 15
15 + 15 = 30
```

Final result

```plaintext
30
```

Key idea:

👉 `reduce()` turns an **array into one single value**

* * *

# 6\. forEach()

### Real-world example

Imagine a **teacher calling each student's name**.

They just **visit every student**.

But they **don’t create a new list**.

That’s `forEach()`.

### Example

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

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

Output

```plaintext
1
2
3
```

Important idea:

👉 `forEach()` **runs code for every item but returns nothing**

* * *

# Small Assignment (Try in Console)

Create an array:

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

### Step 1 — map

Double numbers

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

* * *

### Step 2 — filter

Numbers greater than 10

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

* * *

### Step 3 — reduce

Total sum

```plaintext
50
```

* * *

# Final takeaway

Think of arrays like **a basket of items**.

Use:

• `push/pop` → add or remove from the **end**  
  
• `shift/unshift` → add or remove from the **start**  
  
• `map` → **transform every item**  
  
• `filter` → **keep only some items**  
  
• `reduce` → **turn array into one value**  
  
• `forEach` → **just loop through items**

Open your **browser console right now** and try these examples.  
  
That’s the fastest way this will stick in your brain.