Benchmark: for of vs for loops 2

Script Preparation code:

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

Tests:

for-of
for (const plane of planes) { const a = Math.sqrt(plane); }
for-index
for (let i = 0; i < planes.length; i++) { const plane = planes[i]; const a = 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
for-of	140.1 Ops/sec
for-index	881.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you provided compares two different looping constructs in JavaScript: the `for-of` loop and the traditional indexed `for` loop.

### Options Compared
1. **`for-of` Loop**:
   - **Benchmark Definition**: 
     ```javascript
     for (const plane of planes) {
         const a = Math.sqrt(plane);
     }
     ```
   - **Usage**: The `for-of` loop iterates over iterable objects (like arrays, strings, etc.) and provides a clean, declarative way to access each element directly. In this case, it iterates over the `planes` array.

2. **Indexed `for` Loop**:
   - **Benchmark Definition**:
     ```javascript
     for (let i = 0; i < planes.length; i++) {
         const plane = planes[i];
         const a = Math.sqrt(plane);
     }
     ```
   - **Usage**: The indexed `for` loop uses a counter variable to access each element by its index, which allows for greater control and is a more traditional loop construct.

### Pros and Cons

#### `for-of` Loop:
- **Pros**:
  - Simplicity: The syntax is cleaner and more elegant, making the code easier to read.
  - Less error-prone: No need to manage an index variable, reducing the risk of off-by-one errors.
  
- **Cons**:
  - Performance: In some cases, especially in large arrays, the `for-of` loop can be slower than the indexed `for` loop due to additional abstractions and the way the iteration is handled internally.

#### Indexed `for` Loop:
- **Pros**:
  - Performance: Generally faster than `for-of`, particularly with larger datasets, as it directly accesses elements via index, which can result in fewer overhead operations.
  - Flexibility: Allows for manipulation of the index variable, such as skipping elements or iterating in reverse.

- **Cons**:
  - Verbosity: More code needed, as it requires managing the index variable and array length.
  - Potential for errors: Increased risk of off-by-one errors and similar issues related to index management.

### Other Considerations
- **Context**: The performance differences can depend on factors like the JavaScript engine's optimizations, the size of the array, and the nature of the computation being performed (in this case, computing the square root).
- **Browser and Platform**: Benchmark results can vary depending on the browser and operating system being used, as shown in the results from Firefox on Windows.

### Alternatives
- **`forEach` Method**: Another alternative is using the `Array.prototype.forEach()` method, which gives a more functional programming approach to looping over items in the array. However, it is generally slower due to the overhead of function calls.
  
- **`map` Method**: If the intention is to transform each element and create a new array from the results, using `Array.prototype.map()` might be more appropriate, though it also adds overhead.

- **Manual Iteration with `while` Loop**: A traditional `while` loop can offer similar performance benefits to an indexed `for` loop, but it requires more boilerplate code and careful manual management of the loop variable.

In conclusion, the benchmark highlights the performance differences between two fundamental looping constructs in JavaScript, allowing developers to make informed decisions based on the use case and the balance between code readability and performance.

Related benchmarks:

for of vs for loops 2 (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):