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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

.for (init array)

68K/s

for..of

65K/s

.forEach

65K/s

.reduce (destructuring)

64K/s

for..of (reduce) (destructuring)

62K/s

.map (destructuring)

61K/s

.map

61K/s

for..of (destructuring)

55K/s

.reduce

51K/s

for..of (reduce)

50K/s

View exact numbers

Test name	Executions per second
✓ .for (init array)	68,389 Ops/sec
for..of	65,482 Ops/sec
.forEach	65,347 Ops/sec
.reduce (destructuring)	63,508 Ops/sec
for..of (reduce) (destructuring)	62,167 Ops/sec
.map (destructuring)	61,423 Ops/sec
.map	60,613 Ops/sec
for..of (destructuring)	54,539 Ops/sec
.reduce	50,772 Ops/sec
for..of (reduce)	49,909 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Go 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):

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: 2 years ago by: Guest

Go 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):

Related benchmarks

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)`