Benchmark: foreach vs for of

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; i++) {
      arr[i] = i;
    }
  
    function someFn(i) {
      return i * 3 * 8;
    }

Tests:

foreach
arr.forEach(function (item){ someFn(item); })
for of
for (item of arr) { someFn(item); }

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: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36

Browser/OS: Chrome 88 on Linux

View result in a separate tab

Test name	Executions per second
foreach	4442.4 Ops/sec
for of	843.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its options.

The benchmark measures the performance difference between two approaches for iterating over an array: `forEach` and `for...of`. Both approaches are used to call the `someFn` function on each element of the array.

**Options Compared:**

1. **`forEach`**: The `forEach` method is a built-in Array method that executes a callback function once for each element in the array, without exposing the index of the current element.
2. **`for...of`**: The `for...of` loop is a newer iteration syntax (introduced in ECMAScript 2015) that allows iterating over arrays and other iterable objects.

**Pros and Cons:**

*   **`forEach`**:
    *   Pros:
        +   More concise code, as the callback function only needs to access the current element.
        +   No need to worry about the index of the current element.
    *   Cons:
        +   Less control over the iteration process (no option to skip elements or break out of the loop).
        +   May have performance implications due to the overhead of the method call.
*   **`for...of`**:
    *   Pros:
        +   More control over the iteration process, allowing for skipping elements and breaking out of the loop.
        +   Can be more efficient than `forEach` in some cases, as it avoids the overhead of the method call.
    *   Cons:
        +   Requires knowledge of the `for...of` syntax, which may not be familiar to all developers.
        +   More verbose code compared to `forEach`.

**Library: None**

The benchmark uses built-in JavaScript features (`forEach`, `for...of`, and `someFn`) without any external libraries.

**Special JS Feature or Syntax: for...of (introduced in ECMAScript 2015)**

The `for...of` loop is a new iteration syntax that allows iterating over arrays and other iterable objects. It provides more control over the iteration process, as developers can use `continue`, `break`, and `next` statements to modify the flow of the loop.

**Other Alternatives**

Other alternatives for iterating over arrays include:

*   **`map()`**: Creates a new array with the results of applying a provided function on every element in this array.
*   **`reduce()`**: Applies a function against an accumulator and each value of the array (from left to right) to reduce it to a single output value.
*   **Manual indexing (`while` loop)**: Iterates over the array using an index variable, which can provide more control but also introduces additional complexity.

In summary, the benchmark compares the performance of two approaches for iterating over arrays: `forEach` and `for...of`. The pros and cons of each approach highlight the trade-offs between conciseness, control, and performance.

Related benchmarks:

foreach vs for of (version: 0)

Comparing performance of: foreach vs for of

Created: 3 years 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 llama3.2:3b, generated 2 months ago):