Benchmark: for, for..of, forEach

Script Preparation code:

var number = +prompt('Enter array length')
var arr = new Array(number).fill().map((_, i) => i);

function cb(i) {
  return i + i
}

Tests:

for of
for (const i of arr) { cb(i); }
forEach
arr.forEach((i) => { cb(i); });
forEach, separate callback
function _cb(i) { return cb(i) } arr.forEach((i) => { _cb(i); });
for
for (let i = 0; i < arr.length; i++) { cb(arr[i]) }
for, external len
const len = arr.length for (let i = 0; i < len; i++) { cb(arr[i]) }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

forEach

6K/s

for of

6K/s

forEach, separate callback

5K/s

for, external len

3K/s

for

2K/s

Fastest: forEach (3.0x faster)

View exact numbers

✓ forEach: 6,337 ops/sec
• for of: 6,283 ops/sec
• forEach, separate callback: 5,342 ops/sec
• for, external len: 3,216 ops/sec
• for: 2,137 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
for of
forEach
forEach, separate callback
for
for, external len

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 124 on Linux

View result in a separate tab

forEach

6K/s

for of

6K/s

forEach, separate callback

5K/s

for, external len

3K/s

for

2K/s

View exact numbers

Test name	Executions per second
✓ forEach	6,337 Ops/sec
for of	6,283 Ops/sec
forEach, separate callback	5,342 Ops/sec
for, external len	3,216 Ops/sec
for	2,137 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 microbenchmarking world of MeasureThat.net.

**Benchmark Description**

The provided benchmark compares four different approaches to iterate over an array:

1. **Traditional For Loop**: Uses a traditional `for` loop with an incrementing index.
2. **For...Of Loop**: Utilizes the `for...of` loop, which is a newer syntax for iterating over arrays.
3. **Array.prototype.forEach()**: Employs the `forEach()` method, which applies a callback function to each element in an array.
4. **Custom Separate Callback**: Creates a separate callback function and applies it to each element using `arr.forEach()`.

**Options Comparison**

These four approaches differ significantly in terms of performance, readability, and maintainability:

*   **Traditional For Loop**:
    *   Pros: Easy to understand, widely supported.
    *   Cons: Can be verbose, error-prone with index management.
*   **For...Of Loop**:
    *   Pros: Concise, modern syntax, less prone to errors.
    *   Cons: May not work as expected for certain data structures or edge cases.
*   **Array.prototype.forEach()**:
    *   Pros: Easy to use, doesn't require explicit index management.
    *   Cons: Can be slower than traditional loops due to additional overhead.

**Other Considerations**

When choosing an iteration approach:

*   Readability and maintainability should be prioritized.
*   Performance considerations depend on the specific use case and data structure.

**Library/Functionality Explanation (if applicable)**

In this benchmark, we don't have any explicit libraries or functions being used. However, `Array.prototype.forEach()` is a built-in method in JavaScript.

**Special JS Features/Syntax**

The For...Of Loop syntax utilizes a new feature introduced in ECMAScript 2015 (ES6). This loop type allows for more concise and expressive iteration over arrays, as it automatically manages the index.

In summary:

*   The benchmark compares four approaches to iterate over an array: traditional `for` loop, `for...of` loop, `Array.prototype.forEach()`, and custom separate callback.
*   Each approach has its pros and cons, such as readability, maintainability, performance, and additional overhead.

Now that we've explored the benchmark details, you should have a better understanding of these iteration approaches and how to apply them in different scenarios.

for, for..of, forEach (version: 0)

Comparing performance of: `for of vs forEach vs forEach, separate callback vs for vs for, external len`

Created: 2 years ago by: Registered User

Go to the latest result

for of

forEach

forEach, separate callback

for

for, external len

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for, for..of, forEach (version: 0)

Comparing performance of: for of vs forEach vs forEach, separate callback vs for vs for, external len

Created: 2 years ago by: Registered User

Go to the latest result

for of

forEach

forEach, separate callback

for

for, external len

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `for of vs forEach vs forEach, separate callback vs for vs for, external len`