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(); }

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Firefox 20 runs

for

204K/s

for..of

172K/s

foreach

156K/s

Fastest: for (1.3x faster)

View exact numbers

✓ for: 204,381 ops/sec
• for..of: 171,949 ops/sec
• foreach: 156,020 ops/sec

Chrome 17 runs

for

263K/s

foreach

109K/s

for..of

101K/s

Fastest: for (2.6x faster)

View exact numbers

✓ for: 263,321 ops/sec
• foreach: 109,188 ops/sec
• for..of: 101,146 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Windows

View result in a separate tab

for

120K/s

for..of

114K/s

foreach

110K/s

View exact numbers

Test name	Executions per second
✓ for	119,574 Ops/sec
for..of	114,405 Ops/sec
foreach	109,612 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.

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

Go to the latest result

for

foreach

for..of

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Firefox 20 runs

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

for

foreach

for..of

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Firefox 20 runs

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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