Run results for: JavaScript Array Performance — for vs for...of vs for...in vs forEach vs reduce

Compare the performance of five ways to traverse an array and accumulate a computed numeric result. All test cases execute the same work on the same input data. Note that for...in enumerates property keys rather than using the array iterator, so its semantics differ from for, for...of, forEach, and reduce.

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser: Chrome 146

Operating system: Linux

Device Platform: Desktop

Date tested: 4 months ago

for...of

6K/s

forEach

5K/s

for

4K/s

reduce

2K/s

for...in

405/s

View exact numbers

Test name	Executions per second
✓ for...of	6,188 Ops/sec
forEach	4,610 Ops/sec
for	3,885 Ops/sec
reduce	1,987 Ops/sec
for...in	405 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const arraySize = 100_000;
const values = Array.from({ length: arraySize }, (_, index) => index);

function computeValue(value) {
  return (value * 3 + 7) % 97;
}

let blackhole = 0;

Tests:

for
let sum = 0; for (let index = 0; index < values.length; index += 1) { sum += computeValue(values[index]); } blackhole = sum; return blackhole;
for...of
let sum = 0; for (const value of values) { sum += computeValue(value); } blackhole = sum; return blackhole;
for...in
let sum = 0; for (const index in values) { sum += computeValue(values[index]); } blackhole = sum; return blackhole;
forEach
let sum = 0; values.forEach((value) => { sum += computeValue(value); }); blackhole = sum; return blackhole;
reduce
const sum = values.reduce((accumulator, value) => { return accumulator + computeValue(value); }, 0); blackhole = sum; return blackhole;