Benchmark: for...in vs for...of vs for-loop

HTML Preparation code:

<div id='test'></div>

Tests:

for-loop
var arr = ['hello', 'a', 'b']; let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'b') { val = value; break; } }
for..of
var arr = ['hello', 'a', 'b']; let val; for (var value of arr) { if (value === 'b') { val = value; break; } }
for..in
var arr = ['hello', 'a', 'b']; let val; for (var value in arr) { if (value === 2) { val = value; break; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-loop
for..of
for..in

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	103248296.0 Ops/sec
for..of	110971312.0 Ops/sec
for..in	10518757.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Purpose**

The goal of this benchmark is to compare the performance of three different loop types:

1. **Traditional for-loop** (also known as a "manual" or " index-based" loop): This type of loop uses an explicit counter variable (`i`) to iterate over an array.
2. **For-of loop**: This type of loop uses the `for...of` syntax to iterate over an array, where the value of each iteration is stored in the variable specified after the `of` keyword.
3. **For-in loop**: This type of loop uses the `for...in` syntax to iterate over an object (or array in older browsers), where the property name of each iteration is stored in the variable specified after the `in` keyword.

**Options Compared**

The benchmark compares the performance of these three loop types:

* **Traditional for-loop**: Iterates over an array using a manual counter variable (`i`) and checks for specific conditions.
* **For-of loop**: Iterates over an array using the `for...of` syntax, which is designed to be more concise and expressive than traditional loops.
* **For-in loop**: Iterates over an object (or array) using the `for...in` syntax, which may not be suitable for arrays.

**Pros and Cons of Each Approach**

Here are some general pros and cons of each approach:

* **Traditional for-loop**:
	+ Pros: More control over iteration, easy to implement.
	+ Cons: Can be verbose, prone to off-by-one errors.
* **For-of loop**:
	+ Pros: Concise and expressive syntax, less error-prone than traditional loops.
	+ Cons: May not work as expected for arrays (which are technically objects), more complex setup required.
* **For-in loop**:
	+ Pros: Works well with objects, easy to use when working with existing object APIs.
	+ Cons: Not suitable for arrays, can lead to unexpected behavior if used with arrays.

**Library/Functionality Used**

None mentioned in the provided benchmark definition. However, it's worth noting that some browsers and engines may have specific optimizations or quirks related to these loop types.

**Special JavaScript Features/Syntax**

* **For-of loop**: Introduced in ECMAScript 2015 (ES6), this syntax allows for concise iteration over arrays.
* **For-in loop**: Also introduced in ES6, this syntax is designed for iterating over objects.

**Other Alternatives**

If you need to compare performance of other loop types or variations on these loops, you might consider exploring:

* **While loops**
* **Recursive loops**
* **Map(), Filter(), and Reduce() methods**, which can be used to iterate over arrays in a more functional programming style.
* **Async/await syntax** for asynchronous iteration.

Keep in mind that the choice of loop type or method ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

for...in vs for...of vs for-loop (version: 0)

Testing the difference between native loops and find()

Comparing performance of: for-loop vs for..of vs for..in

Created: 3 years ago by: Guest

Jump to the latest result

for-loop

for..of

for..in

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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