Benchmark: JS forEach vs for ... of

Script Preparation code:

x = [1,2,3,4,5]

Tests:

forEach
y = [] x.forEach(i => y.push(i))
for ... of
y = [] for (const i of x) { y.push(i) }

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 days ago)

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

Test name	Executions per second
forEach	8794869.0 Ops/sec
for ... of	8874993.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the JavaScript microbenchmark on MeasureThat.net.

The provided JSON represents two test cases, comparing the performance of `forEach` and `for...of` loops in JavaScript. Both tests aim to push elements from an array onto another array.

**What is tested?**

In essence, both tests are measuring how fast it is to iterate through an array and add each element to a new array. The main difference between the two approaches lies in the way the iteration is performed:

1.  **`forEach` loop**: This method iterates over the array using a callback function, where each element is passed as an argument (`i` in this case). The callback function can perform any operation on `i`.
2.  **`for...of` loop**: This approach uses a for-of loop to iterate directly over the elements of the array.

**Options compared**

The main comparison is between these two iteration methods:

*   **Pros and Cons:**
    *   **`forEach`:**
        *   Pros:
            *   Easier to understand, especially for developers without deep JavaScript knowledge.
            *   Can be more suitable when using callback functions for complex logic.
        *   Cons:
            *   Generally slower than `for...of` due to the overhead of function calls and argument passing.
    *   **`for...of`:**
        *   Pros:
            *   Faster, as it avoids the overhead of function calls and argument passing.
            *   More efficient, especially for small arrays, since it directly iterates over the elements.
        *   Cons:
            *   Less familiar to some developers, requiring a basic understanding of the iteration syntax.

**Library usage**

None of the provided benchmark test cases uses any external libraries. However, MeasureThat.net may employ internal optimizations or implementation details that are not visible in these test cases.

**Special JavaScript feature or syntax**

The tests explicitly use the `for...of` loop, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This allows for more readable and concise iteration over arrays.

**Other alternatives**

When compared to other iteration methods like traditional `for` loops with indexes (`x.forEach(i => y.push(i))` is not used here), the choice between `forEach` and `for...of` often comes down to:

*   **Familiarity**: If you're already familiar with the `forEach` method, it might be a better choice for simple iterations.
*   **Performance**: If speed is crucial and you know that your array is not too large, using `for...of` will generally provide a slight performance boost.
*   **Code Readability**: When dealing with complex logic or unfamiliar iteration methods, the readability benefits of `forEach` should be weighed against potential performance trade-offs.

In summary, both tests compare the performance of two commonly used iteration methods in JavaScript. While `for...of` tends to offer slightly better performance, the choice between these approaches ultimately depends on your specific use case and personal preference.

Related benchmarks:

JS forEach vs for ... of (version: 0)

compare between forEach and for ... of

Comparing performance of: forEach vs for ... of

Created: 5 years ago by: Registered User

Jump to the latest result

forEach

for ... of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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