# Array Methods You Must Know

Hey Everyone,

In this blog, we will be learning about Array methods.

JavaScript provides us with different array methods that make working with arrays easier and cleaner than writing long loops.

In this article, we’ll understand some important array methods:

*   `push()` and `pop()`
    
*   `shift()` and `unshift()`
    
*   `map()`
    
*   `filter()`
    
*   `reduce()`
    
*   `forEach()`
    

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

These methods work on the **end of an array**.

### push()

Adds an element **to the end** of the array.

### Example

```javascript
let arr = ["a", "b"];


console.log(arr); // ["a","b"]

arr.push("c");

console.log(arr); // ["a","b","c"]
```

* * *

### pop()

Removes the **last element** from the array.

### Example

```javascript
let arr = ["a","b","c"]


console.log(arr); // ["a","b"]

arr.pop();

console.log(arr); //["a","b"]
```

* * *

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

These methods work on the **beginning of the array**.

* * *

## shift()

Removes the **first element**.

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


arr.shift();

console.log(arr); // [2,3]
```

* * *

## unshift()

Adds an element **to the beginning**.

```javascript
let arr = [2, 3];


arr.unshift(1);

console.log(arr); // [1,2,3]
```

* * *

### 3\. forEach()

`forEach()` runs a function **for every element in the array**.

### Example

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

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

Output:

```plaintext
1
2
3
```

Important:

`forEach()` **does not return a new array**. It is mainly used for **things like logging or updating values**.

* * *

### 4\. map()

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

* * *

### Using a Traditional For Loop

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

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

console.log(result);
```

Output

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

* * *

## Using map()

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

let result = numbers.map((num)=>num*2)

console.log(result); // [2,4,6]
```

`map()` is cleaner and easier to read.

![](https://cdn.hashnode.com/uploads/covers/6294933fd97f80b5091dcf59/49a06d5b-d8f5-43cd-8bb3-6ebc968a148d.png align="center")

* * *

### 5\. filter()

`filter()` creates a **new array with elements that pass a condition**.

* * *

### Using For Loop

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

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

console.log(result);
```

Output

```plaintext
[15,20]
```

* * *

## Using filter()

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

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

console.log(result); // [15,20]
```

* * *

## Flow of filter()

![](https://cdn.hashnode.com/uploads/covers/6294933fd97f80b5091dcf59/6dda0667-71ce-466e-8009-204c3c504945.png align="center")

```javascript
// Original Array
[5,10,15,20]

// Check Condition (>10)

/*
5  → ❌
10 → ❌
15 → ✅
20 → ✅

New Array
*/
[15,20]
```

* * *

### 6\. reduce()

`reduce()` is used to **combine all values of an array into a single value**.

Common uses:

*   sum of numbers
    
*   product
    
*   counting values
    

* * *

## Example: Sum of Numbers

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

let total = numbers.reduce((accumulator, current)=>accumulator+current,0);

console.log(total); // 10
```

### How reduce works

![](https://cdn.hashnode.com/uploads/covers/6294933fd97f80b5091dcf59/31446d34-884b-42d0-bf7e-55dd600e6cf4.png align="center")

```plaintext
Start value (accumulator) = 0

Step 1
0 + 1 = 1

Step 2
1 + 2 = 3

Step 3
3 + 3 = 6

Step 4
6 + 4 = 10
```

* * *

And now, you know what array methods are.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!