Benchmark: Performance of JavaScript .forEach, for in

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(); const newMap = new Map(); array.forEach((x) => { newMap.set(x.a, x.b); }); const foo = [...newMap.entries()];
for..of
const array = generateTestArray(); const newMap = new Map(); for(const x of array) { newMap.set(x.a, x.b); } const foo = [...newMap.entries()];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.forEach
for..of

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.

Let's break down the provided JSON and explain what's being tested, compared, and analyzed.

**Benchmark Definition**

The benchmark is testing the performance of two JavaScript iteration methods: `forEach` and `for...of`. The test creates an array of 1 million objects and measures how long it takes to iterate over this array using each method to add elements to a new Map.

**Options Compared**

Two options are compared:

* `.forEach`: A traditional loop that iterates over the array using an index, and for each element, calls a callback function with the current element.
* `for...of`: A newer loop that iterates directly over the elements of the array, without an index. This allows for more modern and expressive code.

**Pros and Cons**

### `.forEach`

Pros:

* Wide browser support: `.forEach` is supported by all major browsers, including older versions.
* Simple syntax: The callback function signature (`(x) => { ... }`) is easy to read and write.

Cons:

* Less efficient than `for...of`: `.forEach` creates an array of the results, which can be slower for large datasets.

### `for...of`

Pros:

* More expressive code: The syntax is more modern and concise, making it easier to read.
* Efficient iteration: `for...of` avoids creating an intermediate result array, making it faster than `.forEach`.

Cons:

* Older browser support: Some older browsers might not support `for...of`.
* Less widely used: Although gaining popularity, `for...of` is still less familiar to many developers.

**Library**

There is no explicit library mentioned in the benchmark definition. However, both methods use built-in JavaScript features: `Map` for storing elements and array iteration.

**Special JS Feature or Syntax**

The test case uses modern JavaScript syntax, specifically the `const` keyword with the `let` declaration. Additionally, it utilizes arrow functions (`(x) => { ... }`) which are a shorthand way to define small, single-purpose functions.

Other Considerations

* The test creates an array of 1 million objects, which is a significant dataset for benchmarking.
* The test measures the time taken to iterate over this array using both `.forEach` and `for...of`.
* The results show the execution speed per second for each browser version on a desktop device.

**Alternatives**

Other alternatives for iterating over arrays in JavaScript include:

* Traditional `for` loops with an index variable (`let i = 0; while (i < array.length) { ... }`)
* `Array.prototype.reduce()`: A method that applies a reduction function to all elements of the array.
* `Array.prototype.forEach()` (not used here, but another option for iterating over arrays)

Keep in mind that each iteration method has its own strengths and weaknesses, and the choice of which one to use depends on the specific requirements of your project.

Related benchmarks:

Performance of JavaScript .forEach, for in (version: 0)

Comparing performance of: .forEach vs for..of

Created: 3 years ago by: Guest

Jump to the latest result

.forEach

for..of

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