Benchmark: for vs foreach vs for..in vs for..of (small array)

Script Preparation code:

var array = new Array(1);

Tests:

for
for (var i = 0; i < array.length; i++) { array[i]; }
foreach
array.forEach(function(i) { array[i]; });
for in
for (var i in array) { array[i]; }
for..of
for (var i of array) { array[i]; }
for (cache length
const length = array.length for (var i = 0; i < length; i++) { array[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for in
for..of
for (cache length

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
for	15428524.0 Ops/sec
foreach	14520560.0 Ops/sec
for in	3287515.5 Ops/sec
for..of	9296124.0 Ops/sec
for (cache length	16183961.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of various looping constructs in JavaScript using a small array. Specifically, it tests four different types of loops: `for`, `forEach`, `for..in`, and `for..of`, alongside an optimization variation of the traditional `for` loop that caches the array's length.

### Options Compared:

1. **for Loop**
   ```javascript
   for (var i = 0; i < array.length; i++) {
       array[i];
   }
   ```
   - **Pros**: 
     - Generally the fastest among traditional loops due to direct indexing and minimal overhead.
     - Offers maximum flexibility (e.g., easy to control the loop variables and exit conditions).
   - **Cons**:
     - More verbose and can lead to errors if not set up correctly (e.g., off-by-one errors).

2. **forEach Loop**
   ```javascript
   array.forEach(function(i) {
       array[i];
   });
   ```
   - **Pros**: 
     - Clean and easy-to-read syntax, avoiding the boilerplate of traditional loops.
     - Automatically handles the array iteration without explicit management of an index.
   - **Cons**: 
     - Generally slower than traditional loops.
     - Cannot use `break` or `continue` for flow control within the loop, which limits flexibility.

3. **for..in Loop**
   ```javascript
   for (var i in array) {
       array[i];
   }
   ```
   - **Pros**: 
     - Useful for iterating over object properties, which can be handy in certain contexts.
   - **Cons**: 
     - Not recommended for arrays, as it iterates over all enumerable properties, including inherited ones. This can lead to unexpected behavior or additional overhead, making it one of the slowest options in this benchmark.

4. **for..of Loop**
   ```javascript
   for (var i of array) {
       array[i];
   }
   ```
   - **Pros**: 
     - Intuitive syntax for iterating over iterable objects (like arrays).
     - Directly accesses the values of the array, which can simplify some patterns.
   - **Cons**: 
     - Slower than `for` and `for (cache length)` in terms of raw execution speed, depending on the engine's optimizations.

5. **for (cache length) Loop**
   ```javascript
   const length = array.length;
   for (var i = 0; i < length; i++) {
       array[i];
   }
   ```
   - **Pros**: 
     - By caching the length of the array, this variant minimizes property lookups (the `array.length` operation) within the loop, optimizing performance, particularly in larger arrays.
   - **Cons**: 
     - It introduces a bit more complexity but is usually worth it in terms of performance gains in more extensive datasets.

### Benchmark Results:

- The test results indicate that the "for (cache length)" loop yields the highest performance with approximately **16.18 million executions per second**.
- The traditional `for` loop follows closely, performing at about **15.43 million executions per second**, also demonstrating efficiency.
- The `forEach` loop, while useful for its simplicity, only achieves **14.52 million executions per second**.
- `for..of` and `for..in` trails significantly, with `for..of` at **9.30 million** and `for..in` at a mere **3.29 million** executions per second. The latter is particularly inefficient for arrays due to its nature of iterating over all enumerable properties.

### Alternatives:

- **Array.prototype.map()** and Array.prototype.filter() could be alternatives in specific cases, though they aren't typically used for simple iterations due to their additional overhead from creating new arrays.
- Other looping methods include `while` and `do...while` loops, which can also be performant but are less common in modern JavaScript in the context of array iteration.
- For asynchronous iterations, methods like `async/await` in combination with `for` or `forEach` may also be applicable, although that introduces complexity in the form of promises and asynchronous behavior.

### Conclusion:

In performance-critical scenarios, especially when dealing with large arrays, traditional `for` loops (both standard and length-cached) outshine their modern counterparts in this specific benchmark. For code readability and ease of use in smaller, less performance-critical scenarios, `forEach` or `for..of` loops can be excellent choices. However, developers should always consider the trade-offs between performance and code clarity based on the specific use case.

Related benchmarks:

for vs foreach vs for..in vs for..of (small array) (version: 1)

Compare loop performance

Comparing performance of: for vs foreach vs for in vs for..of vs for (cache length

Created: one month ago by: Guest

Jump to the latest result

for

foreach

for in

for..of

for (cache length

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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