# Array Methods You Must Know (JavaScript)

![](https://cloudmate-test.s3.us-east-1.amazonaws.com/uploads/covers/69625a2de3f19ee5889a5e7f/1a7b7fca-5053-4f04-a712-a5df23fee678.png align="center")

JavaScript arrays are a core part of frontend development. Whether you are working with API responses, managing UI state, or building dynamic features, array methods help you write cleaner and more efficient code. This article covers the most important array methods every beginner should understand, along with simple examples, before-and-after states, and clear explanations.

## push() and pop()

The <mark class="bg-yellow-200 dark:bg-yellow-500/30">push()</mark> and <mark class="bg-yellow-200 dark:bg-yellow-500/30">pop()</mark> methods operate on the end of an array. <mark class="bg-yellow-200 dark:bg-yellow-500/30">push()</mark> adds a new element to the end, while <mark class="bg-yellow-200 dark:bg-yellow-500/30">pop()</mark> removes the last element.

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

console.log("Before:", fruits);

fruits.push("mango");
console.log("After push:", fruits);

fruits.pop();
console.log("After pop:", fruits);
```

Output:

```javascript
Before: ["apple", "banana"]
After push: ["apple", "banana", "mango"]
After pop: ["apple", "banana"]
```

These methods follow the Last In First Out (LIFO) concept, similar to a stack.

## shift() and unshift()

The <mark class="bg-yellow-200 dark:bg-yellow-500/30">shift()</mark> and <mark class="bg-yellow-200 dark:bg-yellow-500/30">unshift()</mark> methods operate at the beginning of an array. <mark class="bg-yellow-200 dark:bg-yellow-500/30">unshift()</mark> adds an element to the start, while <mark class="bg-yellow-200 dark:bg-yellow-500/30">shift()</mark> removes the first element.

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

console.log("Before:", numbers);

numbers.unshift(1);
console.log("After unshift:", numbers);

numbers.shift();
console.log("After shift:", numbers);
```

Output:

```javascript
Before: [2, 3, 4]
After unshift: [1, 2, 3, 4]
After shift: [2, 3, 4]
```

These methods follow the First In First Out (FIFO) concept, similar to a queue.

## map()

The <mark class="bg-yellow-200 dark:bg-yellow-500/30">map()</mark> method is used to transform each element of an array and returns a new array without modifying the original one.

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

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

console.log("Original:", nums);
console.log("Doubled:", doubled);
```

Output:

```javascript
Original: [1, 2, 3, 4]
Doubled: [2, 4, 6, 8]
```

![https://miro.medium.com/1%2AnxCv9iX0nuANgGOy3gkHDA.png](https://miro.medium.com/1%2AnxCv9iX0nuANgGOy3gkHDA.png align="center")

![https://www.yworks.com/assets/images/landing-pages/demo-flowchart-example.ecc8bed3ad.png](https://www.yworks.com/assets/images/landing-pages/demo-flowchart-example.ecc8bed3ad.png align="center")

The map() method processes each element one by one and produces a new transformed array. It is widely used when you need to modify data, such as formatting values or updating UI elements.

## filter() :

The <mark class="bg-yellow-200 dark:bg-yellow-500/30">filter()</mark> method returns a new array that contains only the elements that satisfy a given condition.

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

let greaterThan10 = nums.filter((num) => num > 10);

console.log("Original:", nums);
console.log("Filtered:", greaterThan10);
```

Output:

```javascript
Original: [5, 10, 15, 20]
Filtered: [15, 20]
```

![https://www.scaler.com/topics/images/filter-in-javascript-thumbnail.webp](https://www.scaler.com/topics/images/filter-in-javascript-thumbnail.webp align="center")

![https://cdn.holistics.io/docs/v3/filters/select-truefalse-filter.png](https://cdn.holistics.io/docs/v3/filters/select-truefalse-filter.png align="center")

The filter() method evaluates each element and includes it in the new array only if the condition returns true. It is useful when you want to extract specific data from a dataset.

## reduce()

The <mark class="bg-yellow-200 dark:bg-yellow-500/30">reduce()</mark> method is used to combine all elements of an array into a single value. This could be a sum, average, or any accumulated result.

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

let sum = nums.reduce((acc, curr) => acc + curr, 0);

console.log("Sum:", sum);
```

Output:

```javascript
Sum: 10
```

Step-by-step working:

```javascript
Step 1: acc = 0, curr = 1 → acc = 1
Step 2: acc = 1, curr = 2 → acc = 3
Step 3: acc = 3, curr = 3 → acc = 6
Step 4: acc = 6, curr = 4 → acc = 10
```

The accumulator (acc) stores the running result, while curr represents the current element. The initial value is set to 0.

## forEach()

The forEach() method is used to loop through each element of an array. It does not return a new array.

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

nums.forEach((num) => {
  console.log(num * 2);
});
```

Output:

```javascript
2
4
6
```

This method is useful when you only need to perform an action on each element, such as logging or updating values, without creating a new array.

## Traditional for loop vs map() and filter()

Using a traditional `for` loop:

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

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

console.log(result);
```

Using map():

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

The map() and filter() methods make code shorter, more readable, and easier to maintain compared to traditional loops.

## Assignment Practice(For handsOn on JS)

Try the following example in your browser console:

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

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

let filtered = doubled.filter((num) => num > 10);

let total = filtered.reduce((acc, curr) => acc + curr, 0);

console.log("Doubled:", doubled);
console.log("Filtered:", filtered);
console.log("Total:", total);
```

This exercise helps you understand how these methods work individually before combining them.

## Key Takeaways

push() and pop() modify the end of the array  
  
shift() and unshift() modify the beginning of the array  
  
map() transforms elements into a new array  
  
filter() selects elements based on a condition  
  
reduce() combines all elements into a single value  
  
forEach() is used for iteration without returning a new array