Benchmark: for in vs for of --

Script Preparation code:

var obj = new Object()
var keys = (new Array(10000)).fill(0).map((x, i) => { return i + 1 })
keys.forEach((x) => { obj['prop' + x] = x })

Tests:

for in
for (var key in obj) { console.log(obj[key]); }
for of
for (const [key, value] of Object.entries(obj)) { console.log(key, value) }

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark definition is a comparison between two approaches to iterate over an object: `for in` vs `for of`. The script preparation code creates an object with 10,000 properties (using `Array.prototype.fill()` and `Array.prototype.map()`) and populates it with numbers from 1 to 10,000.

**Options Compared**

The two options being compared are:

1. **`for in`**: This is a legacy way of iterating over objects in JavaScript. It uses the `in` operator to iterate over the object's properties (including those that aren't enumerable by default). The loop will also include inherited properties.
2. **`for of`** (specifically, with `Object.entries()`): This is a newer approach introduced in ECMAScript 2015 (ES6) for iterating over objects. It uses the `entries()` method to get an array-like object containing the key-value pairs of the object.

**Pros and Cons**

* **`for in`**:
	+ Pros: Simple and easy to understand.
	+ Cons:
		- May include inherited properties, which can be unwanted in some cases.
		- Can be slower due to the use of `in` operator and potential issues with property names.
* **`for of` (with `Object.entries()`)**:
	+ Pros:
		- Faster and more efficient than `for in`.
		- Excludes inherited properties, making it a better choice when dealing with objects that might have inherited properties.
		- Uses the newer syntax introduced in ES6, which is often preferred for its readability and maintainability.
	+ Cons: Can be less intuitive for developers who are not familiar with this syntax.

**Library and Special JS Features**

In this benchmark, no specific library is used. However, it's worth noting that `Object.entries()` was introduced in ECMAScript 2015 (ES6), which means that older browsers might not support this feature.

**Other Considerations**

When choosing between these two approaches, consider the following:

* If you're working with objects that have inherited properties and want to exclude them from iteration, use `for of` with `Object.entries()`.
* If simplicity and readability are more important than performance, stick with `for in`.

Now, let's look at the individual test cases.

**Individual Test Cases**

There are two test cases:

1. **`for in`**: This test case uses the legacy `for in` loop to iterate over the object.
2. **`for of` (with `Object.entries()`)**: This test case uses the newer `for of` syntax with `Object.entries()` to iterate over the object.

The latest benchmark result shows that:

* The `for in` approach is slower than `for of`.
* Both browsers (Firefox 116) show similar performance for each approach, but `for of` is still faster.

Related benchmarks:

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

for in vs for of

Comparing performance of: for in vs for of

Created: 2 years ago by: Guest

Jump to the latest result

for in

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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