Benchmark: for vs foreach vs for..of with sum

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;
}

const array = generateTestArray();

Tests:

for
for (let i = 0; i < array.length; i++) { array[i].r = array[i].a + array[i].b; }
foreach
sum = x => x.r = x.a + x.b; array.forEach(sum);
for..of with reassign
for (let x of array) { x.r = x.a + x.b; }
for..of with no reassign
const result = []; for (let x of array) { result.push(x.a + x.b); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of with reassign
for..of with no reassign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Linux

View result in a separate tab

Test name	Executions per second
for	165.1 Ops/sec
foreach	60.7 Ops/sec
for..of with reassign	90.2 Ops/sec
for..of with no reassign	41.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark in question evaluates the performance of different looping constructs in JavaScript: the traditional `for` loop, the `forEach` method, and the `for..of` loop. The goal is to compare how quickly these constructs can sum the values of properties from an array of objects.

### Options Compared

1. **Traditional `for` Loop**
   - **Benchmark Definition:** 
     ```javascript
     for (let i = 0; i < array.length; i++) {
       array[i].r = array[i].a + array[i].b;
     }
     ```
   - **Performance Result:** Highest executions per second.
   - **Pros:**
     - Highly optimized by JavaScript engines.
     - Offers direct control over the loop index, making it very efficient for certain use cases.
   - **Cons:**
     - More verbose syntax.
     - Requires management of the loop counter and array length, which may lead to errors in complex scenarios.

2. **`forEach` Method**
   - **Benchmark Definition:** 
     ```javascript
     sum = x => x.r = x.a + x.b;
     array.forEach(sum);
     ```
   - **Performance Result:** Mid-range executions per second.
   - **Pros:**
     - Simplifies the code for iteration, as it abstracts the loop control.
     - Cleaner and more readable for straightforward operations.
   - **Cons:**
     - Performance is generally slower than the traditional `for` loop due to additional overhead (function calls).
     - Not easily suitable for scenarios where you might need to break out of the loop early.

3. **`for..of` Loop with Reassignment**
   - **Benchmark Definition:** 
     ```javascript
     for (let x of array) {
       x.r = x.a + x.b;
     }
     ```
   - **Performance Result:** Slightly slower than the `for` loop.
   - **Pros:**
     - More concise and easier to read than a traditional `for` loop.
     - Provides straightforward access to each element of the iterable.
   - **Cons:**
     - May not perform as well as the traditional `for` loop in terms of speed.
   
4. **`for..of` Loop with No Reassignment**
   - **Benchmark Definition:** 
     ```javascript
     const result = [];
     for (let x of array) {
       result.push(x.a + x.b);
     }
     ```
   - **Performance Result:** Lowest executions per second.
   - **Pros:**
     - Same readability benefits as the `for..of` loop.
     - Useful for generating new data structures (like `result`).
   - **Cons:**
     - Performance is significantly lower because it involves an additional operation (pushing to an array).
     - Increased memory usage due to creating an additional array for results.

### Considerations

1. **Readability vs. Performance:** While the `forEach` and `for..of` loops offer more readable syntax, they come at a cost in performance when compared to the traditional `for` loop. This can be crucial in performance-critical applications.

2. **Use Cases:** Depending on the context—whether you require readability or whether you are working with performance-sensitive code—might dictate your choice of loop.

3. **Modern JavaScript:** The `for..of` loop is an ES6 feature and is generally well-supported in modern environments, while the `forEach` method is also commonly used in functional programming patterns.

### Alternatives

- **While Loop:** A traditional `while` loop could also be utilized for similar functionality, but it would require explicit management of the loop variable, which can lead to complexity or errors if not handled properly.
  
- **Map Method:** If transformation of each element is required without causing side effects, the `.map()` function may be a viable alternative, effectively providing a new array based on a transformation of each element.

- **Reduce Method:** The `.reduce()` method can also sum the values, though it introduces a more functional style and could be less intuitive for operations where side effects (mutating the original array) are required.

In summary, this benchmark effectively illustrates the performance differences between various iteration approaches in JavaScript, highlighting trade-offs in terms of performance, readability, and suitability for specific tasks.

Related benchmarks:

for vs foreach vs for..of with sum (version: 1)

Compare loop performance

Comparing performance of: for vs foreach vs for..of with reassign vs for..of with no reassign

Created: one month ago by: Guest

Jump to the latest result

for

foreach

for..of with reassign

for..of with no reassign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):