# Array Methods You Must Know

## Introduction

Arrays are at the center of almost every JavaScript program. You filter data, transform lists, compute totals, add or remove items. Knowing the right method means writing 3 lines instead of 15. Here are the ones you'll use constantly.

* * *

## `push()` and `pop()`

These two are the simplest. `push()` adds an item to the end of an array. `pop()` removes the last item.

```javascript
const fruits = ['apple', 'banana'];

fruits.push('mango');
// ['apple', 'banana', 'mango']

fruits.pop();
// ['apple', 'banana']
```

`push()` returns the new length of the array. `pop()` returns the item it removed. That returned value is easy to forget about but occasionally useful.

* * *

## `shift()` and `unshift()`

Same idea as push/pop, but at the front of the array instead of the end.

`unshift()` adds to the front. `shift()` removes from the front.

```javascript
const queue = ['task1', 'task2'];

queue.unshift('task0');
// ['task0', 'task1', 'task2']

queue.shift();
// ['task1', 'task2']
```

A good way to remember: "shift" moves everything over (like shifting gears), while "unshift" pushes things back in at the start.

Worth noting: `shift()` and `unshift()` are slower than `pop()` and `push()` on large arrays because every element has to be re-indexed. For most code you'll write, it won't matter.

* * *

## `map()`

`map()` goes through every item in an array and returns a new array with each item transformed.

Say you have a list of prices and you want to apply a 10% discount to all of them. The traditional way:

```javascript
const prices = [100, 200, 300];
const discounted = [];

for (let i = 0; i < prices.length; i++) {
    discounted.push(prices[i] * 0.9);
}
// [90, 180, 270]
```

With `map()`:

```javascript
const prices = [100, 200, 300];

const discounted = prices.map(function(price) {
    return price * 0.9;
});
// [90, 180, 270]
```

The original `prices` array stays untouched. `map()` always returns a brand-new array. That's important: use it when you want to transform data without modifying the source.

* * *

## `filter()`

`filter()` goes through each item and keeps only the ones that pass a condition. It returns a new array with the matching items.

Here's the for-loop version:

```javascript
const scores = [45, 82, 91, 36, 67];
const passing = [];

for (let i = 0; i < scores.length; i++) {
    if (scores[i] >= 60) {
    passing.push(scores[i]);
    }
}
// [82, 91, 67]
```

With `filter()`:

```javascript
const scores = [45, 82, 91, 36, 67];

const passing = scores.filter(function(score) {
    return score >= 60;
});
// [82, 91, 67]
```

The callback returns `true` or `false`. If it returns `true`, the item gets included. If `false`, it gets dropped.

* * *

## `reduce()`

`reduce()` is the one that trips people up at first. The name is a bit abstract, but the idea is practical: you're collapsing an array down to a single value.

The simplest use case is a sum:

```javascript
const numbers = [10, 20, 30, 40];

const total = numbers.reduce(function(accumulator, current) {
    return accumulator + current;
}, 0);
// 100
```

Here's what's happening step by step:

*   Start with `accumulator = 0` (that's the `0` at the end, called the initial value)
    
*   First round: `0 + 10 = 10`
    
*   Second round: `10 + 20 = 30`
    
*   Third round: `30 + 30 = 60`
    
*   Fourth round: `60 + 40 = 100`
    

The `accumulator` carries the running result. The `current` is the item being processed.

If you're not passing an initial value, `reduce()` uses the first element as the starting accumulator and begins from the second. That can cause bugs, so the habit of always providing an initial value is worth developing early.

* * *

## `forEach()`

`forEach()` runs a function on each item in the array. That's it. It doesn't return anything.

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

names.forEach(function(name) {
    console.log('Hello, ' + name);
});

// Hello, Alice
// Hello, Bob
// Hello, Charlie
```

Where it gets confusing: people sometimes reach for `forEach()` when they should use `map()`. The difference is intent. If you want a new array back, use `map()`. If you're doing something as a side effect (logging, sending a request, updating the DOM), use `forEach()`.

`forEach()` always returns `undefined`. Trying to assign its result to a variable and use it as an array is a common mistake.

* * *

## A Quick Comparison

| Method | Returns | Use when |
| --- | --- | --- |
| `push()` / `pop()` | length or removed item | adding/removing at the end |
| `shift()` / `unshift()` | length or removed item | adding/removing at the front |
| `map()` | new array | transforming every item |
| `filter()` | new array | keeping items that match a condition |
| `reduce()` | single value | computing a total, building an object |
| `forEach()` | `undefined` | side effects only |

* * *

## What to Practice Next

Try using `map()` to build a list of HTML strings from an array of data. Use `filter()` to remove empty or invalid items from a form response. Use `reduce()` to count how many times each word appears in a sentence.

Once these six methods feel automatic, you'll find yourself writing smaller, cleaner code, and you'll also have the foundation to start combining them when needed.