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: one month ago

Test name	Executions per second
for	3884.6 Ops/sec
for...of	6187.8 Ops/sec
for...in	404.6 Ops/sec
forEach	4610.3 Ops/sec
reduce	1987.0 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;