Benchmark: for in vs for of test

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 10000000; ++i) {
    result.push(i);
  }
  return result;
}
const array = generateTestArray()

Tests:

for of
for (const i of array){}
for in
for (const i in array){}
for each
array.forEach((i) =>{})
for let
for (let i=0; i<array.length; i++){ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
for in
for each
for let

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for of	13.8 Ops/sec
for in	1.6 Ops/sec
for each	17.0 Ops/sec
for let	45.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares different methods of iterating over an array in JavaScript. It tests the performance of four iteration techniques:

1. **For...of Loop (`for (const i of array) {}`)**: This construct allows iteration over iterable objects like arrays, strings, and other collections. It provides a cleaner syntax and automatically handles the retrieval of values without needing to manage an index manually.

2. **For...in Loop (`for (const i in array) {}`)**: This is primarily used for iterating over the properties of an object. Although it can be used with arrays, it does not guarantee iteration over the elements in numerical order and can include properties that are inherited through the prototype chain, making it less reliable for array iteration.

3. **Array.prototype.forEach (`array.forEach((i) => {})`)**: This method executes a provided function once for each array element. It is a useful abstraction for applying a function to each item and can improve readability, but might perform slower than traditional loops due to function call overhead.

4. **Classic for loop (`for (let i = 0; i < array.length; i++) {}`)**: This is a traditional loop where the index is explicitly managed. It is generally the fastest method among the four tested, primarily because it simply increments a counter and checks a condition.

### Performance Results

According to the latest benchmark results on the Chrome browser:

- **For let**: 45.57 executions per second
- **For each**: 16.96 executions per second
- **For of**: 13.77 executions per second
- **For in**: 1.56 executions per second

### Pros and Cons

**For...of Loop**
- **Pros**: Readable syntax, easy to use with any iterable.
- **Cons**: Slower than traditional loops for large datasets.

**For...in Loop**
- **Pros**: Can be used with any object to iterate through keys.
- **Cons**: Not suitable for arrays due to potential order issues and includes inherited properties.

**Array.prototype.forEach**
- **Pros**: Functional style, improves code readability.
- **Cons**: Slower because of function calls, can't break out of the loop.

**Classic For Loop**
- **Pros**: Fast and memory efficient; explicit control over iteration and can easily break or continue as needed.
- **Cons**: More verbose, manual index management can lead to off-by-one errors if not careful.

### Other Alternatives
In addition to these options, other methods of iterating over arrays in JavaScript include:

- **Array.prototype.map**: Creates a new array populated with the results of calling a provided function on every element.
- **Array.prototype.filter**: Creates a new array with all elements that pass the test implemented by the provided function.
- **Array.prototype.reduce**: Executes a reducer function on each element of the array, resulting in a single output value.

Each alternative has unique use cases based on the requirement, like transforming data, filtering arrays, or accumulating results. Thus, selecting the appropriate method hinges on the performance characteristics required and the coding style preferences of the team.

Related benchmarks:

for in vs for of test (version: 2)

Comparing performance of: for of vs for in vs for each vs for let

Created: one year ago by: Registered User

Jump to the latest result

for of

for in

for each

for let

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):