# Javascript Array Methods You Must Know

Arrays are one of the most useful data structures in JavaScript. They allow us to store multiple values in a single variable and work with them easily. But simply storing values in an array is only the beginning — the real power comes from the **methods that help us manipulate and process those values efficiently**.

JavaScript provides several built-in array methods that make common tasks much simpler. Whether you want to **add elements, remove elements, transform data, or calculate results**, there is usually a method designed for that job.

In this article, we’ll explore some of the most important array methods every beginner should understand:

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

Instead of writing long loops every time, these methods help you write **cleaner, shorter, and more readable code**.

Let’s take a look at how each of them works with simple examples

# **push() and pop()**

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

### **push() → Adds an element to the end**

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

fruits.push("Orange");

console.log(fruits);
```

Output:

```javascript
["Apple", "Banana", "Mango", "Orange"]
```

### **Before push()**

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

### **After push()**

```javascript
["Apple", "Banana", "Mango", "Orange"]
```

* * *

### **pop() → Removes the last element**

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

fruits.pop();

console.log(fruits);
```

Output:

```javascript
["Apple", "Banana"]
```

### **Before pop()**

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

### **After pop()**

```javascript
["Apple", "Banana"]
```

These two methods behave like a **stack**, where elements are added and removed from the end.

* * *

# **shift() and unshift()**

Unlike push and pop, these methods work on the **beginning of the array**.

### **shift() → Removes the first element**

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

fruits.shift();

console.log(fruits);
```

Output:

```javascript
["Banana", "Mango"]
```

* * *

### **unshift() → Adds an element at the beginning**

```javascript
const fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);
```

Output:

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

So remember:

| **Method** | **What it does** |
| --- | --- |
| push() | Add element at end |
| pop() | Remove element from end |
| shift() | Remove element from start |
| unshift() | Add element at start |

* * *

# **forEach()**

Before learning map and filter, it’s useful to understand `forEach()`.

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

Example:

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

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

Output:

```javascript
1
2
3
4
```

This is often cleaner than writing a traditional loop.

### **Traditional for loop**

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

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

Both work, but `forEach()` is usually **shorter and easier to read**.

  

* * *

# **map()**

### `map()` is one of the most useful array methods in JavaScript.

It is used when you want to **transform every element of an array**.

It creates a **new array** based on the original one.

Example: double every number.

```javascript
const numbers = [2, 4, 6, 8];

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

console.log(doubled);
```

Output:

```javascript
[4, 8, 12, 16]
```

### **Before map()**

```javascript
[2, 4, 6, 8]
```

### **After map()**

```javascript
[4, 8, 12, 16]
```

Important:

`map()` **does not change the original array**.

* * *

# **filter()**

### `filter()` is used when you want to **select certain elements from an array based on a condition**.

### Example: get numbers greater than 10.

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

const result = numbers.filter(function(num) {
  return num > 10;
});

console.log(result);
```

Output:

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

### **Before filter()**

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

### **After filter()**

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

So `filter()` returns a **new array containing only the values that match the condition**.

* * *

# **reduce() (Beginner Explanation)**

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

### Common use cases include:

*   Calculating total sum
    
*   Finding averages
    
*   Counting values
    

Example: finding the sum of numbers.

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

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

console.log(total);
```

Output:

```javascript
30
```

How it works step-by-step:

| **Step** | **Accumulator** | **Current** | **Result** |
| --- | --- | --- | --- |
| Start | 0 | 5 | 5 |
| Next | 5 | 10 | 15 |
| Next | 15 | 15 | 30 |

So `reduce()` **gradually combines values until one final result remains**.

* * *

# **Quick Comparison: for loop vs map/filter**

### **Traditional approach**

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

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

### **Using map()**

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

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

The second version is:

*   shorter
    
*   cleaner
    
*   easier to understand
    

* * *

# **Assignment Practice**

Try this small exercise in your browser console.

### **Step 1: Create an array**

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

* * *

### **Step 2: Double each number using map()**

```javascript
const doubled = numbers.map(num => num * 2);
console.log(doubled);
```

* * *

### **Step 3: Get numbers greater than 10 using filter()**

```javascript
const greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen);
```

* * *

### **Step 4: Calculate total sum using reduce()**

```javascript
const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);
```

* * *

# **Final Thoughts**

Learning array methods is a **big step toward writing modern JavaScript**.

Instead of manually looping through arrays every time, methods like:

*   `map()`
    
*   `filter()`
    
*   `reduce()`
    
*   `forEach()`
    

allow you to write **cleaner and more expressive code**.

At first they might feel slightly unfamiliar, but after practicing a few times, they become **one of the most powerful tools in JavaScript**.

👉 **Now open your browser console and experiment with arrays.**