In this blog, we will learn the important Javascript array methods that are used most of the time.

Why do We Need Array Method?

Without array methods, If we need to perform operations on a particular or all the elements of an array, we will have to use a for loop:

For example:

let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  arr[i] *= 2;
}

console.log(arr);  // Output : [2, 4, 6, 8]

This works, but array methods are very much shorter, cleaner, and more readable.

1. push() and pop() :-

• Both are used to manipulate the data at the end of an array. They mutates the original array

• push() is used to add an element at the last of an array.

• pop() is used to remove an element from the last of an array.

For Example:

//Push.....

const fruits = ["apple", "banana"]; 
fruits.push("mango"); 
console.log(fruits);

// Output : ["apple", "banana", "mango"]

//Pop.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana",]

2. shift() and unshift() :-

• Both are used to manipulate the data at the beginning of an array. they mutate the original array

• shift() is used to add an element at the start of an array.

• unshift() is used to remove an element from the start of an array (first element).

For Example:

//shift().....

const fruits = ["apple", "banana"]; 
fruits.shift("mango"); 
console.log(fruits);

// Output : ["mango", "apple", "banana"]

//unshift.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana"]

3. map() :-

Map is used to mutate every element of an array, for example, doubling each element of the array, etc

Map returns a brand new array consisting of the elements which result from the calling of the callback function for each element in the original array

For Example:

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

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

console.log(doubled);

//Output: [2, 4, 6, 8]

4. filter() :-

As the name suggests, it is used to filter the elements of on array based on a given condition. It returns a brand new array consisting of the elements that satisfied a given condition.

For Example:

const numbers = [5, 10, 15, 20];

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

console.log(greaterThanTen);




Output

[15, 20]

Visual Flow

 [5, 10, 15, 20]
        ↓
keep numbers > 10
        ↓
    [15, 20]

5. reduce() :-

• reduce() is used to combine all array values into a single value.

• It may feel confusing at first, so start with simple examples.

Example: Find Sum of Numbers

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

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

console.log(total);

Output

10

How reduce() Works

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

Final Answer = 10

6. forEach :-

• forEach() is used to loop over each element of an array and perform the required action.

• Unlike map, it does not return anything.

Example

const fruits = ["apple", "banana", "mango"];

fruits.forEach(function (fruit) {
  console.log(fruit);
});

// Output

apple
banana
mango

Use forEach() when you only want to perform actions like printing values.

Small Practice Assignment

Try this yourself in the browser console.

Step 1: Create an array

const numbers = [2, 5, 8, 12];

Step 2: Double each number using map()

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

console.log(doubled);

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

const greaterThanTen = numbers.filter((num) => num > 10);

console.log(greaterThanTen);

Step 4: Find total sum using reduce()

const total = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(total);

Final Thoughts

Array methods are extremely useful in JavaScript in modern web development.

At first, reduce() and filter() might feel a little difficult, but after practicing a few examples, it will become much easier

The more you practice, the more natural these methods will feel.

Happy Coding