Benchmark: for of vs for loops 10k

Script Preparation code:

const planes = new Array(10_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: 5 months ago)

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
for-of	101191.8 Ops/sec
for-index	72029.3 Ops/sec

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

LLMs can make mistakes. Check important info.

In the provided benchmark, we are comparing two different types of loops in JavaScript: the `for-of` loop and the traditional `for` loop with an index. The benchmark measures how quickly each of these loops can perform the operation of calculating the square root of numbers stored in an array of 10,000 elements, all initialized to the value 2.

### Options Compared

1. **For-of Loop**:
   - **Code**: 
     ```javascript
     for (const plane of planes) {
         Math.sqrt(plane);
     }
     ```
   - **Test Name**: "for-of"
   - **Description**: The `for-of` loop is a modern JavaScript feature that allows iteration over iterable objects like arrays, strings, and other collections. It provides a simple syntax and ensures that each element is assigned directly to the loop variable (`plane` in this case).

2. **For-Index Loop**:
   - **Code**: 
     ```javascript
     for (let i = 0; i < planes.length; i++) {
         const plane = planes[i];
         Math.sqrt(plane);
     }
     ```
   - **Test Name**: "for-index"
   - **Description**: The traditional `for` loop uses an index (`i`) to iterate over the array. It accesses each element by its position, which gives the programmer more control over the index but requires explicitly managing the index variable and accessing the array.

### Performance Results

The benchmark results show the performance of each loop type in terms of executions per second:

- **For-index**: 77,545.48 executions per second
- **For-of**: 14,032.85 executions per second
  
The `for-index` loop significantly outperforms the `for-of` loop in this case.

### Pros and Cons

#### For-of Loop
- **Pros**:
  - Cleaner and more readable syntax, which is easier to understand, especially for those new to JavaScript.
  - Automatically handles the iteration without needing to manage the index manually.
  - Less risk of errors related to off-by-one mistakes in index handling.

- **Cons**:
  - Can be less performant as shown in this benchmark, particularly in large datasets or performance-critical applications.
  - Limited to iterables; cannot be used to iterate over objects directly without additional methods.

#### For-Index Loop
- **Pros**:
  - Generally offers better performance, particularly with larger arrays, as indicated by the benchmark results.
  - More control over the loop variable and the ability to manipulate the counter (e.g., skipping elements).

- **Cons**:
  - More verbose syntax and potential for mistakes if the bounds of the loop are improperly set (i.e., off-by-one errors).
  - Requires manual handling of array access, which could lead to less readable code in complex scenarios.

### Other Considerations

- **Readability vs. Performance**: When choosing between loop types, it’s important to consider the context. If performance is critical (as in this benchmark), the `for-index` loop may be the better choice. For simpler scripts or when readability is a priority, the `for-of` loop might be preferred.

- **Alternatives**: Other looping constructs like `forEach`, `map`, or built-in functional methods (e.g., `reduce`) can also be used for similar operations. While these methods can simplify code for specific use cases, they may come with their own performance trade-offs.

In summary, this benchmark illustrates a fundamental trade-off between readability and performance when choosing loop constructs in JavaScript. Each loop type has its place depending on the specific requirements and context of the code being written.

Related benchmarks:

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

Comparing performance of: for-of vs for-index

Created: one year ago by: Registered User

Jump to the latest result

for-of

for-index

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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