# Array Methods You Must Know!

### 📋 Table of Contents

*   push() and pop() - Adding & Removing from the End
    
*   shift() and unshift() — Adding & Removing from the Start
    
*   map() — Transform Every Element
    
*   filter() — Keep Only What You Need
    
*   reduce() — Combine Into a Single Value
    
*   forEach() — Loop Through Every Element
    

* * *

Arrays are one of the most fundamental data structures in JavaScript. Nearly every real-world program uses them — whether you are storing a list of names, product prices, or user IDs. Knowing how to work with arrays efficiently is a core skill for any developer.

In this article, we will cover eight essential array methods. Each one is explained with a simple analogy, a practical code example, and a before/after view so you can clearly see what changes. At the end, there is an assignment to solidify everything you have learned.

> 💡 Pro Tip: Open your browser's developer console (press F12) and type every example yourself as you read. Reading alone is not enough — writing the code is what makes it stick.

## **1\. push() and pop()**

Works at the END of the array

**push()** adds one or more elements to the *end* of an array and returns the new length. **pop()** removes the *last element* from the array and returns it.

Think of a stack of plates. You place a new plate on top (push), and when you need one, you take it from the top (pop). The plates below remain undisturbed.

push() — Adding to the end

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

fruits.push("mango");    // adds "mango" to the end
fruits.push("grape");    // adds "grape" to the end

console.log(fruits);
// Output: ["apple", "banana", "mango", "grape"]
```

pop() — Removing from the end

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

let removed = fruits.pop();   // removes and returns the last element

console.log(removed);   // "mango"
console.log(fruits);    // ["apple", "banana"]
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/f01adab7-9595-41ba-a590-071fc82f97c0.png align="center")

* * *

## **2\. shift() and unshift()**

Works at the START of the array

These two methods mirror `push()` and `pop()`, but they operate on the *front* of the array instead of the end.

**unshift()** adds one or more elements to the *beginning* of an array. **shift()** removes and returns the *first* element. Think of a line at a counter — a VIP guest cuts to the front (unshift), and the person at the very front gets served and leaves first (shift).

unshift() — Adding to the front

```javascript
let queue = ["Alice", "Bob"];

queue.unshift("Zara");   // "Zara" is added to the front

console.log(queue);
// Output: ["Zara", "Alice", "Bob"]
```

shift() — Removing from the front

```javascript
let queue = ["Zara", "Alice", "Bob"];

let first = queue.shift();   // removes and returns the first element

console.log(first);    // "Zara"
console.log(queue);   // ["Alice", "Bob"]
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/daced39b-67c4-4026-87d9-7425d8b97069.png align="center")

Here is a quick reference to keep all four methods straight:

| **Method** | **Position** | **Action** | **Returns** |
| --- | --- | --- | --- |
| `push()` | End | Add element(s) | New array length |
| `pop()` | End | Remove element | The removed element |
| `unshift()` | Start | Add element(s) | New array length |
| `shift()` | Start | Remove element | The removed element |

* * *

## **3\. map()**

Transforms every element — returns a new array

**map()** creates a *new array* by applying a function to every element of the original array. The original array is never modified. The result always has the same number of elements as the input.

Think of it like a factory conveyor belt. Every item goes in, gets processed (doubled, formatted, renamed), and comes out the other side transformed. Nothing is skipped, nothing is added or removed.  

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/a0e85d56-1fb3-4ea1-b84e-0201d467d79b.png align="center")

Traditional for loop vs map()

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

// ❌ Old way — for loop
let doubled1 = [];
for (let i = 0; i < numbers.length; i++) {
  doubled1.push(numbers[i] * 2);
}

// ✅ New way — map()
let doubled2 = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled2);   // [2, 4, 6, 8, 10]
console.log(numbers);    // [1, 2, 3, 4, 5] — unchanged!
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/282d610e-f358-472e-91cc-acd10c05a1d7.png align="center")

* * *

## **4\. filter()**

Keeps only elements that pass a test

**filter()** creates a new array containing only the elements that pass a given condition (return `true`). Elements that fail the condition are excluded. The original array is never modified.

Imagine a sieve — you pour in a mix of items, and only the ones that fit through the holes come out the other side. Everything else stays behind.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/4049d9b2-085e-4bc6-9403-12acc6127cb9.png align="center")

filter() — Getting numbers greater than 10

```javascript
let numbers = [3, 15, 7, 22, 5, 18];

let bigNumbers = numbers.filter(function(num) {
  return num > 10;   // true = keep it, false = remove it
});

console.log(bigNumbers);  // [15, 22, 18]
console.log(numbers);     // [3, 15, 7, 22, 5, 18] — unchanged
```

Traditional for loop vs filter()

```javascript
// ❌ Old way — for loop with if statement
let result1 = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result1.push(numbers[i]);
  }
}

// ✅ New way — filter()
let result2 = numbers.filter(function(num) {
  return num > 10;
});
// Same result — much cleaner code.
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/45b851a9-6dae-458f-8594-b939d3ec7e66.png align="center")

* * *

## **5\. reduce()**

Combines all elements into a single value

**reduce()** can look intimidating at first, but the core idea is simple: it processes every element in the array one by one and *accumulates* them into a single result — a number, a string, or any value you define.

The most beginner-friendly use case is calculating the total sum of an array of numbers. Think of it like keeping a running tally on paper — you start at zero, then add each number one at a time until you reach the final total.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/7abf795d-4dd6-410a-b628-2d85c84d0737.png align="center")

reduce() — Calculating a total sum

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

let total = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);   // ← 0 is the starting value

console.log(total);   // 15

// Step-by-step breakdown:
// Start:  acc = 0
// Step 1: 0 + 1  = 1
// Step 2: 1 + 2  = 3
// Step 3: 3 + 3  = 6
// Step 4: 6 + 4  = 10
// Step 5: 10 + 5 = 15  ← final answer
```

* * *

## **6\. forEach()**

Runs a function on each element — returns nothing

**forEach()** is the simplest of the higher-order array methods. It loops through every element and runs a function on it — but it does *not* return a new array. It is essentially a cleaner, more readable replacement for a `for` loop when you just need to *do something* with each element, such as printing, logging, or updating the UI.

Traditional for loop vs forEach()

```javascript
let names = ["Alice", "Bob", "Charlie"];

// ❌ Old way
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

// ✅ New way — forEach()
names.forEach(function(name) {
  console.log(name);
});

// Alice
// Bob
// Charlie
```

forEach() with index — Building a numbered list

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

fruits.forEach(function(fruit, index) {
  console.log(index + 1 + ". " + fruit);
});

// 1. apple
// 2. mango
// 3. banana
```

Here is how all four higher-order methods compare at a glance:

| **Method** | **Returns** | **Modifies Original?** | **Best For** |
| --- | --- | --- | --- |
| `forEach()` | Nothing (undefined) | No | Printing, logging, side effects |
| `map()` | New array (same size) | No | Transforming every element |
| `filter()` | New array (smaller or equal) | No | Selecting elements by condition |
| `reduce()` | A single value | No | Totals, sums, combining values |