Benchmark: Performance of .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,
    });
  }
  return result;
}

var array = generateTestArray();
var res;

Tests:

array.forEach
array.forEach((x) => { res = x.a + x.b; }); console.log(res);
for..of
for(const x of array) { res = x.a + x.b; } console.log(res);
for..of with entries
for(const [index, x] of array.entries()) { res = x.a + x.b; } console.log(res);
for
for (let i = 0; i < array.length; ++i) { const x = array[i]; res = x.a + x.b; } console.log(res);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.forEach
for..of
for..of with entries
for

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark test case for comparing the performance of different iteration methods in arrays.

**Benchmark Test Case Overview**

The benchmark tests four ways to iterate over an array: `forEach`, `for`, `for..of`, and `for..of with entries`. The test creates a large array (1,000,000 elements) using a generator function and then iterates over it, performing the same operation on each element (`res = x.a + x.b`).

**Iteration Methods Compared**

1. **forEach**: This method calls the provided callback function once for each element in the array.
2. **for**: This traditional loop structure uses an index variable to access each element in the array.
3. **for..of**: This modern loop structure iterates over the array's elements using a foreach-like syntax, without the need for an explicit index variable.
4. **for..of with entries**: Similar to `for..of`, but also provides access to the current index and value of each iteration.

**Pros and Cons**

* **forEach**:
	+ Pros: concise and easy to read, can be used as a callback function.
	+ Cons: not suitable for large arrays or complex operations, creates an extra closure over the callback.
* **for**:
	+ Pros: traditional loop structure, no memory allocation overhead.
	+ Cons: verbose and error-prone, requires manual index management.
* **for..of**:
	+ Pros: modern and concise syntax, eliminates the need for an explicit index variable.
	+ Cons: not supported in older browsers or environments (e.g., IE), may have performance implications due to the creation of extra closures.
* **for..of with entries**:
	+ Pros: similar benefits to `for..of`, adds access to the current index and value, but still has limited support.
	+ Cons: can be confusing for developers unfamiliar with this syntax.

**Library Usage**

None explicitly mentioned in the benchmark code. However, some libraries might affect performance or interpretation of the results.

**Special JS Features/Syntax**

The test case uses modern JavaScript features such as:

* Generators (in `generateTestArray`)
* Async functions (`for..of` and `forEach` implementations)
* Arrow functions (`forEach` and `map` equivalents)

These features are widely supported in modern browsers, but their usage might impact performance or compatibility with older environments.

**Alternatives**

Other alternatives to the tested iteration methods include:

* `map()` and `reduce()`: These methods can be used to transform or aggregate array elements, but may not directly compare to the traditional iteration methods.
* Other loop structures (e.g., `while` loops): While not as concise as `for..of`, these alternatives might provide more control over iteration logic.

Keep in mind that performance comparisons between different iteration methods are highly dependent on specific use cases and environments.

Related benchmarks:

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

Comparing performance of: array.forEach vs for..of vs for..of with entries vs for

Created: 2 years ago by: Guest

Jump to the latest result

array.forEach

for..of

for..of with entries

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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