Benchmark: for..of / forEach

Script Preparation code:

var array = new Array(1000);

Tests:

for..of
for (var i of array) { console.log(array[i]); }
forEach
array.forEach(function(i) { console.log(array[i]); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for..of
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
for..of	373.7 Ops/sec
forEach	1328593.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its various components.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that tests two different ways of iterating over an array: using the `for...of` loop and the `forEach()` method.

**Script Preparation Code**

The script preparation code is a simple line of code that creates a new array with 1000 elements:
```
var array = new Array(1000);
```
This array will be used as the input for both benchmarking methods.

**Html Preparation Code**

There is no HTML preparation code provided, which means that this benchmark does not test any HTML-related functionality. The focus is solely on JavaScript performance.

**Benchmark Definition**

The benchmark definition consists of two separate JSON objects, each representing a different test case:

1. **for..of**: This test case uses the `for...of` loop to iterate over the array:
```
for (var i of array) {
  console.log(array[i]);
}
```
This is a modern JavaScript feature introduced in ECMAScript 2017, which allows iterating over arrays using a simple and concise syntax.

2. **forEach**: This test case uses the `forEach()` method to iterate over the array:
```
array.forEach(function(i) {
  console.log(array[i]);
});
```
The `forEach()` method is an older JavaScript feature that was introduced in ECMAScript 2009. It provides a more verbose syntax for iterating over arrays, but it's still widely used.

**Library and Special JS Feature**

There are no libraries or special JavaScript features mentioned in the benchmark definition. However, both test cases use modern JavaScript syntax (ECMAScript 2017 for `for...of` and ECMAScript 2009 for `forEach()`).

**Options Compared**

The two benchmarking methods compared here are:

1. **for...of**: A modern and concise way of iterating over arrays using the new syntax introduced in ECMAScript 2017.
2. **forEach**: An older but still widely used method for iterating over arrays, which provides a more verbose syntax.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **for...of**:
	* Pros: More concise and readable syntax, allows for easier iteration over arrays.
	* Cons: Not supported in older browsers or environments that don't support ECMAScript 2017.
2. **forEach**:
	* Pros: Wider compatibility with older browsers and environments, still widely used and understood.
	* Cons: More verbose syntax compared to `for...of`, less readable for some developers.

**Other Considerations**

If you're considering which approach to use in your own code, here are a few additional factors to consider:

1. **Browser Support**: If you need to support older browsers or environments, `forEach` might be a better choice.
2. **Readability and Maintainability**: If you prioritize readability and maintainability, `for...of` might be the better choice due to its concise syntax.

**Alternatives**

If you're looking for alternative approaches to iterate over arrays, here are a few options:

1. **Array.prototype.forEach.call()**: This method is similar to `forEach()` but requires calling `call()` on the array object.
2. **Array.prototype.map()`: This method can be used to create an array of new values by iterating over the original array.
3. **Array.prototype.reduce()**: This method can be used to accumulate a value by iterating over the array.

Keep in mind that these alternatives might not provide the exact same performance characteristics as `for...of` or `forEach`, but they offer different trade-offs and use cases.

Related benchmarks:

for..of / forEach (version: 0)

Comparing performance of: for..of vs forEach

Created: one year ago by: Guest

Jump to the latest result

for..of

forEach

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