Javascript Array Methods (Part - 3)

Hi there 👋 !!

I have come back with part 3 of Javascript array methods.

In this part, we are going to discuss map(), forEach(), reduce() and filter() methods.

Let's begin! 🔥

1. forEach()

It executes the provided function for each element of the array.

Syntax:

   Array.forEach(function(currElement, index, arr)
  {
          //perform operation on currElement
  });

The function which is written inside of forEach() will run for each element of the array.

• currElement - as the name suggests, it is the curr value or element of the array.

• index (OPTIONAL) - it is the index of the current element.

• arr (OPTIONAL) - it is the array of the current element.

let items = ["apple", "gavava", "mango"];

items.forEach( function(curr) {
     console.log(curr);
});
// apple
// gavava
// mango

items.forEach( function(curr, idx, arr) {
     arr[idx] = "This is " + arr[idx];
});      

console.log(items); // ['This is apple', 'This is gavava', 'This is mango']

Using Arrow function

let items = ["apple", "gavava", "mango"];

items.forEach(curr => {
     console.log(curr);
})
// apple
// gavava
// mango

We can also define the function outside the forEach() method.

see the example below:

items.forEach(myFun);

function myFun(curr){
    console.log(curr);
}
// apple
// gavava
// mango

2. map()

Unlike forEach() it does not change the original array instead it creates a new array by calling the provided function on each element of the original array.

Syntax:

Array.map(function(currElement, index, arr){ 
    //code
});

Let us see the example,

let marks = [79,98,95,60];

let updatedMarks = marks.map(function(curr){
    return curr + 10;
});

console.log(marks); //[79, 98, 95, 60]
console.log(updatedMarks); //[89, 108, 105, 70]



updatedMarks = marks.map(myFun);

function myFun(ele){
    ele = ele - 5; 
    return ele;
}

console.log(marks); //[79, 98, 95, 60]
console.log(updatedMarks); //[74, 93, 90, 55]

3. filter()

It creates a new array containing the elements which pass the condition provided in a function.

It does not change the original array.

Syntax:

Array.filter(function(currElement, index, arr){ 
    //condition
});

Let us understand it through an example. Here the condition is curr > 80 . whichever element passes this condition will be considered a topper.

let marks = [79,98,95,60];

let toppers = marks.filter(curr => {
    return curr > 80;
});

console.log(marks); //[79, 98, 95, 60]
console.log(toppers); //[98, 95]

4. reduce()

reduce() calls or executes the function over each element of the array and returns a single output value ( function's accumulated result ).

Syntax:

Array.reduce( function ( accumulator,   currentElement ) { operation }, initialValue )

reduce function takes two arguments:

1) function

The function takes two parameter

1. accumulator - It is a temporary result, which stores the return value of the previous calculation.

2. currentElement - It represents the current element of the array.

2) initialValue - initial value of the accumulator

Let's see the examples:

1. Sum of array elements

const arr = [20,30,10,50,30];

let output = arr.reduce( function(acc, curr) {
    return acc + curr;
} ,0)
console.log(output);  // 140


//Arrow function 
output = arr.reduce( (acc, curr) => acc + curr, 0 )
console.log(output);  //140

2. The maximum value in the array

const maxValue = arr.reduce( (max, curr) => {
    if(curr > max)
    {
        max = curr;
    }
    return max;
}, 0);
console.log(maxValue);  // 50

Hey!! You have made it to the end 🤩.

Thanks for reading this article.

If you like it don't forget to give it a thumbs up 👍.