Benchmark: forEach vs for of (with Iterator) 2

HTML Preparation code:

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

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

 
/*your preparation JavaScript code goes hereTo 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 });
x

/*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
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
forEach
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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 month ago):

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

forEach
- This method is a higher-order function that executes a provided function once for each array element.
- The test case looks like this:
```
arr[Symbol.iterator]().forEach(v => {
    var a = v;
});
```
- In this context, the forEach is being used on an iterator created from an array.
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:
```
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.
```
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.

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 month 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 one month ago):

Test Options Compared

Performance Results

Pros and Cons

forEach

for...of

Other Considerations

Alternatives