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

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 71 runs

for ... of

9.6M/s

forEach

9.6M/s

View exact numbers

✓ for ... of: 9,604,623 ops/sec
• forEach: 9,555,760 ops/sec

Firefox 21 runs

forEach

44.4M/s

for ... of

12.6M/s

Fastest: forEach (3.5x faster)

View exact numbers

✓ forEach: 44,440,968 ops/sec
• for ... of: 12,595,440 ops/sec

Safari 6 runs

forEach

57.2M/s

for ... of

23.0M/s

Fastest: forEach (2.5x faster)

View exact numbers

✓ forEach: 57,216,408 ops/sec
• for ... of: 22,982,204 ops/sec

Mobile Results:

Chrome 8 runs

forEach

5.8M/s

for ... of

5.6M/s

View exact numbers

✓ forEach: 5,833,726 ops/sec
• for ... of: 5,602,154 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

Browser/OS: Chrome 151 on Linux

View result in a separate tab

for ... of

3.9M/s

forEach

3.8M/s

View exact numbers

Test name	Executions per second
✓ for ... of	3,864,720 Ops/sec
forEach	3,768,374 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.

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

Go to the latest result

forEach

for ... of

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 71 runs

Firefox 21 runs

Safari 6 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

forEach

for ... of

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 71 runs

Firefox 21 runs

Safari 6 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `forEach vs for ... of`