Benchmark: forEach vs for of (23)

Tests:

for of
const arr = Array.from({ length: 10000 }, () => ['a', 'b']) for (let [a,b] of arr){ console.log(a); console.log(b); }
forEach
const arr = Array.from({ length: 10000 }, () => ['a', 'b']) arr.forEach(([a,b])=>{ console.log(a); console.log(b); })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The test compares two JavaScript iteration methods: `forEach` and `for...of`. Both tests are designed to iterate over an array of arrays, logging the values of each inner array element (`a` and `b`) to the console.

**Library Used**

In both benchmark definitions, no external libraries are used. The tests only utilize built-in JavaScript features.

**JavaScript Features Used**

*   **for...of**: Introduced in ECMAScript 2015 (ES6), `for...of` is a loop that allows iteration over arrays, maps, and sets using an iterable value.
*   **Array.from()**: Creates a new array from an array-like object or an iterable. In this case, it's used to generate an array of arrays with the specified length and values.

**Benchmark Definitions**

### 1. `for...of` Loop

```javascript
for (let [a, b] of arr) {
    console.log(a);
    console.log(b);
}
```

*   **Pros:**
    *   Easy to read and write.
    *   Less prone to errors compared to `forEach`.
*   **Cons:**
    *   Not as flexible as `forEach` since it requires the array elements to be in a specific order (in this case, `[a, b]`).
    *   Might have performance overhead due to the need for explicit type casting (`let [a, b] = arr[i];`).

### 2. `forEach()` Loop

```javascript
arr.forEach(([a, b]) => {
    console.log(a);
    console.log(b);
});
```

*   **Pros:**
    *   More flexible than `for...of`, allowing for arbitrary array elements.
    *   Often considered more modern and idiomatic in JavaScript codebases.
*   **Cons:**
    *   Can be less readable due to the use of callback functions and implicit type casting (`[a, b] = arr[i];`).
    *   May have performance overhead compared to `for...of`, especially for large arrays.

**Benchmark Results**

The provided benchmark results show two browsers running different iterations: Chrome 113 on a Mac OS X 10.15.7 desktop platform with the following execution rates:

*   `forEach`: ~30.29 executions per second
*   `for...of`: ~27.42 executions per second

**Other Considerations**

When choosing between `forEach` and `for...of`, consider the specific requirements of your use case, such as performance, readability, and flexibility.

In some cases, using `forEach()` might be preferred for its flexibility and modernity, especially when working with array-like objects or data structures that don't conform to the expected order. However, for simple iteration scenarios where readability and explicitness are valuable, `for...of` can be a better choice.

**Alternatives**

If you need even more control over your loops, consider using traditional `for` loops:

```javascript
for (let i = 0; i < arr.length; i++) {
    let [a, b] = arr[i];
    console.log(a);
    console.log(b);
}
```

Keep in mind that this approach requires manual indexing and handling of array bounds, which can be error-prone.

Related benchmarks:

forEach vs for of (23) (version: 0)

Comparing performance of: for of vs forEach

Created: 3 years ago by: Guest

Jump to the latest result

for of

forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):