# Array Methods You Must Know

If you’re learning JavaScript, arrays are everywhere. Lists of numbers, names, products, messages — most real data lives inside arrays. Knowing how to work with arrays properly will make your code shorter, cleaner, and easier to understand.

Let’s walk through the array methods you’ll use almost daily.

For all examples, open your browser console and try them yourself.

## push() and pop()

These two methods work at the **end** of an array.

`push()` adds a new item to the end.  
`pop()` removes the last item.

```javascript
let numbers = [10, 20, 30];
```

Before push:

```javascript
[10, 20, 30]
```

```javascript
numbers.push(40);
```

After push:

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

Now removing the last item:

```javascript
numbers.pop();
```

After pop:

```javascript
[10, 20, 30]
```

Think of this like stacking plates. You add and remove from the top.

## shift() and unshift()

These methods work at the **beginning** of an array.

`unshift()` adds an item to the front.  
  
`shift()` removes the first item.

```javascript
let numbers = [10, 20, 30];
```

Before unshift:

```javascript
[10, 20, 30]
```

```javascript
numbers.unshift(5);
```

After unshift:

```javascript
[5, 10, 20, 30]
```

Now remove the first item:

```javascript
numbers.shift();
```

After shift:

```javascript
[10, 20, 30]
```

If push/pop are like stacking plates, shift/unshift are like adjusting the front of a queue.

## map()

`map()` creates a **new array** by transforming every element.

Let’s double each number.

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

Using a traditional loop:

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

Using `map()`:

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

Before:

```javascript
[5, 10, 15]
```

After:

```javascript
[10, 20, 30]
```

`map()` is cleaner because it focuses on *what* you want. transforming each value, not on managing indexes.

## filter()

`filter()` creates a new array with only the elements that match a condition.

Let’s keep numbers greater than 10.

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

Using a loop:

```javascript
let result = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}
```

Using `filter()`:

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

Before:

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

After:

```javascript
[12, 20]
```

`filter()` reads more naturally: “Give me numbers greater than 10.”

## reduce()

`reduce()` combines all values into a **single result**.

A common use case is calculating the total sum.

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

Using a loop:

```javascript
let total = 0;
for (let i = 0; i < numbers.length; i++) {
  total += numbers[i];
}
```

Using `reduce()`:

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

Result:

```javascript
30
```

Think of reduce as a rolling calculator. It starts with an initial value (here `0`) and keeps combining elements until only one value remains.

## forEach()

`forEach()` simply runs a function for each element in the array. It does not return a new array.

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

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

This prints:

```typescript
5
10
15
```

Use `forEach()` when you want to perform an action, like logging or updating something, but not create a new array.