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 (Macintosh; Intel Mac OS X 10.15; rv:150.0) Gecko/20100101 Firefox/150.0

Browser: Firefox 150

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 7 days ago

Test name	Executions per second
for	9141.6 Ops/sec
for...of	2750.9 Ops/sec
for...in	221.9 Ops/sec
forEach	2133.8 Ops/sec
reduce	2304.9 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;