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

[John Peters]

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?

[József Sallai]

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.

[AckmanDESU]

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.

[Visakh Vijayan]

Neat

[John Peters]

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'