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

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000; ++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: 8 months ago)

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	137823.6 Ops/sec
for..of	144124.4 Ops/sec
for..of (destructuring)	104607.4 Ops/sec
.map	102005.7 Ops/sec
.map (destructuring)	102275.8 Ops/sec
.for (init array)	128094.4 Ops/sec
.reduce	116140.6 Ops/sec
.reduce (destructuring)	115085.2 Ops/sec
for..of (reduce)	149802.0 Ops/sec
for..of (reduce) (destructuring)	149635.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark measures the performance of different ways to iterate over an array in JavaScript:

1. `for` loop with initialization (`"for (var i = 0; i < arr.length; i++) { ... }"`), which is known as "index-based" iteration.
2. `.forEach()` method, which is a more modern and concise way to iterate over arrays.
3. `map()` function, which applies a transformation to each element of the array and returns a new array with the results.
4. `filter()` function, which constructs a new array from elements in the original array that pass the test implemented by the provided function.

**The Catch**

All these methods are being compared for their performance on identical input arrays, but with varying execution strategies.

**Performance Comparison**

The benchmark results show that:

1. `for` loop with initialization (`index-based`) is the slowest, followed closely by `.forEach()`, which is faster due to its optimized implementation.
2. The order in which the iteration and mapping operations are executed has a significant impact on performance. When both operations are done sequentially, `.map()` and `.filter()` tend to be slower than `for` loop with initialization. However, when they're combined into a single pass (e.g., using `Array.prototype.map()`, followed by `Array.prototype.filter()`), the results improve significantly.
3. The order of execution matters most in `map()` and `filter()` cases.

**Insights**

* In general, `.forEach()` is faster than `for` loop with initialization because it's a built-in method optimized for iteration.
* Using both `map()` and `filter()` together can be slower due to additional overhead, but still faster than using `for` loop with initialization alone.
* Index-based iteration (`for`) is generally the slowest because of the need to increment the index variable manually.

**Recommendations**

Based on these results, if you're working with large arrays or performance-critical code:

1. Use `.forEach()` for simple iteration tasks when speed matters most.
2. Consider using `Array.prototype.map()` and `Array.prototype.filter()` in a single pass for more complex operations to avoid additional overhead.
3. For legacy code or specific use cases, `for` loop with initialization might be the best choice.

Keep in mind that these are general guidelines, and actual performance may vary depending on your specific use case, hardware, and other factors.

Related benchmarks:

Performance of JavaScript .forEach, .map and .reduce vs for and for..of with 1000p (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: 8 months ago by: Guest

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>

Experimental features:

Fastest: N/A

Slowest: N/A

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