# Array Methods You Must Know :

In programming, we often need to store **multiple values together**.

Example:

*   Marks of students
    
*   List of products
    
*   User names
    
*   Prices of items
    

Instead of creating many variables, we use **arrays**.

* * *

## **What is an Array?**

An **array** is a data structure that stores **multiple values in a single variable**.

### Example

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

Here:

*   `numbers` → array name
    
*   `[10,20,30,40]` → array values
    
*   Each value has an **index**
    

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

* * *

## **How Arrays Are Stored in Memory**

In JavaScript memory (heap), arrays are stored **continuously with indexes**.

Example

```javascript
let arr = [5, 10, 15];
```

Memory representation (simplified):

```plaintext
Index     Value
0         5
1         10
2         15
```

When we access:

```javascript
console.log(arr[1]);
```

Output

```plaintext
10
```

Because index **1 → value 10**.

* * *

## **Important Array Methods**

Some commonly used array methods are:

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

Some extra useful methods:

*   **slice()**
    
*   **splice()**
    
*   **find()**
    
*   **includes()**
    

* * *

## **1\. push()**

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

### Syntax

```javascript
array.push(value)
```

### Example

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

arr.push(4);

console.log(arr);
```

Output

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

### Important

✔ **Changes original array**  
  
Does not create a new array

* * *

## **2\. pop()**

Removes the **last element**.

### Example

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

arr.pop();

console.log(arr);
```

Output

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

### Important

✔ Changes original array

* * *

## **3\. shift()**

Removes the **first element**.

### Example

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

arr.shift();

console.log(arr);
```

Output

```plaintext
[20,30]
```

✔ Changes original array

* * *

## **4\. unshift()**

Adds element **at the beginning**.

### Example

```javascript
let arr = [20,30];

arr.unshift(10);

console.log(arr);
```

Output

```plaintext
[10,20,30]
```

✔ Changes original array

* * *

### **Callback Function**

Before learning `map`, `filter`, `reduce`, we must understand **callback functions**.

A **callback function** is a function that is **passed as an argument to another function**.

Example:

```javascript
function greet(name){
   console.log("Hello " + name);
}

function processUser(callback){
   callback("Rahul");
}

processUser(greet);
```

Here:

*   `greet` → callback function
    
*   `processUser` → function that executes it
    

* * *

## **High Order Function (HOF)**

A **Higher Order Function** is a function that:

1.  Takes another function as argument OR
    
2.  Returns a function
    

Example:

```javascript
arr.map(function(num){
   return num * 2;
});
```

Here:

*   `map()` → Higher Order Function
    
*   callback function → passed inside map
    

* * *

## **5\. forEach()**

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

### Example

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

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

Output

```plaintext
1
2
3
```

### Important

Does NOT return new array  
  
Cannot use break/return normally  
  
✔ Used for iteration only

### Does it modify original array?

No (unless you manually change values).

* * *

## **Internal Working of forEach**

Basically JavaScript internally does something like this:

```javascript
for(let i = 0; i < arr.length; i++){
   callback(arr[i]);
}
```

So **forEach is basically a cleaner way of writing loops**.

* * *

## **Then Why Introduce forEach?**

Because it helps in:

✔ cleaner code  
  
✔ functional programming  
  
✔ chaining methods (pipeline)

Example pipeline:

```plaintext
data → filter → map → reduce
```

* * *

## **6\. map()**

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

### Example

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

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

console.log(doubled);
console.log(numbers);
```

Output

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

### Important

does NOT modify original array  
  
✔ creates new array

* * *

## **Internal Working of map()**

Conceptually similar to:

```javascript
let result = [];

for(let i = 0; i < arr.length; i++){
   result.push(callback(arr[i]));
}
```

So map:

1.  takes value
    
2.  runs callback
    
3.  stores returned value
    

* * *

## **7\. filter()**

`filter()` creates a **new array with elements that pass a condition**. If the condition is true then the output is shown.

### Example

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

let even = numbers.filter(function(num){
   return num % 2 === 0;
});

console.log(even);
```

Output

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

### Important

✔ creates new array  
  
does not modify original array

* * *

## **Internal Working of filter()**

Conceptually:

```javascript
let result = [];

for(let i = 0; i < arr.length; i++){

   if(callback(arr[i])){
      result.push(arr[i]);
   }

}
```

So filter:

*   runs condition
    
*   if true → store element
    

* * *

## **8\. reduce()**

`reduce()` reduces an array to **a single value**. Here, we pass **two parameters**.

Example uses:

*   sum
    
*   product
    
*   total price
    
*   counting
    

### Syntax

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

* * *

### **Example 1: Sum of Array**

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

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

console.log(sum);
```

Output

```plaintext
10
```

Explanation:

```plaintext
acc=0 curr=1 → 1
acc=1 curr=2 → 3
acc=3 curr=3 → 6
acc=6 curr=4 → 10
```

* * *

### **Example 2: Find Maximum**

```javascript
let arr = [10,5,20,8];

let max = arr.reduce(function(acc,curr){

   if(curr > acc){
      return curr;
   }

   return acc;

});

console.log(max);
```

Output

```plaintext
20
```

* * *

### **Example 3: Count Items**

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

let count = fruits.reduce(function(acc,fruit){

   acc[fruit] = (acc[fruit] || 0) + 1;

   return acc;

},{});

console.log(count);
```

Output

```plaintext
{apple:2, banana:2, orange:1}
```

* * *

## **Internal Working of reduce()**

Conceptually similar to:

```javascript
let acc = initialValue;

for(let i=0;i<arr.length;i++){

   acc = callback(acc, arr[i]);

}
```

Finally it returns `acc`.

* * *

## **Some Extra Useful Array Methods :**

### slice()

Creates a **new array** from part of an array.

**Syntax:**

```javascript
array.slice(startIndex, endIndex);
```

*   **startIndex** → the position where extraction **starts**.
    
*   **endIndex** → the position where extraction **stops (not included)**.
    

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

let newArr = arr.slice(1,3);
```

Output

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

Does NOT modify original array.

* * *

### splice()

Adds/removes elements.

**Syntax :**

```javascript
array.splice(startIndex, deleteCount, items)
```

Meaning of indexes:

*   **startIndex** → the position where the change will begin.
    
*   **deleteCount** → how many elements should be removed from that position.
    
*   **items (optional)** → new elements to insert at that index.
    

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

arr.splice(1,1);
```

Output

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

✔ modifies original array.

* * *

### includes()

Checks if element exists.

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

console.log(arr.includes(2));
```

Output

```plaintext
true
```

* * *

## **Real Life Pipeline Example**

Imagine **shopping cart data processing**:

```plaintext
Products → filter(price>100)
        → map(price)
        → reduce(total)
```

Example:

```javascript
let prices = [100,200,300];

let total = prices
   .filter(p => p > 150)
   .map(p => p * 1.18)
   .reduce((acc,curr) => acc + curr,0);

console.log(total);
```

This is called **method chaining / pipeline**.

* * *

## **Conclusion**

Arrays are one of the **most important data structures in JavaScript**.

Important methods like:

*   `map`
    
*   `filter`
    
*   `reduce`
    
*   `forEach`
    

are widely used in **modern JavaScript and frameworks like React**.

Thank you for reading this blog . I hope that the blog clears your fundamentels. I am open to feedback and suggestions