Benchmark: for of vs for loops

Script Preparation code:

const planes = new Array(1_000_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); }

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Firefox 9 runs

for-index

765/s

for-of

143/s

Fastest: for-index (5.3x faster)

View exact numbers

✓ for-index: 765 ops/sec
• for-of: 143 ops/sec

Chrome 9 runs

for-index

302/s

for-of

173/s

Fastest: for-index (1.7x faster)

View exact numbers

✓ for-index: 302 ops/sec
• for-of: 173 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 month ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

for-of

505/s

for-index

299/s

View exact numbers

Test name	Executions per second
✓ for-of	505 Ops/sec
for-index	299 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark is designed to compare the performance of two different loops in JavaScript: the `for-of` loop and the traditional `for` loop (also known as the indexed `for` loop).

### Benchmark Overview

**Name:** for of vs for loops

**Script Preparation Code:** 
```javascript
const planes = new Array(1_000_000).fill(2);
```
This prepares an array named `planes` with 1,000,000 elements, all of which are set to `2`. This setup allows both types of loops to iterate over a large data set, providing a meaningful comparison of their performance.

### Individual Test Cases

1. **for-of Loop**
   - **Benchmark Definition:** 
     ```javascript
     for (const plane of planes) {
         Math.sqrt(plane);
     }
     ```
   - **Test Name:** for-of

2. **Indexed for Loop**
   - **Benchmark Definition:**
     ```javascript
     for (let i = 0; i < planes.length; i++) {
         const plane = planes[i];
         Math.sqrt(plane);
     }
     ```
   - **Test Name:** for-index

### Performance Comparison

The key metrics to analyze from the benchmark results are the "Executions Per Second" for both loops.

- **for-index**
  - **Executions Per Second:** 302.27
  - This indexed loop is executed approximately 302 times in one second.

- **for-of**
  - **Executions Per Second:** 171.22
  - This `for-of` loop is executed approximately 171 times in one second.

### Pros and Cons

#### for-of Loop
- **Pros:**
  - Cleaner and more readable syntax, especially with regard to the iteration over the elements, making it easier for developers to understand the code intent.
  - Automatically manages the iteration for iterable objects like arrays without needing an index.

- **Cons:**
  - Generally slower than traditional indexed loops in performance benchmarks, as seen in this case.
  - Slightly less control over loop iteration compared to indexed loops (e.g., you can't easily skip indices).

#### Indexed for Loop
- **Pros:**
  - Tends to be faster and more efficient in terms of performance for accessing elements in large arrays, as seen by its higher execution rate.
  - Offers more control, allowing developers to manipulate the index freely (e.g., skipping elements, iterating in reverse).

- **Cons:**
  - Can be less readable, particularly in complex scenarios, as it can introduce a level of verbosity in the code.
  - Requires manual management of the index variable.

### Other Alternatives

1. **forEach Method**
   - Based on functional programming, `Array.prototype.forEach` can be an alternative to both loops. It's readable but generally slower than the traditional `for` loop.
   - Example:
     ```javascript
     planes.forEach(plane => Math.sqrt(plane));
     ```

2. **map Method**
   - If transformation of the array is needed, `Array.prototype.map` can be used. It creates a new array based on the return value from a provided function.
   - Example:
     ```javascript
     const results = planes.map(plane => Math.sqrt(plane));
     ```
   - This is less about performance comparison but is a useful way of processing arrays in functional programming.

### Considerations 
When choosing between these approaches, developers should consider both performance needs and code readability. The indexed loop may be preferred in performance-critical applications, while the `for-of` loop offers cleaner syntax for scenarios where performance is less of a concern.

In more complex applications, understanding the context in which these loops are used (size of the dataset, readability, scope of variables, etc.) is vital to make the best choice tailored to specific needs.

for of vs for loops (version: 1)

Comparing performance of: `for-of vs for-index`

Created: one year ago by: Registered User

Go to the latest result

for-of

for-index

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Firefox 9 runs

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for of vs for loops (version: 1)

Comparing performance of: for-of vs for-index

Created: one year ago by: Registered User

Go to the latest result

for-of

for-index

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Firefox 9 runs

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `for-of vs for-index`