# Array Methods You Must Know

* * *

# Array Methods Every JavaScript Developer Must Know

Arrays are one of the most commonly used data structures in **JavaScript**.  
To work efficiently with arrays, developers rely on built-in **array methods** that help manipulate and transform data easily.

In this article, we will learn some of the **most important array methods** every developer should know.

* * *

# 1\. push() and pop()

These methods are used to **add or remove elements from the end of an array**.

### push()

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

```javascript
let fruits = ["apple", "banana"];

fruits.push("orange");

console.log(fruits);
```

### Before

```plaintext
["apple", "banana"]
```

### After

```plaintext
["apple", "banana", "orange"]
```

* * *

### pop()

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

```javascript
let fruits = ["apple", "banana", "orange"];

fruits.pop();

console.log(fruits);
```

### Before

```plaintext
["apple", "banana", "orange"]
```

### After

```plaintext
["apple", "banana"]
```

* * *

# 2\. shift() and unshift()

These methods work with the **start of the array**.

### shift()

Removes the **first element**.

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

numbers.shift();

console.log(numbers);
```

### Before

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

### After

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

* * *

### unshift()

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

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

numbers.unshift(1);

console.log(numbers);
```

### Before

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

### After

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

* * *

# 3\. forEach()

The `forEach()` method runs a function **once for every element in an array**.

```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 **side effects** like logging or updating values.
    

* * *

# 4\. map()

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

### Example: Double each number

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

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

console.log(doubled);
```

### Before

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

### After

```plaintext
[4, 8, 12]
```

* * *

# Traditional Loop vs map()

### Using for loop

```javascript
let numbers = [2,4,6];
let result = [];

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

### Using map()

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

✅ `map()` is **shorter, cleaner, and easier to read**.

* * *

# 5\. filter()

The `filter()` method creates a **new array containing only elements that pass a condition**.

### Example: Get numbers greater than 10

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

let filtered = numbers.filter(function(num) {
  return num > 10;
});

console.log(filtered);
```

### Before

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

### After

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

* * *

# 6\. reduce() (Beginner Friendly)

The `reduce()` method **combines all values of an array into a single result**.

It works using an **accumulator**.

### Example: Calculate total sum

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

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

console.log(sum);
```

### How it works

| Step | Accumulator | Current Value | Result |
| --- | --- | --- | --- |
| 1 | 0 | 10 | 10 |
| 2 | 10 | 20 | 30 |
| 3 | 30 | 30 | 60 |

Final Result:

```plaintext
60
```

* * *

# Assignment Practice

Try this yourself in the console.

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

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

// numbers greater than 10
let filtered = numbers.filter(num => num > 10);

// total sum
let sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(doubled);
console.log(filtered);
console.log(sum);
```

* * *