Benchmark: for of vs forEach vs for

Script Preparation code:

var arr = [];
for (var i = 0; i < 10000; i++) {
    arr[i] = {x: 4 + i, y: 'test string' + i, q: {z: '' + i}};
}

Tests:

for
let x = 1; for (let i = 0; i < arr.length; ++i) { x = arr[i]; }
forEach
let x = 1; arr.forEach(el => x = el);
for of
let x = 1; for(el of arr) { x = el; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
forEach
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Brave/1 Version/26.4 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	3582.5 Ops/sec
forEach	2930.9 Ops/sec
for of	4658.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested.

**Benchmark Definition**

The test case measures the performance difference between three different iteration methods:

1. **Traditional `for` loop**: This is the most common way to iterate over an array in JavaScript. It uses a manual index variable (`i`) to access each element.
2. **`forEach` method**: Introduced in ECMAScript 5, `forEach` allows iterating over arrays without exposing the underlying array structure. It's more concise and readable than traditional loops.
3. **`for...of` loop**: Part of ECMAScript 2015 (ES6), `for...of` is a new way to iterate over iterable objects like arrays, maps, or sets. It eliminates the need for an index variable.

**Options Compared**

The benchmark compares the performance of these three iteration methods:

* **Traditional `for` loop**: Accesses each element using the manual index variable (`i`).
* **`forEach` method**: Iterates over the array using the callback function (`el => x = el`).
* **`for...of` loop**: Iterates over the array using the iterator expression (`(el of arr)`).

**Pros and Cons**

Here's a brief summary:

### Traditional `for` Loop

Pros:

* Well-established syntax
* Easy to understand and maintain
* Suitable for performance-critical code

Cons:

* Verbose code
* More prone to errors due to manual index management

### `forEach` Method

Pros:

* Concise syntax
* Easy to read and maintain
* Less error-prone than traditional loops

Cons:

* Can be slower than traditional loops due to the overhead of callback functions
* May not be as efficient for large datasets

### `for...of` Loop

Pros:

* More concise syntax compared to traditional loops
* Reduces errors by eliminating manual index management
* Suitable for modern JavaScript development

Cons:

* Less familiar syntax for some developers
* May require additional setup for iterator expressions

**Libraries and Features**

There are no libraries used in this benchmark. However, note that `forEach` is a built-in method of arrays in JavaScript.

**Special JS Feature or Syntax**

No special JavaScript features or syntax are being tested in this benchmark. The focus is on the iteration methods themselves.

**Alternatives**

If you're looking for alternative iteration methods, consider:

* **`map()` and `reduce()`**: These are other built-in array methods that can be used for data processing.
* **`Array.prototype.forEach()` with a custom iterator**: While not recommended due to performance implications, this approach allows for more control over the iteration process.

For modern JavaScript development, it's essential to understand these iteration methods, especially `for...of`, as they provide a concise and efficient way to work with iterable objects.

Related benchmarks:

for of vs forEach vs for (version: 0)

Comparing performance of: for vs forEach vs for of

Created: 7 years ago by: Guest

Jump to the latest result

for

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