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: 3 months ago

for

9K/s

for...of

3K/s

reduce

2K/s

forEach

2K/s

for...in

222/s

View exact numbers

Test name	Executions per second
✓ for	9,142 Ops/sec
for...of	2,751 Ops/sec
reduce	2,305 Ops/sec
forEach	2,134 Ops/sec
for...in	222 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;