DEV Community

👨🏻‍💻 UnderStand the Most Powerful 💪 Function of Javascript

Kushal sharma on May 04, 2020

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 p...

Read full post

James Thomson • May 4 '20

While reduce is a highly useful function, both of these can be written with more appropriate functions that signify your intent.

Your first example could simply use map

const studentWithMobileNo = students.map(({name, mobileNo}) => ({ name, mobileNo }));

and your second with filter

const studentsThatPassed = students.filter(el => el.result === 'Pass');

Reduce would be more appropriate for something like tallying up the total class score or something like that.

const students = [
    {
        name: "Kushal",
        class: "MCA",
        result: "Fail",
        mobileNo: "995481",
        score: 1.5
    },
      {
        name: "Rahul",
        class: "BCA",
        result: "Pass",
        mobileNo: "993281",
        score: 2.9
    },
      {
        name: "Kushal",
        class: "MCA",
        result: "Pass",
        mobileNo:"989481",
        score: 3.6
    }
];

const totalScore = students.reduce((acc, val) => acc + val.score, 0);

JP Antunes • May 5 '20

A better example of what you can do with reduce is group objects by property. Case in point, here's how to split the students by result:

students.reduce( (acc, val) => {
    !acc[val.result] 
        ? acc[val.result] = [val.name] 
        : acc[val.result].push(val.name); 
    return acc; 
}, {})

Produces:

{ Fail: [ 'Kushal' ], Pass: [ 'Rahul', 'Kushal' ] }

JP Antunes • May 5 '20

Another interesting use case for reduce is to create a lookup table from an object and a property / key.

let phoneBook = students.reduce( (acc, val) => (acc[val.mobileNo] = val, acc), {})

> phoneBook[989481]
{ name: 'Kushal',
  class: 'MCA',
  result: 'Pass',
  mobileNo: '989481' }

Kushal sharma • May 4 '20

Aggred with you , i just want to show that you can also you reduce for map amd filter also

James Thomson • May 5 '20

I see... but why? Perhaps this is the disconnect in your article. Yes, you can use reduce to achieve other tasks, but why do so when there are more succinct functions? I mean, I could use a for loop for all of these as it's the basis of all these function, but I wouldn't do so unless I had good reason (performance can be one of those or the need to break out of the loop at any given time which you can't do with these).

The title of your article claims reduce is the most powerful javascript function (which is definitely debatable), but doesn't really explain or demonstrate why you say that. If using reduce were 5x faster than filter or map then the claim could be relevant, but that's not the case. I don't mean to be confrontational, hopefully you take this as a positive critique, I just don't see the correlation of your statement in the title of this article.

Paul DiGian • May 5 '20

The point he is trying to make is that it is possible to implement filter and map in terms of reduce but it is not possible to do the inverse.

Indeed it is a well know theoretical fact.

James Thomson • May 5 '20

If that's the case, I don't think it comes across very well in the article. I understand reduce can be used in different ways, but so can many other things in JS. That doesn't mean they should be used this way. I'm not trying to degrade his article, I just think it's important to explain why you would do it this way or why it's interesting, but not something that should be practiced. There are a fair number of beginners (this article is even tagged with #beginner) on Dev.to and I think it's alarming to be encouraging a certain style of programming that would be torn apart in a code review.

Dominik Aksamit • May 4 '20

I definitely agree that reduce is a powerful build-in javascript function.
When you once understand how it works, it's hard to refrain from using it.
You can do a lot more than map values of an array, flat an array, or transform arrays into objects.
I see only one significant disadvantage - readability. Sometimes it could be hard to read for other developers what we mean using reduce function.

Here is a great explanation - youtube.com/watch?v=qaGjS7-qWzg

Kushal sharma • May 4 '20

Thanks for the youtube link

John Peters • May 4 '20

Kushal, if we have these two functions doing the same thing.

let currentValue = 0;

if(useMap){
  //must have external value to reference
  numberArray.map(number=>{currentValue += numbers;});
} else {
  //whereas the same function using reduce, could be...
  numberArray.reduce(internalCurrentValue, number=>{internalCurrentValue+=number});
  currentValue = internalCurrentValue;
}

Do you know of other advantages of using reduce?

AckmanDESU • May 4 '20 • Edited

Both of these are incorrect anyway.

Use .map when you want to modify the array you're looping over and return the result.
Use .forEach when you simply wanna loop over the values.
You put the reducing method as the second parameter of .reduce when it should be the first.

The reduce example should be written like this:

const result = numberArray.reduce((a, b) => a + b, 0);

Or slightly more readable:

const sum = (a, b) => a + b;
const result = numberArray.reduce(sum, 0);

And hell you could skip the second parameter (0) in this case as it would work regardless.

const sum = (a, b) => a + b;
const result = numberArray.reduce(sum);

So the complete example would be:


    const numberArray = [0, 1, 2, 3, 4, 5];
    const mode = 'xxx';
    let currentValue;

    switch (mode) {
        case 'for':
            for (let i = 0; i < numberArray.length; i += 1) {
                currentValue += numberArray[i];
            }
            break;
        case 'forEach':
            numberArray.forEach((number) => {
                currentValue += number;
            });
            break;
        case 'reduce':
            const sum = (a, b) => a + b;
            currentValue = numberArray.reduce(sum);
            break;
    }

As far as performance goes, the for loop is the fastest option. If you want readability this reduce example is pretty sweet, I'd use it. I believe for...of loops are somewhere in between regarding performance but I tend to avoid them.

Now, I believe reduce makes code hard to grasp most of the time, as 90% of its uses could be replaced by a different method. Since I stopped using Ruby my reduce usage has dropped considerably. Great for getting the sum of an array - probably bad for most other things.

Case in point, the example in the OP says:

    const passedStudents = students.reduce(
        (acc, student) => (student.result === 'Pass' ? [...acc, student] : acc),
        []
    );

But you could simply do this:

    const hasPassed = (student) => student.result === 'Pass';
    const passedStudents = students.filter(hasPassed);

I know it's simply to illustrate its usages but my point is it's harder to understand.

John Peters • May 4 '20

Observation:
I was seeing the pattern of iterables and iterators. In C# the iterators would have just one name, with multiple overrides. This is why I asked about the distinction.

In JavaScript the forEach function would be the most fundamental built-in function to the array, with 'map' and 'reduce' and 'filter' giving (decorated) patterns of a fundamental iterator. All could be considered 'iterators'

Visakh Vijayan • May 5 '20

Neat

József Sallai • May 4 '20

No need to store an additional variable in the memory. Array.prototype.reduce is a bit slower though. So it's a question of memory management vs performance.

Alex Lohr • May 5 '20

I believe there's a more powerful function in JS, which is String.prototype.replace. You can use it to replace static or even dynamic parts in strings or parse regular strings into arrays or objects:

let jar = {};
document.cookie.replace(/([^=; ]+)=([^;]+)/g, (_, key, val) => { jar[key] = val; });

You can even use it to do basic syntax highlighting of regular languages (might be a bit difficult with more recent ECMAscript versions): gist.github.com/atk/1084980

Now that's what I call powerful.