Benchmark: Battle of the JavaScript Loops

Script Preparation code:

var array = new Array(1000);

Tests:

for
for (var i = 0; i < array.length; i += 1) { array[i]; }
for (with defined iterator)
var i = 0; for (i; i < array.length; i += 1) { array[i]; }
for (with defined iterator and iterator limit)
var i = 0; var arrayLength = array.length; for (i; i < arrayLength; i += 1) { array[i]; }
for of
for (var i of array) { array[i]; }
for in
for (var i in array) { array[i]; }
forEach
array.forEach(function(i) { array[i]; });
do while
var i = 0; do { array[i]; i += 1; } while (i < array.length);
do while (with defined iterator limit)
var i = 0; var arrayLength = array.length; do { array[i]; i += 1; } while (i < arrayLength);
while
var i = 0; while (i < array.length) { array[i]; i += 1; }
while (with defined iterator limit)
var i = 0; var arrayLength = array.length; while (i < arrayLength) { array[i]; i += 1; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for (with defined iterator)
for (with defined iterator and iterator limit)
for of
for in
forEach
do while
do while (with defined iterator limit)
while
while (with defined iterator limit)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 hours ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Battle of the JavaScript Loops" measures the performance of various looping constructs in JavaScript using a predefined array with 1,000 elements. The test focuses on comparing different looping mechanisms to determine which is the most efficient in terms of execution speed, quantified in terms of "Executions Per Second."

### Options Compared

1. **Traditional `for` Loop**: 
   - **Definition**: `for (var i = 0; i < array.length; i += 1) { array[i]; }`
   - **Pros**: Widely used and understood; provides fine control over iteration.
   - **Cons**: Slightly verbose, and performance may be less than optimized versions using pre-calculated length or other mechanisms.

2. **For Loop with Defined Iterator**: 
   - **Definition**: `for (i; i < array.length; i += 1) { array[i]; }`
   - **Pros**: Might save some parsing time since the iterator is defined outside the loop.
   - **Cons**: Still shares some overhead with traditional looping.

3. **For Loop with Defined Iterator and Iterator Limit**:
   - **Definition**: `for (i; i < arrayLength; i += 1) { array[i]; }`
   - **Pros**: This method optimizes access to the `array.length` property by storing it in a variable beforehand, reducing the number of property accesses.
   - **Cons**: Slightly more complex.

4. **`for...of` Loop**:
   - **Definition**: `for (var i of array) { array[i]; }`
   - **Pros**: Cleaner syntax for iterating over iterable objects, and automatically handles cases of sparse arrays.
   - **Cons**: Slightly less performant than traditional loops in certain cases, primarily due to additional abstraction.

5. **`for...in` Loop**:
   - **Definition**: `for (var i in array) { array[i]; }`
   - **Pros**: Useful for iterating over object properties.
   - **Cons**: Not recommended for arrays due to potential iteration over inherited properties, which leads to inconsistency and performance drawbacks.

6. **`Array.prototype.forEach`**:
   - **Definition**: `array.forEach(function(i) { array[i]; });`
   - **Library**: This uses the built-in JavaScript `forEach` method to iterate over elements.
   - **Pros**: Offers a functional approach, allowing usage of closures.
   - **Cons**: Generally slower than traditional loop constructs due to function call overhead and does not allow for the use of `break` or `continue`.

7. **`do...while` Loop**:
   - **Definition**: `do { array[i]; i += 1; } while (i < array.length);`
   - **Pros**: Always executes the loop body at least once, which can be beneficial in certain scenarios.
   - **Cons**: Less commonly used for standard iterations over arrays and can lead to less readable code.

8. **`do...while` with Defined Iterator Limit**:
   - **Definition**: `do { array[i]; i += 1; } while (i < arrayLength);`
   - **Pros**: Similar benefits as earlier versions, but accesses a single variable, optimizing performance slightly.
   - **Cons**: Like the previous `do...while`, it's not as readable for standard array iterations.

9. **`while` Loop**:
   - **Definition**: `while (i < array.length) { array[i]; i += 1; }`
   - **Pros**: Common idiom which can be efficient if the loop body needs to run based on complex conditions.
   - **Cons**: Similar overhead to traditional `for` loops but less control over iterator behavior.

10. **`while` with Defined Iterator Limit**:
   - **Definition**: `while (i < arrayLength) { array[i]; i += 1; }`
   - **Pros**: Optimized by storing the array length beforehand, reducing property access during the loop.
   - **Cons**: Can be less intuitive than traditional looping syntax.

### Benchmark Results Summary

Based on the latest benchmark results against these looping constructs, the following observations were made:
- The `for...in` loop achieved the highest performance with 1,208,958.375 Executions Per Second, potentially due to optimizations in how the engine manages this control structure despite its non-ideal use case for arrays.
- The `forEach` followed closely with 1,154,055.0 Executions Per Second.
- Traditional looping constructs (`for`, `while`, and `do...while`) generally performed less favorably when length checks were not optimized with a pre-assigned variable.

### Other Considerations and Alternatives

1. **Array Iterators**: These are great for more functional approaches with methods like `map`, `filter`, and `reduce`, but their performance can vary as seen with `forEach`.
2. **Typed Arrays**: For numerical data-heavy applications, using typed arrays (`Int32Array`, `Float64Array`, etc.) can yield better performance overall.
3. **Concurrency with Web Workers**: For extensive computations, leveraging Web Workers can offload work and avoid UI thread blocking, although this is more complex than the discussed looping structures.
4. **Using Libraries**: Libraries like Lodash or Ramda provide utility functions that may reduce manual loop management but can introduce overhead compared to native methods.

### Conclusion

This benchmark illustrates important considerations for performance-sensitive applications in JavaScript. While modern engines optimize many of these loops, understanding the nuances of each construct can help developers make informed decisions based on the requirements and constraints of their specific use cases.

Latest run results:

Run details: (Test run date: 7 hours ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
for	6509.0 Ops/sec
for (with defined iterator)	6534.2 Ops/sec
for (with defined iterator and iterator limit)	12944.3 Ops/sec
for of	11749.3 Ops/sec
for in	1208958.4 Ops/sec
forEach	1154055.0 Ops/sec
do while	6452.0 Ops/sec
do while (with defined iterator limit)	12748.7 Ops/sec
while	6376.8 Ops/sec
while (with defined iterator limit)	12895.0 Ops/sec

Related benchmarks:

Battle of the JavaScript Loops (version: 1)

Brought to you by boredom

Comparing performance of: for vs for (with defined iterator) vs for (with defined iterator and iterator limit) vs for of vs for in vs forEach vs do while vs do while (with defined iterator limit) vs while vs while (with defined iterator limit)

Created: 7 hours ago by: Guest

Jump to the latest result

for

for (with defined iterator)

for (with defined iterator and iterator limit)

for of

for in

forEach

do while

do while (with defined iterator limit)

while

while (with defined iterator limit)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 hours ago):