Benchmark: forEach vs for of (with Iterator)

HTML Preparation code:

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

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

forEach
/*When writing async/deferred tests, use `deferred.resolve()` to mark test as done*/ const arr = new Array(1000); arr[Symbol.iterator]().forEach(v => { var a = v });
for of
const arr = new Array(1000); for (var v of arr) { var a = v }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 133 on Android

View result in a separate tab

Test name	Executions per second
forEach	17606.7 Ops/sec
for of	375022.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark in question examines the performance of two different methods for iterating over an array of 1000 elements in JavaScript: using `forEach` and `for...of` loops. Here's a detailed explanation of what's being tested, the methods' pros and cons, and other considerations.

### Tested Methods

1. **forEach**:
   - **Implementation**: The benchmark uses the `forEach` method on the array, utilizing the `Symbol.iterator` to get the iterator of the array and then calling `forEach` to iterate over each element.
   - **Test Code**:
     ```javascript
     const arr = new Array(1000);
     arr[Symbol.iterator]().forEach(v => {
       var a = v;
     });
     ```
   - **Executions Per Second**: Approximately 96,544.

2. **for...of**:
   - **Implementation**: This method uses the `for...of` loop, which is a modern way to iterate over iterable objects in JavaScript.
   - **Test Code**:
     ```javascript
     const arr = new Array(1000);
     for (var v of arr) {
       var a = v;
     }
     ```
   - **Executions Per Second**: Approximately 1,711,728.

### Pros and Cons

**Pros of forEach**:
- **Readability**: The `forEach` method can be more expressive at times and may be easier to understand for developers who are familiar with functional programming concepts.
- **Chaining**: You can chain `forEach` with other array methods like `map`, `filter`, etc.

**Cons of forEach**:
- **Performance**: As evidenced by the benchmark results, `forEach` is significantly slower than `for...of`. This is primarily due to the overhead of function calls and the iterator protocol.
- **No ability to use `break` or `continue`**: You cannot break out of the loop or skip to the next iteration directly, which can be limiting in certain scenarios.

**Pros of for...of**:
- **Performance**: The `for...of` loop is considerably faster, as shown in the benchmark, making it preferable for performance-critical tasks.
- **Simplicity**: It allows for straightforward control flow through the use of `break` and `continue`.
- **Easy to use with other types of iterables**: It works with not just arrays but also other iterables like strings, maps, and sets.

**Cons of for...of**:
- **Less functional style**: It may be less appealing to developers who prefer the functional programming style of using higher-order functions.

### Other Considerations

- **Browser Compatibility**: Both `forEach` and `for...of` are widely supported in modern browsers. However, older browsers (like Internet Explorer) do not support `for...of`, which could be a concern depending on the project requirements.
  
- **Array Creation**: In both cases, an array of length 1000 is created, but both examples implicitly rely on the fact that the array items are initially `undefined`. For illustrative purposes, if initialization with values were required, it could affect performance.

### Alternatives

1. **Traditional for loop**:
   ```javascript
   for (var i = 0; i < arr.length; i++) {
     var a = arr[i];
   }
   ```
   - This option is often the fastest because it avoids the overhead of function calls and iterators.

2. **map**:
   - If the intent is to transform elements of the array, the `map` function could be considered.
   ```javascript
   arr.map(v => {
     var a = v;
   });
   ```
   - This, however, has its own performance considerations and is less efficient if the result is not needed, as it creates a new array.

3. **forEach with a separate callback**:
   - While it's essentially `forEach`, passing a named function may aid in clarity in complex scenarios, though at the cost of performance.

In summary, the benchmark highlights a vital performance characterization between two common iteration patterns. For performance-sensitive code, especially with larger datasets, opting for the `for...of` loop or a traditional `for` loop tends to be the more efficient approach, while `forEach` may be used for clarity and chaining where performance isn’t a primary concern.

Related benchmarks:

forEach vs for of (with Iterator) (version: 1)

Comparing performance of: forEach vs for of

Created: 2 months ago by: Guest

Jump to the latest result

forEach

for of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):