UnderStand the Most Powerful Function of Javascript

Hi, Dev Thanks for opening my blog. I hope you are doing well and ready to learn the most powerful function in the Javascript.

Why this is most powerful?

Yes this is the most powerful function this single function can do all the stuff of other array prototypes and this is worth sharing

So let's start

The reduce function executes a reducer function on each element of the array, resulting in single output value. The reducer is provided by the programmer.

How it works

The reduce method takes in 2 parameters.

First is the function passed to the reduce method that accepts four arguments.

Accumulator: It is the accumulated value previously returned in the last invocation of the callbackor initialValue if it was supplied. The reducer's returned value is assigned to the accumulator. The accumulator is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.

current Value: The value of the current element.

current Index: The index of the current element being processed in the array. It starts at index 0 if an initialValue is provided. Otherwise, it starts at index 1.

Source array: The array being iterated over

The second argument is A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue. Calling reduce() on an empty array without an initialValue
will throw a TypeError. the initial value can be variable, array, object

Usages of Reduce

1) Sum of Array: Let's start with the basic one and then we will go deep inside the reduce

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {    console.log("accumulator is "+accumulator+ " and current value      is"+currentValue);    return accumulator + currentValue;})

as in the above code, you can see we have hasn't passed the initial value, so the accumulator value will be the first index(0) of the array and the current value will be the second one(1).
and the output will be

accumulator is 0 and current value is 1
accumulator is 1 and current value is 2
accumulator is 3 and current value is 3

Now let's give the initial value

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {    console.log("accumulator is "+accumulator+ " and current value      is"+currentValue);    return accumulator + currentValue;},5)

and see the output

accumulator is 5 and current value is 0
accumulator is 5 and current value is 1
accumulator is 6 and current value is 2
accumulator is 8 and current value is 3

I hope you understand how the accumulator and initial value works.

2) Make a new array from an existing array

suppose we have the array of JSON of students and we want to make a new array only with name and roll no. ofcouse you can do that with the loop or returning the new array with the Map, but in this, we are only going to use the reduce.

var students = [    {        name: "Kushal",        class: "MCA",        result: "Pass",        mobileNo: "995481"    },      {        name: "Rahul",        class: "BCA",        result: "Pass",        mobileNo: "993281"    },      {        name: "Kushal",        class: "MCA",        result: "Pass",        mobileNo:"989481"    }];const studentWithMobileNo = students.reduce((function(acc,student){    return [...acc,{name:student.name,mobileNo:student.mobileNo}]}),[])console.log(studentWithMobileNo);

Here we initialized the accumulator with the empty array and then make a new array with the help of reducer function.

The output for the above will be

[  { name: 'Kushal', mobileNo: '995481' },  { name: 'Rahul', mobileNo: '993281' },  { name: 'Kushal', mobileNo: '989481' }]

Filtering the array

now suppose we only want to get only the pass records from the student's array, this can be done by a very simple method

const PassedStudents = students.reduce((function(acc,student){     return student.result == "Pass" ?  [...acc,student] : acc}),[])

You can do much more stuff with the Reduce, I hope that you like this post and understood the reduce function.
Thanks for reading
To keep up with everything Im doing, follow me on Twitter. ==> Kushal Sharma