Benchmark: forEach vs for of (with Iterator) 2

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 = Array.from(1000, () => "duumy"); arr[Symbol.iterator]().forEach(v => { var a = v });
for of
const arr = Array.from(1000, () => "duumy"); 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: one year ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
forEach	6801028.5 Ops/sec
for of	9104716.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different JavaScript iteration methods over an array: `forEach` and `for...of`. Each method is assessed based on its execution speed, quantified in the number of executions per second.

### Test Options Compared
1. **forEach**
   - This method is a higher-order function that executes a provided function once for each array element.
   - The test case looks like this:
     ```javascript
     arr[Symbol.iterator]().forEach(v => {
         var a = v;
     });
     ```
   - In this context, the `forEach` is being used on an iterator created from an array.

2. **for...of**
   - This is a newer iteration statement in JavaScript ES6 (ECMAScript 2015) that allows you to loop over iterable objects (like arrays).
   - The relevant test case is:
     ```javascript
     for (var v of arr) {
         var a = v;
     }
     ```

### Performance Results
- The benchmark results reveal that the `for...of` loop achieved **14,549,238 executions per second**, whereas `forEach` recorded **10,819,038 executions per second**.
- This outcome indicates that `for...of` is significantly faster in this case, roughly performing about **34% more executions per second** compared to `forEach`.

### Pros and Cons
#### forEach
**Pros:**
- Readability: It can make the code cleaner and more intuitive, especially for callbacks.
- Functional Approach: Encourages a functional programming style.
  
**Cons:**
- Slightly slower performance compared to traditional loops and other iteration techniques.
- Does not support `break`, `continue`, or `return` statements for early exit from the iteration.

#### for...of
**Pros:**
- Performance: Generally faster than `forEach`, as shown in the benchmark.
- Flexibility: You can use `break`, `continue`, and `return` statements within the loop, offering more control flow options.

**Cons:**
- Slightly more verbose syntax compared to `forEach` for simple operations.
  
### Other Considerations
- The `for...of` loop can work directly with any iterable, including arrays, strings, and custom iterables, making it versatile.
- `forEach` is inherently bound to arrays, which can limit its applicability.
  
### Alternatives
Some alternative iteration methods to consider include:
- **Traditional for Loop**: Often yields the best performance, especially for large arrays, given the direct index manipulation.
  ```javascript
  for (let i = 0; i < arr.length; i++) {
      var a = arr[i];
  }
  ```

- **forEach with Arrow Function**: Similar in nature to the provided `forEach`, emphasizes a functional programming approach but doesn't change performance characteristics.
  
- **map** and **filter**: These methods provide functional processing of arrays with their own performance implications, but they create new arrays and thus may not be suitable for scenarios where performance is critical and no new array is needed.

Overall, choosing between these methods often depends on the specific use case and performance requirements of the application.

Related benchmarks:

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

Comparing performance of: forEach vs for of

Created: one year ago by: Guest

Jump to the latest result

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):