Benchmark: foreach vs for..of

Script Preparation code:

var array = new Array(1000).fill(1);

Tests:

foreach
array.forEach(function(i) { array[i]; });
for..of
for (var i of array) { array[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: 4 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
foreach	767896.6 Ops/sec
for..of	714177.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is defined in two parts:

1. **Script Preparation Code**: This code creates an array of 1000 elements filled with 1 using `new Array(1000).fill(1);`. The purpose of this code is to provide a common starting point for both loop types.
2. **Html Preparation Code**: This field is empty, which means that the benchmark does not require any additional HTML setup.

**Individual Test Cases**

There are two test cases:

### `foreach`

The first test case uses the `forEach` method with a callback function:
```javascript
array.forEach(function(i) {
  array[i];
});
```
This is an older way of iterating over arrays in JavaScript. The `forEach` method executes a callback function once for each element in the array, passing the current index as an argument.

Pros:

* Easy to read and write
* Supports some modern browser features like arrow functions

Cons:

* Can be slower than newer loop types due to additional overhead
* Not as efficient as modern loop types like `for...of`

### `for..of`

The second test case uses the `for...of` loop:
```javascript
for (var i of array) {
  array[i];
};
```
This is a newer way of iterating over arrays in JavaScript. The `for...of` loop executes a block of code once for each element in the array, with the current index passed as an argument.

Pros:

* Faster and more efficient than older loop types
* Supports some modern browser features like iterators

Cons:

* May require additional setup or polyfills in older browsers

**Library: Lodash**

The `forEach` method is part of the Lodash library, which provides a collection of functional programming helpers. The use of Lodash may affect the benchmark results.

Pros:

* Provides a consistent and familiar API for array iteration
* Supports some modern browser features like arrow functions

Cons:

* May add overhead or polyfills to older browsers

**Special JS Feature/Syntax: None**

Neither of these loop types uses any special JavaScript feature or syntax that requires explanation.

**Other Alternatives**

If you're looking for alternative loop types, consider the following options:

* `Array.prototype.forEach.call()`: This method is similar to Lodash's `forEach` but without the library.
* `for (var i = 0; i < array.length; i++) { ... }`: This traditional `for` loop can also be used for array iteration.
* `while (array.length > 0) { ... }`: This older `while` loop can also be used, but it's generally slower and less efficient.

Keep in mind that the choice of loop type often depends on your specific use case, performance requirements, and browser support.

Related benchmarks:

foreach vs for..of (version: 0)

Compare loop performance

Comparing performance of: foreach vs for..of

Created: 3 years ago by: Guest

Jump to the latest result

foreach

for..of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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