Benchmark: for vs foreach vs for..in vs for..of 2

Script Preparation code:

var array = new Array(100000);

Tests:

for
for (var i = 0; i < array.length; i++) { array[i]; }
foreach
array.forEach(function(i) { array[i]; });
for in
for (var i in array) { 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
for
foreach
for in
for..of

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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
for	118.8 Ops/sec
foreach	11563.1 Ops/sec
for in	13393.5 Ops/sec
for..of	187.9 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 and explain what is tested, compared, and their pros/cons.

**Benchmark Purpose**

The benchmark compares the performance of four different loop iteration approaches:

1. **Traditional `for` loop**
2. **`.forEach()` method**
3. **`.for...in` loop**
4. **`.for...of` loop**

The goal is to measure which approach yields the best performance in terms of execution speed.

**Loop Iteration Approaches**

Here's a brief description of each approach:

1. **Traditional `for` loop**: This is the most common way to iterate over an array in JavaScript. It uses a manual index variable (`i`) and checks for the length of the array.
2. **`.forEach()` method**: Introduced in ECMAScript 5, `.forEach()` allows iterating over arrays without a manual index. It calls a callback function once for each element in the array.
3. **`.for...in` loop**: This loop iterates over the properties (i.e., keys) of an object or array using a string-based iterator. In this case, it's used to iterate over the `array` object itself.
4. **`.for...of` loop**: Introduced in ECMAScript 2015, `.for...of` allows iterating over arrays without a manual index. It uses an iterator protocol to traverse the array.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Traditional `for` loop**:
	* Pros: Easy to understand, widely supported.
	* Cons: Manual indexing can be error-prone, slower due to the overhead of checking length.
2. **`.forEach()` method**:
	* Pros: Convenient, easy to use, relatively fast.
	* Cons: May incur additional overhead due to callback function invocation, not suitable for array indexing operations.
3. **`.for...in` loop**:
	* Pros: Allows iteration over objects, convenient for some use cases.
	* Cons: Not designed for array iteration, may lead to unexpected behavior if used with arrays, slower than traditional `for` loops.
4. **`.for...of` loop**:
	* Pros: Convenient, easy to use, relatively fast, and designed specifically for array iteration.
	* Cons: May have limitations in certain browsers or versions.

**Library/Functionality Used**

None of the provided benchmark definitions explicitly mention any external libraries or functions being used. However, some may be implicitly relying on browser-specific features or built-in functions that are not explicitly mentioned.

**Special JS Features/Syntax (none)**

There is no special JavaScript feature or syntax being tested in this benchmark. The focus is solely on comparing the performance of four different loop iteration approaches.

**Other Alternatives**

If you're interested in exploring alternative loop iteration methods, here are a few options:

1. **`Array.prototype.map()`**: While not an iterative approach per se, `map()` can be used to transform arrays and might be considered an alternative to traditional loops.
2. **`Array.prototype.filter()`**: Similar to `map()`, `filter()` can also be used for array transformation and might be an alternative to traditional loops.
3. **`for...of` with manual indexing**: If you want more control over the iteration process, you could use a `.for...of` loop with manual indexing using the `Array.prototype.entries()` method.

Keep in mind that these alternatives may not necessarily offer significant performance improvements or are suitable for every use case. The choice of loop iteration approach ultimately depends on your specific requirements and trade-offs between readability, maintainability, and performance.

Related benchmarks:

for vs foreach vs for..in vs for..of 2 (version: 0)

Compare loop performance

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

Created: one year 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):