Benchmark: for of vs for loops 1k

Script Preparation code:

const planes = new Array(1_000).fill(2);

Tests:

for-of
for (const plane of planes) { Math.sqrt(plane); }
for-index
for (let i = 0; i < planes.length; i++) { const plane = planes[i]; Math.sqrt(plane); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-of
for-index

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: an hour ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
for-of	444349.9 Ops/sec
for-index	245993.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON is focused on comparing two different looping constructs in JavaScript: the `for-of` loop and the traditional `for` loop (indexed). Both of these constructs are used to iterate over an array of 1,000 elements created in the preparation code.

### Benchmark Comparison

1. **Test Cases:**
   - **for-of Loop**
     ```javascript
     for (const plane of planes) {
         Math.sqrt(plane);
     }
     ```
   - **for Loop (Indexed)**
     ```javascript
     for (let i = 0; i < planes.length; i++) {
         const plane = planes[i];
         Math.sqrt(plane);
     }
     ```

### Options Compared
- **for-of**: This loop is designed for iterating directly over iterable objects like arrays. It provides a simpler syntax for accessing each element in the array without needing to manage an index manually.
- **for-index**: This traditional loop uses an index to access each element. It gives more control over the loop execution and is a more standard method for iterations that require fine-tuned control (such as when altering the index).

### Pros and Cons

- **for-of Loop**:
  - **Pros**:
    - Cleaner and more readable syntax, making code easier to understand.
    - Reduces the risk of off-by-one errors commonly encountered in indexed loops.
  - **Cons**:
    - Potentially less performant in certain scenarios, as results may vary based on the JavaScript engine's optimization for `for-of`.

- **for Loop (Indexed)**:
  - **Pros**:
    - More control over the iteration process, such as skipping elements or modifying the iterator variable.
    - Historically, this method has been well-optimized in many JavaScript engines, which might yield better performance in some contexts.
  - **Cons**:
    - More boilerplate code, making it less readable than the `for-of` loop.
    - Higher chances of introducing index-related bugs (like exceeding array bounds).

### Benchmark Results

The latest benchmark results indicate that the performance of the `for-index` loop significantly outperforms the `for-of` loop, with `ExecutionsPerSecond` values indicating that `for-index` was able to execute approximately 757,493 iterations per second compared to the `for-of` loop's 138,804 iterations per second. This stark difference suggests that, at least in this scenario, the indexed loop is significantly faster in performance, likely due to better optimization by the JavaScript engine for this more traditional construct.

### Additional Considerations

- **Javascript Engines**: The performance of both loops can depend on the JavaScript engine (e.g., V8 in Chrome, SpiderMonkey in Firefox). Different engines may optimize loops differently.
- **Array Size**: The choice of loop may become performance sensitive at scale. While the difference appears large for 1,000 elements, it may become more pronounced as the size increases (or less so based on other factors).
- **Code Readability vs. Performance**: The choice between which loop to use may also be influenced by the readability of the code versus the performance requirements of the application. For critical performance sections, developers may choose the indexed for loop despite its verbosity.

### Alternatives

Other looping constructs one might consider include:
- **forEach**: A method of arrays that applies a function to each element. It is generally less performant due to a function call overhead but has a very clean syntax.
- **map, filter, reduce**: These higher-order functions are perfect for functional programming patterns, and while they offer ease of use, they may also introduce additional overhead.
- **while and do-while loops**: These constructs provide flexibility to iterate based on dynamic conditions or execute at least once, but they require more careful condition management compared to `for` or `for-of`.

In conclusion, selecting a loop structure should consider both the intended use case and performance profiling, especially when working with large datasets where execution speed is critical.

Related benchmarks:

for of vs for loops 1k (version: 1)

Comparing performance of: for-of vs for-index

Created: 20 days ago by: Registered User

Jump to the latest result

for-of

for-index

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):