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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser: Chrome 121

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
.forEach	29.7 Ops/sec
for..of	50.4 Ops/sec
for..of (destructuring)	37.8 Ops/sec
.map	29.5 Ops/sec
.map (destructuring)	30.3 Ops/sec
.for (init array)	65.5 Ops/sec
.reduce	50.0 Ops/sec
.reduce (destructuring)	49.5 Ops/sec
for..of (reduce)	52.0 Ops/sec
for..of (reduce) (destructuring)	33.2 Ops/sec

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

Tests:

.forEach
const array = generateTestArray(); array.forEach((x) => { x.r = x.a + x.b; });
for..of
const array = generateTestArray(); for(const x of array) { x.r = x.a + x.b; }
for..of (destructuring)
const array = generateTestArray(); const r = []; for(const {a, b} of array) { r.push(a + b); }
.map
const array = generateTestArray(); array.map(x => x.a + x.b)
.map (destructuring)
const array = generateTestArray(); array.map(({a,b}) => a + b)
.for (init array)
const array = generateTestArray(); const r = new Array(array.length); for (let i = 0; i < array.length; ++i) { r[i] = array[i].a + array[i].b; }
.reduce
const array = generateTestArray(); array.reduce((p, x) => p + x.a + x.b, 0);
.reduce (destructuring)
const array = generateTestArray(); array.reduce((p, {a,b}) => p + a + b, 0);
for..of (reduce)
const array = generateTestArray(); let r = 0; for (const x of array) { r += x.a + x.b; }
for..of (reduce) (destructuring)
const array = generateTestArray(); let r = 0; for (const {a,b} of array) { r += a + b; }

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

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)

.for (init array)

.reduce

.reduce (destructuring)

for..of (reduce)

for..of (reduce) (destructuring)