Benchmark: array.forEach vs for..of vs for loop

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:


const array = Array.from({length: 10_000}, (_, i) => i)

Tests:

for of
for (const el of array) console.log(el)
for loop
for (let i = 0; i < array.length; i++) console.log(array[i])
forEach
array.forEach((el) => console.log(el))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
for loop
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for of	55.3 Ops/sec
for loop	55.8 Ops/sec
forEach	56.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you've provided compares three different methods of iterating over an array in JavaScript, specifically:

1. **Array.prototype.forEach()**
2. **for..of loop**
3. **Traditional for loop**

### Options Compared

1. **forEach Method**:
   - **Code**: `array.forEach((el) => console.log(el))`
   - **Description**: `forEach` is a method that executes a provided function once for each array element.
   - **Pros**: 
     - More concise and easier to read for some developers.
     - Avoids the need to manage loop counters or indices.
   - **Cons**:
     - Cannot break out of the loop; if you need to exit early, you'll have to use a different approach.
     - Performance may vary based on the provided function complexity and certain engine optimizations.

2. **for..of Loop**:
   - **Code**: `for (const el of array) console.log(el)`
   - **Description**: The `for..of` loop iterates over iterable objects (like Arrays, Strings, etc.) and executes a block of code for each element.
   - **Pros**:
     - Simple syntax that avoids explicit indexing.
     - Allows easier use of `break`, `continue`, and `return` statements to control the flow.
   - **Cons**:
     - Generally, it may be slightly less performant compared to traditional loops, but benefits from simpler syntax.

3. **Traditional For Loop**:
   - **Code**: `for (let i = 0; i < array.length; i++) console.log(array[i])`
   - **Description**: The traditional `for` loop uses an index to iterate through the array.
   - **Pros**:
     - High performance and control over the iteration process.
     - Allows for optimized manual looping (like modifying the index or skipping elements).
   - **Cons**:
     - Syntax can be seen as cumbersome and less readable.
     - Introduces potential for off-by-one errors and requires more boilerplate code.

### Benchmark Results

The benchmark results indicate how many executions of each method could be performed per second in a specific environment (Firefox 133 on a Windows Desktop). The results are as follows:

- **forEach**: 27.88 executions per second
- **for of**: 27.06 executions per second
- **for loop**: 25.39 executions per second

### Considerations & Alternative Approaches

1. **Performance Considerations**: The results show that the `forEach` method performed best in this specific test case, which might be attributed to JavaScript's engine optimizations for this built-in method. However, it's important to consider that performance can vary based on the specific JavaScript environment and what additional logic is inside the iteration (complex computations versus simple logging).

2. **Other Alternatives**:
   - **map()**: Efficient for transforming arrays since it creates a new array with the results.
   - **filter()**: Useful when you need to extract certain elements from an array, creating a new filtered array.
   - **reduce()**: If aggregation or accumulating results is needed, `reduce` offers a powerful way to combine all array elements into a single value.

In summary, the choice of which loop to use depends on the specific needs of the code you are writing. Performance may be a concern when iterating over large data sets, but readability and maintainability are equally important factors. Each method has its place, and understanding their pros and cons is essential for making informed decisions in JavaScript development.

Related benchmarks:

array.forEach vs for..of vs for loop (version: 1)

Comparing performance of: for of vs for loop vs forEach

Created: one year ago by: Guest

Jump to the latest result

for of

for loop

forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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