MeasureThat.net

Run results for: Performance of JavaScript .forEach, .map and .reduce vs for and for..of2

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36
Chrome 117
Mac OS X 10.15.7
Desktop
one year ago
Test name Executions per second
.forEach 75.9 Ops/sec
for..of 76.2 Ops/sec
for..of (destructuring) 27.3 Ops/sec
.map 23.1 Ops/sec
.map (destructuring) 21.6 Ops/sec
.for (init array) 6.6 Ops/sec
.reduce 64.2 Ops/sec
.reduce (destructuring) 69.2 Ops/sec
for..of (reduce) 77.3 Ops/sec
for..of (reduce) (destructuring) 77.2 Ops/sec
forEach index 6.4 Ops/sec
Script Preparation code:
AخA
 
function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}
var array = generateTestArray();
Tests:

  • .forEach

     
    array.forEach((x) => {
       x.r = x.a + x.b;
    });

  • for..of

     
    for(const x of array) {
        x.r = x.a + x.b;
    }

  • for..of (destructuring)

     
    const r = [];
    for(const {a, b} of array) {
        r.push(a + b);
    }

  • .map

     
    array.map(x => x.a + x.b)

  • .map (destructuring)

     
    array.map(({a,b}) => a + b)

  • .for (init array)

     
    const r = new Array(array.length);
    for (let i = 0; i < array.length; ++i) {
       r[i] = array[i].a + array[i].b;
    }

  • .reduce

     
    array.reduce((p, x) => p + x.a + x.b, 0);

  • .reduce (destructuring)

     
    array.reduce((p, {a,b}) => p + a + b, 0);

  • for..of (reduce)

     
    let r = 0;
    for (const x of array) {
       r += x.a + x.b;
    }

  • for..of (reduce) (destructuring)

     
    let r = 0;
    for (const {a,b} of array) {
       r += a + b;
    }

  • forEach index

     
    array.forEach((_, i) => {
       array[i].r = array[i].a + array[i].b;
    });