Benchmark: for vs foreach vs for..in vs for..of with content

Script Preparation code:

var array = new Array(100);

Tests:

for
for (var i = 0; i < array.length; i++) { const item = array[i]; console.log(item); }
foreach
array.forEach(function(i) { console.log(i); });
for in
for (var i in array) { const item = array[i]; console.log(item); }
for..of
for (var i of array) { console.log(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for in
for..of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; POCO F2 Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.6367.54 Mobile Safari/537.36

Browser/OS: Chrome Mobile 124 on Android

View result in a separate tab

Test name	Executions per second
for	677.8 Ops/sec
foreach	3304129.2 Ops/sec
for in	3564640.0 Ops/sec
for..of	648.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a benchmark test case created on MeasureThat.net, which compares the performance of different loop constructs in JavaScript: `for`, `forEach`, `for...in`, and `for...of`. The test aims to measure how these loops perform when iterating over an array of 100 elements.

**Loop Options Compared**

The test compares the performance of four different loop options:

1. **Traditional `for` loop**: This is a standard loop construct that uses a variable (`i`) to iterate over the array indices.
2. **`forEach` loop**: This is a modern loop construct introduced in ECMAScript 2015 (ES6). It allows iterating over an iterable (in this case, an array) without explicitly specifying the index.
3. **`for...in` loop**: This loop uses the `in` keyword to iterate over the array indices and values simultaneously.
4. **`for...of` loop**: This is another modern loop construct introduced in ES6, similar to `forEach`, but designed specifically for iterating over arrays using destructuring syntax.

**Pros and Cons of Each Approach**

1. **Traditional `for` loop**:
	* Pros: Easy to understand, well-supported by older browsers.
	* Cons: Can be error-prone if not used carefully (e.g., incrementing the index variable incorrectly).
2. **`forEach` loop**:
	* Pros: Modern, concise syntax; easy to read and maintain.
	* Cons: May have performance overhead due to the iteration callback function.
3. **`for...in` loop**:
	* Pros: Allows iterating over both indices and values simultaneously.
	* Cons: Can be slower than traditional `for` loops or modern `for...of` loops, as it uses a more complex iteration mechanism.
4. **`for...of` loop**:
	* Pros: Modern, concise syntax; optimized for array iteration.
	* Cons: May have limited support in older browsers.

**Library Used**

The benchmark test case uses the `Array.prototype.forEach()` method, which is a built-in JavaScript function. The `forEach()` method calls a provided callback function once for each element in the array, passing the current element value as an argument.

**Special JS Features/Syntax**

None of the loop constructs used in this benchmark require any special JavaScript features or syntax beyond what is considered standard in modern JavaScript (ES6+). However, note that the `for...in` loop may have performance implications due to its use of a more complex iteration mechanism, which can lead to slower performance compared to traditional `for` loops or modern `for...of` loops.

**Alternative Loops**

Other alternatives for array iteration in JavaScript include:

* `Array.prototype.map()`, `Array.prototype.filter()`, and `Array.prototype.reduce()` methods, which return new arrays with the results of applying a specified transformation function to each element.
* Using the `every()` method or `some()` method to check if all elements or any elements meet a condition.

Keep in mind that these alternative loops are designed for different use cases than traditional loop constructs and may have performance implications depending on the specific use case.

Related benchmarks:

for vs foreach vs for..in vs for..of with content (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for in vs for..of

Created: 2 years ago by: Guest

Jump to the latest result

for

foreach

for in

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