Benchmark: for vs foreach vs for..of with loop content

Script Preparation code:

var array = new Array(100);

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
for	264000.1 Ops/sec
foreach	110600.0 Ops/sec
for..of	101145.7 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests compare the performance of three different looping constructs in JavaScript: the traditional `for` loop, the `Array.prototype.forEach` method, and the `for..of` loop. The goal is to evaluate the execution speed of each method when populating an array with the current timestamp using `Date.now()`.

### Options Compared

1. **Traditional `for` Loop**
   - **Definition**: `for (var i = 0; i < array.length; i++) { array[i] = Date.now(); }`
   - **Emerging from traditional programming**: This is one of the most basic forms of iterating over arrays and gives direct control over the index (`i`).
   - **Pros**:
     - Very efficient because it directly accesses array indices.
     - Allows for more control over the loop, such as easily modifying the increment or adding conditions to skip elements.
   - **Cons**:
     - Less readable than other methods for those unfamiliar with traditional loops.

2. **Array.prototype.forEach**
   - **Definition**: `array.forEach(function(i) { array[i] = Date.now(); });`
   - **Purpose**: This method is specifically designed for executing a function once for each array element.
   - **Pros**:
     - More readable and concise, especially for developers familiar with functional programming concepts.
     - Reduces risk of index-related errors because it abstracts away loop control.
   - **Cons**:
     - Generally slower than the traditional `for` loop, as it adds the overhead of a function call for each element.
     - You cannot use `break` or `continue` to exit the loop prematurely.

3. **for..of Loop**
   - **Definition**: `for (var i of array) { array[i] = Date.now(); }`
   - **Purpose**: This syntax provides a simpler way to iterate over iterable objects (like arrays), representing each element directly.
   - **Pros**:
     - Easier to read and write than traditional loops and eliminates index management.
     - Cleaner syntax for iterating over values rather than indices.
   - **Cons**:
     - Slightly less performant when compared to the classic `for` loop, as it involves more abstraction.
     - Using array values directly can complicate tasks where the index is needed.

### Benchmark Results Overview
The benchmark results indicate how many executions per second each looping method was able to achieve. Here are some observations:
- The traditional `for` loop performed significantly better, achieving **365,017** executions per second.
- The `for..of` loop had **218,646** executions per second.
- The `forEach` method had the slowest performance with **217,259** executions per second.

### Considerations and Other Alternatives
When selecting between these options, the choice may depend on the specific use case:
- If performance is critical, especially in scenarios involving large arrays, the traditional `for` loop may be the best choice.
- For code readability and maintainability, particularly in smaller loops where performance is less critical, `forEach` or `for..of` could be preferable.

Other alternatives to consider for iterating over arrays in JavaScript include:
- **Map**: `array.map(func)` may be a good alternative if there's a need to transform each element.
- **Filter**: `array.filter(func)` can be useful to create a new array with elements that pass a certain condition.
- **Reduce**: `array.reduce(func, initialValue)` can accumulate results based on the array's contents.

When using these methods, it's essential to weigh performance against readability and maintainability according to the specific project requirements.

Related benchmarks:

for vs foreach vs for..of with loop content (version: 1)

Compare loop performance

Comparing performance of: for vs foreach vs for..of

Created: one year ago by: Guest

Jump to the latest result

for

foreach

for..of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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