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();

AخA
 
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); }
const r = [];
for(const x of array) {
r.push(x);
}
map comparison: .map
array.map(x => x)
array.map(x => x)
reduce comparision: for..of
let r = 0; for (const x of array) { r += x; }
let r = 0;
for (const x of array) {
r += x;
}
reduce comparision: .reduce
array.reduce((p, x) => p + x, 0);
array.reduce((p, x) => p + x, 0);
raw iteration: for..of
for(const x of array) {}
for(const x of array) {}
raw iteration: forEach
array.forEach(x => {})
array.forEach(x => {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: one month ago)

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map comparison: for..of	87.6 Ops/sec
map comparison: .map	118.1 Ops/sec
reduce comparision: for..of	135.9 Ops/sec
reduce comparision: .reduce	109.0 Ops/sec
raw iteration: for..of	158.1 Ops/sec
raw iteration: forEach	233.1 Ops/sec

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

Overview of the Benchmark

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

for loop
forEach method
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

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

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**

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