# JavaScript Array Methods You Must Know before jumping into coding

## Overview

Arrays are one of the most critical concepts in JavaScript. In almost every project, we use arrays to store and manage data.

In this article, we will discuss the most frequently used JavaScript array methods that every developer should know before starting serious coding. These methods will help you write cleaner, shorter, and more efficient code instead of using long and complex loops.

## Commonly used array methods

### Method 1: Push()

`push()` is an array method used to **add one or more elements to the end of an array**. Need to know that this actually modifies the array. `push()` Returns the **length of the newly made array**, not the array itself.

The flow is like first it goes to the last index, then it inserts the new value there at the length position, after increasing the array length. Finally, it returns the updated length.

### Basic Syntax

```javascript
arr1.push(element1, element2, ..., elementN);
```

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

const newLength = numbers.push(4);

console.log(numbers);    // [1, 2, 3, 4]
console.log(newLength);  // 4
```

### Method 2: Pop()

`pop()` is an array method used to **remove the last element** from an array. It also **modifies the original array**. `pop()` Returns the **removed element**. If the array is empty, it returns `undefined`.

The flow is like this - JavaScript finds the last index. It stores that value. It reduces the array. It returns the removed value.

## Basic Syntax

```javascript
array.pop()
```

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

const removed = numbers.pop();

console.log(numbers); // [1, 2]
console.log(removed); // 3
/*
Here:
3 is removed from the end
The original array changes
The return value is the removed element
*/
```

### Method 3: Shift()

`shift()` is an array method used to **remove the first element** from an array. It **modifies the original array** and returns the **removed element**.  
If the array is empty, it returns `undefined`.

The flow of shifts is like - JavaScript stores the value at the index `0` Then it shifts all remaining elements one position to the left. It decreases the array length by 1. It returns the removed value.

#### Basic Syntax

```javascript
array.shift()
```

#### Example

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

const removed = numbers.shift();

console.log(numbers); // [20, 30]
console.log(removed); // 10
// Here:
// 10 is removed from the beginning.
// The original array changes.
// The return value is the removed element.
```

### Method 5: Unshift()

`unshift()` is an array method used to **add one or more elements to the beginning** of an array. It **modifies the original array** and returns the **new length** of the array.

#### Step-by-step:

*   JavaScript shifts all existing elements one position to the right.
    
*   It inserts the new value(s) at the index `0`.
    
*   It increases the array length.
    
*   It returns the updated length.
    

#### Basic Syntax

```javascript
array.unshift(element1, element2, ..., elementN)
```

#### Example

```javascript
const numbers = [20, 30];

const newLength = numbers.unshift(10);

console.log(numbers);   // [10, 20, 30]
console.log(newLength); // 3

// Here:
// 10 is added at the beginning.
// The original array changes.
// The return value is the new length.
```

### Method 6: Filter()

`filter()` is an array method used to **select specific elements** from an array based on a condition. It runs a function on every element and returns a **new array** containing only the elements that pass the test.

Note: `filter()` **does NOT modify the original array.**

### Step-by-step:

*   JavaScript loops through each element.
    
*   It runs the callback function.
    
*   If the function returns `true`, the element is added to a new array.
    
*   If it returns `false`, the element is skipped.
    
*   Finally, it returns the new filtered array.
    

### Basic Syntax

```javascript
array.filter(callback(currentValue, index, array), thisArg)
```

### Example 1

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

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]
console.log(numbers);     // [1, 2, 3, 4, 5, 6] (unchanged)
// Here:
// The condition checks if a number is even.
// Only numbers that return true are included.
// The original array stays the same
```

### What Arguments Does filter() Take?

The callback receives 3 arguments:

*   **currentValue** → current element
    
*   **index** → current index
    
*   **array** → full array
    

```javascript
const nums = [10, 20, 30];

nums.filter(function(value, index, array) {
  console.log(value, index, array);
  return value > 15;
});

// Output:
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]
```

### Example 2: Filter an Array of Objects

```javascript
const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 },
  { name: "Amit", age: 18 }
];

const adults = users.filter(user => user.age >= 21);

console.log(adults);
// [
//   { name: "Pallab", age: 22 },
//   { name: "Rahul", age: 25 }
// ]
```

### Method 1: Map()

`map()` is an **array method** in JavaScript. Takes an array, runs a function on **each element,** and returns a **new array** with modified values

Note: It does **NOT** change the original array.

Sample Code

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

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

console.log(doubled); // [2, 4, 6, 8]
// For better understading always run the code in console
```

What Arguments Does `map()` Take?

### Syntax:

```plaintext
array.map(callback(currentValue, index, array), thisArg)
```

### callback

This callback means a function that runs for every element.

It receives **3 arguments**:

1.  **currentValue**: means for that iteration, what is the array element.
    
2.  **index**: this is the currentValue index.
    
3.  **array**: it is the whole array.
    

```javascript
const nums = [10, 20, 30];

nums.map(function(value, index, array) {
  console.log(value, index, array);
});

// Output 
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]
```

### thisArg

It is used to set this value on the callback.

```javascript
const obj = {
  multiplier: 3
};

const nums = [1, 2, 3];

const result = nums.map(function(num) {
  return num * this.multiplier;
}, obj);

console.log(result); // [3, 6, 9]
```

### You can `Map()` array of objects

```javascript
const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 }
];

const names = users.map(user => user.name);
// ["Pallab", "Rahul"]
```

### Method 7: reduce()

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

That single value can be:

*   A number (sum, total)
    
*   A string
    
*   An object
    
*   Another array
    

It does **not modify the original array**.

### Basic Syntax

```javascript
array.reduce(callback(accumulator, currentValue), initialValue)
```

### Important Terms

*   **accumulator** → stores the running result
    
*   **currentValue** → current element in the loop
    
*   **initialValue** → starting value (recommended to always provide)
    

### Example 1: Sum of Numbers

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

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

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

Step idea:

*   0 + 1 = 1
    
*   1 + 2 = 3
    
*   3 + 3 = 6
    
*   6 + 4 = 10
    

Final result → `10`

### When Do We Use reduce()?

*   Total price calculation
    
*   Counting items
    
*   Grouping data
    
*   Flattening arrays
    

Think of `reduce()` as:

**"Take everything and turn it into one final value."**

## Method 8: forEach()

`forEach()` is an array method used to **loop through each element** of an array.

It runs a function for every element.

Important:

*   It **does not return anything** (returns `undefined`)
    
*   It **does not create a new array**
    

It is mainly used for:

*   Printing values
    
*   Updating something
    
*   Running side effects
    

### Basic Syntax

```javascript
array.forEach(callback(currentValue, index, array))
```

### Example

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

numbers.forEach(function(num, index) {
  console.log("Index:", index, "Value:", num);
});
```

Output:

```plaintext
Index: 0 Value: 10
Index: 1 Value: 20
Index: 2 Value: 30
```

## Now The question is, if we have a for loop, then why Map() and Filter()?

### forEach()

`forEach()` is used to **loop through every element** of an array and perform an action.

*   It does **not return a new array**
    
*   It is used when you just want to **do something** with each item
    
*   It cannot break or stop early (unlike a normal `for` loop)
    

### Important Difference

*   `for` → full control (break, continue, manual index)
    
*   `map` → transform and return a new array
    
*   `filter` → select some elements
    
*   `forEach` → just run code for each element (no return)
    

### Conclution

Array methods help you write clean, efficient, and professional JavaScript.  
Use the right method for the right task, and your code becomes simpler, more readable, and easier to maintain.