Benchmark: Performance of JavaScript .forEach, .map and .reduce vs for and for..ofdasdadadasd ca2qdd

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(); 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; }
.map
const array = generateTestArray(); array.map(x => x.a + x.b)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.forEach
for..of
.map

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**
The benchmark is designed to compare the performance of three JavaScript iteration methods:

1. `.forEach`
2. `for..of`
3. `.map`

These methods are used to iterate over an array and perform some operation on each element.

**Script Preparation Code**
The script preparation code generates a large test array with 1,000,000 elements, where each element is an object with three properties: `a`, `b`, and `r`. The purpose of this array is to serve as the input for the iteration methods being tested.

**Html Preparation Code**
There is no HTML preparation code provided, which means that only JavaScript execution time is measured.

**Individual Test Cases**
Each test case represents a single iteration method:

1. `.forEach`: Uses the `.forEach` method to iterate over the array and update each element's `r` property by adding its `a` and `b` properties.
2. `for..of`: Uses the `for..of` loop syntax to iterate over the array and update each element's `r` property by adding its `a` and `b` properties.
3. `.map`: Uses the `.map` method to create a new array with updated elements, where each element is an object with three properties: `a`, `b`, and `r`.

**Library Used**
None of the test cases use any external libraries.

**Special JS Feature/Syntax**
The benchmark uses modern JavaScript features:

* Arrow functions (`=>`) are used in `.forEach` and `.map`.
* The `for..of` loop syntax is used.
* Object literals (`{ ... }`) are used to create objects with multiple properties.

**Comparison Options**

| Method | Description |
| --- | --- |
| `.forEach` | Iterates over the array using a callback function. Each element's `r` property is updated individually. |
| `for..of` | Iterates over the array using a loop that yields each element. Each element's `r` property is updated individually. |
| `.map` | Creates a new array with updated elements, where each element has three properties: `a`, `b`, and `r`. |

**Pros and Cons**

* `.forEach`: Easy to read and maintain, but can be slower than other methods due to the callback function overhead.
* `for..of`: More efficient than `.forEach` and `.map`, but its syntax is less readable. Can be a good choice for performance-critical code.
* `.map`: Creates a new array with updated elements, which can lead to more memory usage compared to other methods.

**Other Considerations**

* The benchmark generates a very large test array, which may not accurately represent typical use cases.
* The execution time measurements are sensitive to the JavaScript engine's performance and optimization techniques.

**Alternatives**
If you want to explore alternative iteration methods or compare their performance, you can consider:

* Using `Array.prototype.forEach.call()` instead of `.forEach`
* Using `for` loops with traditional indexing (`i`) instead of `for..of`
* Using `reduce()` or other array methods like `filter()` and `every()`

Note that these alternatives may not be as efficient as the tested methods, but can provide alternative perspectives on iteration in JavaScript.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	11.9 Ops/sec
for..of	15.1 Ops/sec
.map	9.0 Ops/sec

Related benchmarks:

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

Comparing performance of: .forEach vs for..of vs .map

Created: one year ago by: Guest

Jump to the latest result

.forEach

for..of

.map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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