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

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; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.forEach
for..of
for..of (destructuring)
.map
.map (destructuring)
.for (init array)
.reduce
.reduce (destructuring)
for..of (reduce)
for..of (reduce) (destructuring)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	20.0 Ops/sec
for..of	84.5 Ops/sec
for..of (destructuring)	63.4 Ops/sec
.map	43.9 Ops/sec
.map (destructuring)	46.1 Ops/sec
.for (init array)	82.1 Ops/sec
.reduce	57.0 Ops/sec
.reduce (destructuring)	56.3 Ops/sec
for..of (reduce)	83.3 Ops/sec
for..of (reduce) (destructuring)	85.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case created on MeasureThat.net. The benchmark compares the performance of different iteration methods in JavaScript: `forEach`, `for` loops, `map`, and `reduce`. Each test case uses a similar approach to generate an array of 1 million objects and performs a specific operation on each element.

**Iterators Compared**

The benchmark tests four types of iterators:

1. `.forEach`
2. `for` loops
3. `for..of` loops with destructuring (redundant in this case, as it's just an alias for `for`)
4. `map`

Each iterator is tested twice: once without any additional processing and again with a simple operation added to demonstrate the overhead of the iteration.

**Performance Results**

The benchmark results show the average number of executions per second (EPS) for each test case across various browsers. The top-performing iterations are:

1. `.forEach` (24-25 EPS)
2. `for` loops (36-37 EPS)
3. `map` (23-24 EPS)

**Comparison and Analysis**

The results indicate that:

* `.forEach` is the fastest iteration, likely due to its built-in performance characteristics.
* `for` loops are significantly faster than the other iterations, possibly because they allow for direct access to variables and don't incur the overhead of function calls or array manipulation.
* `map` is slower than expected, as it involves creating a new array and iterating over it, which can be costly in terms of performance.

**Conclusion**

In summary, the benchmark highlights the relative performance characteristics of different JavaScript iteration methods. `.forEach` is the fastest, while `for` loops are significantly faster due to their direct access to variables. Understanding these trade-offs can help developers optimize their code for better performance in specific scenarios.

Related benchmarks:

Performance of JavaScript .forEach, .map and .reduce vs for and for..of (version: 0)

Comparing performance of: .forEach vs for..of vs for..of (destructuring) vs .map vs .map (destructuring) vs .for (init array) vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)

Created: 4 years ago by: Registered User

Jump to the latest result

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)

.for (init array)

.reduce

.reduce (destructuring)

for..of (reduce)

for..of (reduce) (destructuring)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):