Is there any real benefit for using javascript Array reduce() method?

The performance of the methods may vary depending on the size of the data.Speed ​​is also affected by compiler optimization and data warm-up.Therefore on small data for of wins, and on big reduce insignificantly wins.

You can see for yourself by running the test:

const LOOP = 3test(dataGenerator(5))test(dataGenerator(500))test(dataGenerator(50000))test(dataGenerator(500000))test(dataGenerator(5000000))function test(dataSet) {    let sum    console.log('Data length:', dataSet.length)    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} reduce`)        sum = dataSet.reduce((s, d) => s += d.data, 0)        console.timeEnd(`${x} reduce`)    }    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} map`)        dataSet.map((i) => sum += i.data)        console.timeEnd(`${x} map`)    }    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} for loop`)        for (let i = 0; i < dataSet.length; i++) {            sum += dataSet[i].data        }        console.timeEnd(`${x} for loop`)    }    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} for reverse`)        for (let i = dataSet.length; i--;) {            sum += dataSet[i].data        }        console.timeEnd(`${x} for reverse`)    }    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} for of`)        for (const item of dataSet) {            sum += item.data        }        console.timeEnd(`${x} for of`)    }    for (let x = 0; x < LOOP; x++) {        sum = 0        console.time(`${x} for each`)        dataSet.forEach(element => {            sum += element.data        })        console.timeEnd(`${x} for each`)    }    console.log()}function dataGenerator(rows) {    const dataSet = []    for (let i = 0; i < rows; i++) {        dataSet.push({id: i, data: Math.floor(100 * Math.random())})    }    return dataSet}

These are the results of a performance test on my laptop.for loop does not work stably unlike for reverse and for of.

➜  node reduce_vs_for.js Data length: 50 reduce: 0.127ms1 reduce: 0.008ms2 reduce: 0.006ms0 map: 0.036ms1 map: 0.007ms2 map: 0.018ms0 for loop: 0.005ms1 for loop: 0.014ms2 for loop: 0.004ms0 for reverse: 0.009ms1 for reverse: 0.005ms2 for reverse: 0.004ms0 for of: 0.008ms1 for of: 0.004ms2 for of: 0.004ms0 for each: 0.046ms1 for each: 0.003ms2 for each: 0.003msData length: 5000 reduce: 0.031ms1 reduce: 0.027ms2 reduce: 0.026ms0 map: 0.039ms1 map: 0.036ms2 map: 0.033ms0 for loop: 0.029ms1 for loop: 0.028ms2 for loop: 0.028ms0 for reverse: 0.027ms1 for reverse: 0.026ms2 for reverse: 0.026ms0 for of: 0.051ms1 for of: 0.063ms2 for of: 0.051ms0 for each: 0.030ms1 for each: 0.030ms2 for each: 0.027msData length: 500000 reduce: 1.986ms1 reduce: 1.017ms2 reduce: 1.017ms0 map: 2.142ms1 map: 1.352ms2 map: 1.310ms0 for loop: 2.407ms1 for loop: 12.170ms2 for loop: 0.246ms0 for reverse: 0.226ms1 for reverse: 0.225ms2 for reverse: 0.223ms0 for of: 0.217ms1 for of: 0.213ms2 for of: 0.215ms0 for each: 0.391ms1 for each: 0.409ms2 for each: 1.020msData length: 5000000 reduce: 1.920ms1 reduce: 1.837ms2 reduce: 1.860ms0 map: 13.140ms1 map: 12.762ms2 map: 14.584ms0 for loop: 15.325ms1 for loop: 2.295ms2 for loop: 2.014ms0 for reverse: 2.163ms1 for reverse: 2.138ms2 for reverse: 2.182ms0 for of: 1.990ms1 for of: 2.009ms2 for of: 2.108ms0 for each: 2.226ms1 for each: 2.583ms2 for each: 2.238msData length: 50000000 reduce: 18.763ms1 reduce: 17.155ms2 reduce: 26.592ms0 map: 145.415ms1 map: 135.946ms2 map: 144.325ms0 for loop: 29.273ms1 for loop: 28.365ms2 for loop: 21.131ms0 for reverse: 21.301ms1 for reverse: 27.779ms2 for reverse: 29.077ms0 for of: 19.094ms1 for of: 19.338ms2 for of: 26.567ms0 for each: 22.456ms1 for each: 26.224ms2 for each: 20.769ms

• You might want scoping. For example you might want to make callback functions or have references to javascript objects. For more information, see why javascript is not blocked scoped. [edit: modern javascript now supports let variables. Back before ESv6, when you declared a var variable, it got hoisted as if it was written at the top of the function codeblock, so often you had to write bodies of for-loops as functions. This following still applies though:] If you had a function written, might as well use functional style unless it's a significant bottleneck.
• Your code does not always need to run at full machine speed. You may not even be optimizing code in the bottleneck.
• Additionally you do not provide your "testing on JSPerf" so we can critique it. For example if you already have a reduction function (or map or forEach function), then I bet the performance would be on-par. Even if not, the testing methodology may be flawed, especially given that many browsers may optimize differently or have different function-call overhead.

sidenote: this is a valid performance comparison between syntax, but an invalid performance comparison in when syntax is not the question at hand:

myArray.map(function(x){return x+1})// ...versus...for(var i=0; i<myArray.length; i++) {    myArray[i] = myArray[i]+1;}

This would be a valid performance comparison:

myArray.forEach(function(x){return x+1})// ...versus...var plusOne = function(x){return x+1};for(var i=0; i<myArray.length; i++) {    plusOne(myArray[i]);}// (may need a side-effect if the compiler is smart enough to optimize this)

(Also in reply to your edit: .forEach() and .map() provide much more clarity, and avoid the need for explicit loop int i=0; i<array.length; i++ arguments.)