Benchmark: for of vs for loops 3

Script Preparation code:

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

Tests:

for-of
for (const plane of planes) { const a = plane + plane; }
for-index
for (let i = 0; i < planes.length; i++) { const plane = planes[i]; const a = plane + 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	204.5 Ops/sec
for-index	1104.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares two different approaches for iterating over an array in JavaScript: the `for...of` loop and the traditional `for` loop with an index. The benchmark specifically measures the performance of each approach when performing a simple operation—doubling the value of each element in an array filled with the number 2.

### Options Compared

1. **For-Of Loop:**
   ```javascript
   for (const plane of planes) {
       const a = plane + plane;
   }
   ```
   - **Test Name:** for-of
   - The `for...of` statement creates a loop iterating over iterable objects such as arrays. In this case, it simplifies the syntax needed for accessing each element of the `planes` array.
   - **Pros:**
     - Cleaner and more readable syntax, especially for beginners.
     - Automatically handles array elements without requiring explicit indexing.
   - **Cons:**
     - Generally slower due to its abstraction—performs a bit more work behind the scenes compared to a traditional `for` loop.
     - May not be the best choice for performance-critical sections of code.

2. **For-Index Loop:**
   ```javascript
   for (let i = 0; i < planes.length; i++) {
       const plane = planes[i];
       const a = plane + plane;
   }
   ```
   - **Test Name:** for-index
   - In this traditional approach, a counter variable (`i`) is used to index the elements of the `planes` array explicitly.
   - **Pros:**
     - Tends to perform better in terms of execution speed, as it has less overhead.
     - More control over index manipulation, allowing for more complex looping patterns if needed.
   - **Cons:**
     - More verbose and can be error-prone (e.g., off-by-one errors).
     - Slightly harder to read, particularly for those less familiar with JavaScript syntax.

### Performance Results

From the benchmark results presented:

- For the `for-index` approach, the test registered an impressive performance of approximately **1104 executions per second**.
- In contrast, the `for-of` loop executed around **204 executions per second**, indicating a significant difference in performance between the two methods.

### Other Considerations

When deciding which loop to use, developers should consider the following:

1. **Readability vs. Performance:** In many situations, code readability is preferable. However, if performance is critical (e.g., processing large datasets), the traditional `for` loop may be more suitable.

2. **Code Maintainability:** New developers may struggle with managing indices properly; thus `for...of` can be beneficial for maintaining clarity.

3. **Use Cases:** If you need to manipulate the array (e.g., skip indices or access elements in a non-linear way), a traditional loop provides more flexibility.

### Alternatives

Other alternatives for iterating through arrays in JavaScript include:

- **`forEach` method:**
  ```javascript
  planes.forEach(plane => {
      const a = plane + plane;
  });
  ```
  - Helps avoid manual iteration and is quite readable, but lacks the performance efficiency of traditional loops.

- **`map` method:**
  ```javascript
  const results = planes.map(plane => plane + plane);
  ```
  - Useful for transforming arrays while iterating, offering an expressive way to handle data but involves creating a new array.

- **`while` loop:** Similar to the traditional `for` loop, but it can lead to less readable code if not managed correctly.

Selecting the right iteration method depends on the specific needs and constraints of the project at hand, balancing factors like performance, clarity, and maintainability.

Related benchmarks:

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