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

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push(i);
  }
  return result;
}
window.array = generateTestArray();

Tests:

map comparison: for..of
const r = []; for(const x of array) { r.push(x); }
map comparison: .map
array.map(x => x)
reduce comparision: for..of
let r = 0; for (const x of array) { r += x; }
reduce comparision: .reduce
array.reduce((p, x) => p + x, 0);
raw iteration: for..of
for(const x of array) {}
raw iteration: forEach
array.forEach(x => {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map comparison: for..of
map comparison: .map
reduce comparision: for..of
reduce comparision: .reduce
raw iteration: for..of
raw iteration: forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
map comparison: for..of	39.5 Ops/sec
map comparison: .map	66.6 Ops/sec
reduce comparision: for..of	75.6 Ops/sec
reduce comparision: .reduce	64.3 Ops/sec
raw iteration: for..of	80.4 Ops/sec
raw iteration: forEach	84.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares the performance of three different approaches to iterate over an array:

1.  `for` loop
2.  `forEach` method
3.  `map` and `reduce` methods

Each approach is compared with its equivalent version using `for..of`, which is a newer syntax introduced in ECMAScript 2015.

**Options Compared**

The benchmark compares the following options:

*   `for` loop (classic iteration)
*   `forEach` method (iterating over an array using the `forEach` method)
*   `map` and `reduce` methods (transforming and reducing an array using these methods)

**Pros and Cons of Each Approach**

1.  **`for` Loop**
    *   Pros:
        *   Wide browser support
        *   Easy to understand and implement
    *   Cons:
        *   Can be slower than other approaches due to the overhead of loop variable management

2.  **`forEach` Method**
    *   Pros:
        *   Easy to use and read
        *   Fast and efficient in modern browsers
    *   Cons:
        *   Less flexible than `for` loops or methods like `map` and `reduce`

3.  **`Map` and `Reduce` Methods**
    *   Pros:
        *   Fast and efficient due to their built-in caching and parallelization
        *   Flexible and powerful for transforming and reducing arrays
    *   Cons:
        *   Less intuitive than other approaches, especially for beginners
        *   May have performance overhead due to the creation of intermediate results

**Library Used**

The benchmark uses a custom-generated array using JavaScript's `for` loop to create an array of 1 million elements. This library is not external; instead, it's generated within the benchmark script itself.

**Special JS Feature or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax, such as async/await, Promises, or Web Workers. However, modern browsers' performance optimizations may influence the results of this benchmark.

**Other Alternatives**

In addition to the three approaches compared in the benchmark ( `for`, `forEach`, and `map`/`reduce` methods), other alternatives for iterating over arrays include:

*   `for..of` loop
*   `Array.prototype.forEach.call()` method (in older browsers that don't support `for...of`)
*   Custom-built loops using `index` variables or bitwise operators

Related benchmarks:

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

Comparing performance of: map comparison: for..of vs map comparison: .map vs reduce comparision: for..of vs reduce comparision: .reduce vs raw iteration: for..of vs raw iteration: forEach

Created: one year ago by: Guest

Jump to the latest result

map comparison: for..of

map comparison: .map

reduce comparision: for..of

reduce comparision: .reduce

raw iteration: for..of

raw iteration: forEach

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