Benchmark: javascript loops (bigger loops)

Tests:

foreach
const items = Array.from({length: 1000000}, () => Math.floor(Math.random() * 40)); let index = 0; items.forEach(i => index++);
for-in
const items = Array.from({length: 1000000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i in items) { index++; }
for-of
const items = Array.from({length: 1000000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i of items) { index++; }
for
const items = Array.from({length: 1000000}, () => Math.floor(Math.random() * 40)); let index = 0; for(let i = 0; i < items.length; ++i) { index++; }
optimized-for
const items = Array.from({length: 1000000}, () => 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: 24 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
foreach	68.6 Ops/sec
for-in	27.8 Ops/sec
for-of	77.6 Ops/sec
for	93.9 Ops/sec
optimized-for	94.4 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 JSON provided evaluates the performance of different looping constructs in JavaScript when iterating through a large array of one million elements. The main options compared are:

1. **forEach**: Uses the `forEach` method to iterate over items.
2. **for-in**: Utilizes the `for...in` loop, which iterates over the enumerable properties of an object.
3. **for-of**: Leverages the `for...of` loop, designed to iterate over iterable objects (like arrays).
4. **for**: A traditional for loop, using a numeric index to access elements.
5. **optimized-for**: An optimized version of the traditional for loop, where iteration occurs in reverse order.

### Pros and Cons of Each Approach:

1. **forEach**:
   - **Pros**: 
     - Cleaner syntax for functional iteration.
     - It encapsulates iteration logic in a callback function, promoting readability.
   - **Cons**: 
     - Slower than a traditional loop due to the overhead of function calls.
     - Cannot be broken out of (i.e., you can't use `break` or `return` statements to stop iteration early).

2. **for-in**:
   - **Pros**: 
     - Easy to read and works on arrays and objects.
   - **Cons**: 
     - Not recommended for arrays as it iterates over all enumerable properties (including prototype properties), leading to potential unexpected behavior.
     - Generally slower due to additional checks.

3. **for-of**:
   - **Pros**:
     - Reads well and is straightforward for iterating over arrays.
     - Simpler than the traditional for loop and avoids issues with prototype properties.
   - **Cons**:
     - Slightly less performant compared to a traditional loop in scenarios where index access is needed.

4. **for**:
   - **Pros**: 
     - Highly performant for large arrays, particularly because you’re dealing directly with indices.
     - Offers complete control over the loop, including the ability to easily break or continue.
   - **Cons**: 
     - More verbose and less elegant than higher-level abstractions like `forEach` or `for-of`.

5. **optimized-for**:
   - **Pros**:
     - Also very performant; iterates in reverse, which can help with caching and reduce some optimization overhead.
     - Still gives complete control over index access, maintaining performance.
   - **Cons**:
     - Less intuitive than a standard `for`, especially for those unfamiliar with array operations.

### Other Considerations:

- **Frameworks and Libraries**: No external libraries are used in these tests, as the benchmark relies solely on native JavaScript features.

- **Performance**: The results show that both the traditional `for` and the `optimized-for` approaches yield the highest executions per second around 5.76, suggesting that these raw loops perform best for large datasets. This is followed by `for-of`, `forEach`, and the `for-in` structure, which performed the slowest.

### Alternatives:

Apart from the constructs tested in the benchmarks, there are other constructs worth mentioning for array iteration:

- **Array.prototype.map()**: Similar to `forEach`, it executes a provided function once for each array element, but it also creates a new array with the results.
  
- **Array.prototype.filter()**: Allows you to iterate over the elements while filtering them based on a condition and creating a new array with only the elements that meet the criteria.

- **Array.prototype.reduce()**: Not only iterates but can also be used to accumulate results, creating a single output value from an array.

Each of these has its use cases, and the choice often depends on the specific requirements for readability, maintainability, and performance. Understanding the trade-offs helps engineers make informed choices when writing JavaScript code, especially in performance-sensitive applications.

Related benchmarks:

javascript loops (bigger loops) (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):