Benchmark: javascript loops 10000000 items

Tests:

foreach
const items = Array.from({length: 10000000}, () => Math.floor(Math.random() * 40)); let index = 0; items.forEach(i => index++);
for-in
const items = Array.from({length: 10000000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i in items) { index++; }
for-of
const items = Array.from({length: 10000000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i of items) { index++; }
for
const items = Array.from({length: 10000000}, () => Math.floor(Math.random() * 40)); let index = 0; for(let i = 0; i < items.length; ++i) { index++; }
optimized-for
const items = Array.from({length: 10000000}, () => Math.floor(Math.random() * 40)); let index = 0; for(let i = items.length; i > 0; --i) { index++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for-in
for-of
for
optimized-for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
foreach	0.8 Ops/sec
for-in	0.5 Ops/sec
for-of	0.9 Ops/sec
for	0.9 Ops/sec
optimized-for	0.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares different types of JavaScript loops that iterate through an array of 10,000,000 items. The intent is to measure the performance of these loop constructs by calculating how many iterations can be executed per second in a specific JavaScript environment (in this case, Chrome 130 on macOS). Let’s break down each of the test cases, how they work, their pros and cons, and the results measured.

### Test Cases

1. **forEach**:
    - **Code**: `items.forEach(i => index++);`
    - **Description**: This uses the `forEach` method of the Array object, which executes a provided function once for each array element.
    - **Pros**: It is clean and readable; it doesn't require managing the index manually.
    - **Cons**: It can be slower compared to traditional loops due to the overhead of a callback function and the creation of a closure.
    
2. **for-in**:
    - **Code**: `for (let i in items) { index++; }`
    - **Description**: This loop iterates over the enumerable properties of an object, including arrays.
    - **Pros**: Useful if you need to loop through object properties, not specifically meant for arrays.
    - **Cons**: It's generally slower for arrays because it traverses the entire prototype chain, which may lead to unexpected results (like including properties added to the array object).
    
3. **for-of**:
    - **Code**: `for (let i of items) { index++; }`
    - **Description**: This is a modern iteration method that allows you to loop over iterable objects (like arrays).
    - **Pros**: More concise than traditional loops, preserves the simplicity of array iteration without the pitfalls of `for-in`.
    - **Cons**: May not be as fast as simple indexed loops in some environments.

4. **for**:
    - **Code**: `for(let i = 0; i < items.length; ++i) { index++; }`
    - **Description**: This is a traditional `for` loop that explicitly uses indexing to iterate.
    - **Pros**: It is typically faster than higher-level loop constructs due to lower overhead, as it directly accesses array elements.
    - **Cons**: It can be less readable in cases where more complex logic is needed inside the loop.

5. **Optimized for**:
    - **Code**: `for(let i = items.length; i > 0; --i) { index++; }`
    - **Description**: Another traditional loop but starts from the end of the array and decrements the index.
    - **Pros**: Potentially faster in some JavaScript engines because it avoids the repeated access to the length property.
    - **Cons**: Slightly less intuitive than starting from zero.

### Results

Here are the measured executions per second for each looping construct:

- **for**: 0.892
- **optimized-for**: 0.879
- **for-of**: 0.851
- **forEach**: 0.808
- **for-in**: 0.516

### Analysis of Results

From the benchmark results, we can see that:

- The traditional `for` loop performs the best, closely followed by the `optimized-for` loop. This aligns with expectations, as both loops operate directly on indices.
- The `for-of` loop shows decent performance but is significantly slower than both traditional loops—this might indicate overhead associated with iterator protocol.
- The `foreach` method performs relatively well but is slower than traditional indexed loops but provides cleaner syntax.
- The `for-in` loop exhibits the poorest performance, further emphasizing that it is not the ideal choice for iterating over arrays.

### Other Considerations

- When choosing a looping construct, it's essential to consider both readability and performance based on the context of the application.
- Modern JavaScript engines may optimize various constructs differently, which can change performance characteristics based on the specific environment or the JavaScript version.
- Potential alternative iterations can include libraries like Lodash or Underscore.js, which offer utility functions for iteration but generally add an overhead due to their abstraction.
- When working with large datasets or requiring high-performance iterations, profiling is always recommended to make informed decisions based on actual performance metrics specific to the working environment.

In conclusion, while the traditional `for` loop is often the fastest, engineers should always balance performance with code readability and maintainability.

Related benchmarks:

javascript loops 10000000 items (version: 1)

Comparing performance of: foreach vs for-in vs for-of vs for vs optimized-for

Created: one month ago by: Guest

Jump to the latest result

foreach

for-in

for-of

for

optimized-for

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):