# Array Methods You Must Know

Arrays are everywhere in JavaScript.

If you're learning JS, mastering array methods will instantly level up your problem solving skills.

In this article we will cover:

*   `push()` and `pop()`
    
*   `shift()` and `unshift()`
    
*   `map()`
    
*   `filter()`
    
*   `reduce()`
    
*   `forEach()`
    
*   Traditional `for` loop vs `map()`/`filter()`
    

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

These methods works at the end of an array.

### `push()` -> Add to the end

```javascript
let fruits = ["Apple", "Banana"];
fruits.push("Mango");
```

**Before:**

```plaintext
["Apple", "Banana"]
```

**After:**

```plaintext
["Apple", "Banana", "Mango"]
```

### `pop()` -> Remove from the end

```javascript
let fruits = ["Apple", "Mango", "Banana"];

fruits.pop();
```

**Before:**

```plaintext
["Apple", "Mango", "Banana"]
```

**After:**

```plaintext
["Apple", "Mango"]
```

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

These methods work at the start of an array.

### `unshift()` -> Add to the beginning

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

numbers.unshift(1);
```

**Before:**

```plaintext
[2, 3, 4]
```

**After:**

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

### `shift()` -> Remove from the beginning

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

numbers.shift();
```

**Before:**

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

**After:**

```plaintext
[2, 3, 4]
```

## map() --> Transform Every Element

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

**Example:** Double each number.

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

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

**Output of doubled:**

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

Original array remains unchanged.

![](https://cdn.hashnode.com/uploads/covers/6960d4a8e73a7c4653bc6b00/baa6414f-437b-45a6-9726-d7f3989fb770.png align="center")

### Traditional for loop vs map()

**Using for loop:**

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

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

**Using map():**

```javascript
let doubled = numbers.map(num => num * 2);
```

`map()` is cleaner and more readable.

## `filter()` --> Keep what you want

`filter()` creates a new array with element that satisfies the condition.

**Example:** Get numbers greater than 10.

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

let result = numbers.filter(num => num > 10);
```

**Output of results:**

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

![](https://cdn.hashnode.com/uploads/covers/6960d4a8e73a7c4653bc6b00/a6f21704-205b-41a9-a573-11ad7f43808d.png align="center")

### Traditional for loop vs filter()

**Using for 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(num => num > 10);
```

Cleaner. Less code. Easier to understand.

## `reduce()` -> Combine Everything Into One Value

`reduce()` takes an array and turns it into one single value.

Think of it like:

> Take everything and reduce it into one result.

**Example:** Calculate total sum

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

let total = numbers.reduce((accumulator, current) => {
    return accumulator + current;
}, 0);
```

**Output:**

```plaintext
60
```

**What's happening?**

*   `accumulator` -> stores the total
    
*   `current` -> current number
    
*   `0` -> starting value
    

**Step-by-Step:**

```plaintext
0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
```

![](https://cdn.hashnode.com/uploads/covers/6960d4a8e73a7c4653bc6b00/45237dae-1b6a-4695-9c39-fb6c7a6946b5.png align="center")

## `forEach()` --> Just run something on Each Item

`forEach()` loops through an array but does not create new array.

**Example:**

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

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

**Output:**

```plaintext
2
4
6
```

Use `forEach()` when you just want to perform an action (like logging).

## Summary Table

| Method | What It Does |
| --- | --- |
| push() | Add to end |
| pop() | Remove from end |
| shift() | Remove from start |
| unshift() | Add to start |
| map() | Transform items |
| filter() | Select items |
| reduce() | Combine into one value |
| forEach() | Run code on each item |

## Practice Assignment

(First try yourself)

**Step 1:** Create an array of numbers.

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

**Step 2:** Use `map()` to double each number

```javascript
let doubled = numbers.map((number) => number * 2);
```

**Step 3:** Use `filter()` to get numbers greater than 10.

```javascript
let greaterNumber = doubled.filter((number) => number > 10);
```

**Step 4: Use** `reduce()` to calculate total sum.

```javascript
let totalSum = greaterNumber.reduce((acc, cur) => acc + cur, 0);
```

## Final Advice

If you master these array methods, you’ll:

*   Write cleaner code
    
*   Avoid unnecessary loops
    
*   Think more functionally
    
*   Become confident in JavaScript interviews
    

Practice them today.