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

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

Here:

• numbers → array name

• [10,20,30,40] → array values

• Each value has an index

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

let arr = [5, 10, 15];

Memory representation (simplified):

Index     Value
0         5
1         10
2         15

When we access:

console.log(arr[1]);

Output

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

array.push(value)

Example

let arr = [1,2,3];

arr.push(4);

console.log(arr);

Output

[1,2,3,4]

Important

✔ Changes original array

Does not create a new array

---

2. pop()

Removes the last element.

Example

let arr = [1,2,3];

arr.pop();

console.log(arr);

Output

[1,2]

Important

✔ Changes original array

---

3. shift()

Removes the first element.

Example

let arr = [10,20,30];

arr.shift();

console.log(arr);

Output

[20,30]

✔ Changes original array

---

4. unshift()

Adds element at the beginning.

Example

let arr = [20,30];

arr.unshift(10);

console.log(arr);

Output

[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:

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:

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

let arr = [1,2,3];

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

Output

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:

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:

data → filter → map → reduce

---

6. map()

map() creates a new array by transforming elements.

Example

let numbers = [1,2,3];

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

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

Output

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

Important

does NOT modify original array

✔ creates new array

---

Internal Working of map()

Conceptually similar to:

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

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

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

console.log(even);

Output

[2,4]

Important

✔ creates new array

does not modify original array

---

Internal Working of filter()

Conceptually:

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

array.reduce(callback, initialValue)

---

Example 1: Sum of Array

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

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

console.log(sum);

Output

10

Explanation:

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

---

Example 2: Find Maximum

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

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

   if(curr > acc){
      return curr;
   }

   return acc;

});

console.log(max);

Output

20

---

Example 3: Count Items

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

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

---

Internal Working of reduce()

Conceptually similar to:

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:

array.slice(startIndex, endIndex);

• startIndex → the position where extraction starts.

• endIndex → the position where extraction stops (not included).

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

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

Output

[2,3]

Does NOT modify original array.

---

splice()

Adds/removes elements.

Syntax :

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.

let arr = [1,2,3];

arr.splice(1,1);

Output

[1,3]

✔ modifies original array.

---

includes()

Checks if element exists.

let arr = [1,2,3];

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

Output

true

---

Real Life Pipeline Example

Imagine shopping cart data processing:

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

Example:

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