# Array Methods You Must Know

From push and pop to map, filter, and reduce — a beginner-friendly guide to JavaScript's most essential array tools, with real examples you can try right now.

Arrays are everywhere in JavaScript. And once you know the right methods, working with them becomes almost effortless. In this article, you'll learn the **7 array methods every developer uses daily** — with clear examples, before-and-after states, and a final challenge to put it all together.

**Pro tip:** Open your browser's DevTools console (F12 → Console) and type out each example as you go. Seeing the output yourself is 10× more valuable than just reading.

# **push() & pop()**

## **Adding and removing from the end**

Think of an array like a stack of plates. `push()` adds a plate on top. `pop()` removes the top plate.

```javascript
const fruits = ['apple', 'banana'];
fruits.push('mango');
// fruits is now ['apple', 'banana', 'mango']
```

```javascript

['apple', 'banana']
→
After push('mango')
['apple', 'banana', 'mango']
```

**pop() — remove from end**

```javascript
const removed = fruits.pop();
// removed = 'mango'
// fruits is now ['apple', 'banana']
```

**Note:** `pop()` returns the removed element. `push()` returns the new length of the array.

# **shift() & unshift()**

## **Adding and removing from the beginning**

Same idea as push/pop — but from the front of the array instead of the end.

```javascript
const queue = ['Bob', 'Carol'];

queue.unshift('Alice');
// queue → ['Alice', 'Bob', 'Carol']

const first = queue.shift();
// first = 'Alice'
// queue → ['Bob', 'Carol']
```

**push / pop**

Work at the **end** of the array. Like a stack of plates.

**unshift / shift**

Work at the **beginning**. Like a queue at a coffee shop.

# **map()**

## **Transform every item**

`map()` goes through each item in an array, applies a function to it, and returns a **new array** with the results. The original array is untouched.

**Traditional for loop**

```javascript
const nums = [1, 2, 3];
const doubled = [];
for (let i = 0; i < nums.length; i++) {
  doubled.push(nums[i] * 2);
}
```

**With map()**

```javascript
const nums = [1, 2, 3];
const doubled = nums.map(
  n => n * 2
);
// [2, 4, 6]
```

![](https://cdn.hashnode.com/uploads/covers/695242a29d62c558ed3be960/6492425f-53ca-42a5-980d-3a76782c9b62.png align="center")

# **filter()**

## **Keep only what passes the test**

`filter()` loops through every item and keeps only the ones where your function returns `true`. Like a sieve — only things that match go through.

**filter() — keep numbers greater than 10**

```javascript
const nums = [3, 14, 7, 25, 1];
const big = nums.filter(n => n > 10);
// big → [14, 25]
```

**How filter() works — only items where the test passes survive**

![](https://cdn.hashnode.com/uploads/covers/695242a29d62c558ed3be960/35d3ed9f-8b68-4a53-8ed8-006f6fb1bb32.png align="center")

# **reduce()**

## **Boil it down to one value**

`reduce()` is the most powerful — but also the most intimidating. The key idea: it walks through the array and **accumulates** a running total (or any single value).

Think of it like a cashier ringing up items one at a time, keeping a running total on the screen.

**reduce() — sum all numbers**

```javascript
const nums = [4, 8, 15, 3];

const total = nums.reduce((acc, n) => acc + n, 0);
                          ↑         ↑
               accumulator  current item
// total → 30
```

**Accumulator growing step by step**

acc=0+4=4

acc=4+8=12

acc=12+15=27

acc=27+3=**30 ✓**

**For beginners:** Don't stress about mastering `reduce()` right away. Understand what it does (combines items into one value) and that `0` is the starting accumulator. You'll use `map()` and `filter()` far more often at first.

# **forEach()**

## **Loop without collecting a result**

Sometimes you just want to *do something* with each item — log it, display it, send it somewhere — without creating a new array. That's `forEach()`.

**map() — returns a new array**

```javascript
const doubled = [1,2,3].map(
  n => n * 2
);
// use the result!
```

**forEach() — just does something**

```javascript
[1,2,3].forEach(n => {
  console.log(n);
});
// returns undefined
```

**forEach() — practical example**

```javascript
const names = ['Alice', 'Bob', 'Carol'];

names.forEach(name => {
  console.log(`Hello, ${name}!`);
});

// Hello, Alice!
// Hello, Bob!
// Hello, Carol!
```