Benchmark: For in vs For of

Script Preparation code:

var obj = {a: 1, b: 2, c: 3, d: 4}

Tests:

for in
for (var x in obj) { console.log(x); }
for of
for (var x of Object.keys(obj)) { console.log(x); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 22 days ago)

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

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
for in	50800.5 Ops/sec
for of	28556.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**What is being tested?**

The provided JSON represents two test cases: `for in` and `for of`. These are both JavaScript loops that iterate over an object, but they differ in their syntax and implementation.

**Options being compared**

In this benchmark, we have two options:

1. **For...in**: This loop iterates over the properties of an object using the `in` keyword.
2. **For...of**: This loop is a newer syntax introduced in ECMAScript 2015 (ES6). It allows iterating over iterable objects, such as arrays or objects, without needing to specify the iteration variable.

**Pros and Cons**

### For...in

Pros:

* Widespread support across older browsers and JavaScript engines.
* Can be used with any object that supports the `in` operator.
* Simple syntax.

Cons:

* Can be slower due to its overhead in certain implementations (e.g., Firefox 66).
* May not work as expected with certain types of objects, such as arrays.

### For...of

Pros:

* Faster execution times in modern browsers and JavaScript engines.
* Allows for more concise code.
* Works well with arrays and other iterable objects.

Cons:

* Requires support for ES6 syntax, which may not be available in older browsers or environments.
* May require additional setup (e.g., using `Object.keys()` to create an array-like object).

**Library usage**

Neither of the two loops uses a dedicated library. Instead, they rely on the built-in JavaScript features.

**Special JS feature or syntax**

The test case for **For...of** utilizes the new `for...of` loop syntax, which was introduced in ES6. This syntax is not supported by older browsers and may require explicit transpilation or polyfills to run in those environments.

**Benchmark preparation code**

The provided script preparation code creates a simple object `obj` with four properties (`a`, `b`, `c`, and `d`). This object serves as the input for both loops, ensuring that they are tested on the same data structure.

**Other alternatives**

If these two options were not being compared, alternative loop constructs could be used to iterate over objects, such as:

1. **Using array methods**: In modern browsers, you can use `Array.prototype.forEach()` or other array methods to achieve similar results.
2. **For...each**: Some older browsers and JavaScript engines support the `for...each` loop construct, which is similar to `for...in`, but with some additional features.

However, in this specific benchmark, the focus is on comparing two distinct loop constructs: `for...in` and `for...of`.

Related benchmarks:

For in vs For of (version: 0)

Comparing performance of: for in vs for of

Created: 8 years ago by: Guest

Jump to the latest result

for in

for of

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