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

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

Test name	Executions per second
for of	6283.5 Ops/sec
forEach	6336.6 Ops/sec
forEach, separate callback	5342.5 Ops/sec
for	2136.6 Ops/sec
for, external len	3215.6 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.

Related benchmarks:

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

Jump to the latest result

for of

forEach

forEach, separate callback

for

for, external len

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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