Benchmark: for..in vs for loop using Object.keys

Script Preparation code:

var obj = {
  'a': 1,
  'b': 1,
  'c': 1,
  'd': 1,
  'e': 1,
  'f': 1,
  'g': 1,
  'h': 1,
  'i': 1,
  'j': 1,
  'k': 1,
  'l': 1,
  'm': 1,
  'n': 1,
  'o': 1,
  'p': 1,
  'q': 1,
  'r': 1,
  's': 1,
  't': 1,
  'u': 1,
  'v': 1,
  'w': 1,
  'x': 1,
  'y': 1,
  'z': 1,
  'aa': 1,
  'ba': 1,
  'ca': 1,
  'da': 1,
  'ea': 1,
  'fa': 1,
  'ga': 1,
  'ha': 1,
  'ia': 1,
  'ja': 1,
  'ka': 1,
  'la': 1,
  'ma': 1,
  'na': 1,
  'oa': 1,
  'pa': 1,
  'qa': 1,
  'ra': 1,
  'sa': 1,
  'ta': 1,
  'ua': 1,
  'va': 1,
  'wa': 1,
  'xa': 1,
  'ya': 1,
  'za': 1,
  'ab': 1,
  'bb': 1,
  'cb': 1,
  'db': 1,
  'eb': 1,
  'fb': 1,
  'gb': 1,
  'hb': 1,
  'ib': 1,
  'jb': 1,
  'kb': 1,
  'lb': 1,
  'mb': 1,
  'nb': 1,
  'ob': 1,
  'pb': 1,
  'qb': 1,
  'rb': 1,
  'sb': 1,
  'tb': 1,
  'ub': 1,
  'vb': 1,
  'wb': 1,
  'xb': 1,
  'yb': 1,
  'zb': 1
};

Tests:

for in
for (let i = 1000; i > 0; i--) { for (const key in obj) { console.log(key); } }
for loop with object keys
const keys = Object.keys(obj); for (let i = 1000; i > 0; i--) { for (let j = 0; j < keys.length; j ++) { console.log(keys[j]); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in
for loop with object keys

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for in	24.0 Ops/sec
for loop with object keys	24.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark is defined by the two test cases:

1. `for in`
2. `for loop with object keys` (using `Object.keys(obj)`)

Both test cases aim to iterate over a large object (`obj`) using a `for` loop. The difference lies in the way the object is iterated:

* `for in`: uses the `in` operator to iterate over the object's properties.
* `for loop with object keys`: uses the `Object.keys(obj)` method to get an array of the object's property names and then iterates over that array using a traditional `for` loop.

**Options Compared**

The two test cases compare the performance of:

1. **`for in`**: a legacy, object-specific iteration mechanism.
2. **`for loop with object keys`**: a more modern, JavaScript-agnostic approach using `Object.keys(obj)`.

**Pros and Cons**

**`for in`:**

Pros:

* Widely supported across browsers and platforms.
* Simple to implement.

Cons:

* Not designed for iteration over arrays or other non-object types.
* Can be slower due to the overhead of property iteration.
* May not work as expected when dealing with objects that have missing or duplicate properties.

**`for loop with object keys`:**

Pros:

* More efficient and modern way of iterating over objects.
* Works correctly even if the object has missing or duplicate properties.
* Less prone to browser quirks.

Cons:

* Requires the `Object.keys()` method, which may not be supported in older browsers or environments.
* May require additional setup for array iteration.

**Other Considerations**

* The `for in` approach is often considered legacy because it's not designed specifically for iteration. It's better suited for accessing object properties dynamically using bracket notation (e.g., `obj['prop']`).
* Using `Object.keys()` can lead to performance issues if the resulting array is too large, as JavaScript has to create a new array and iterate over it.
* The choice between `for in` and `for loop with object keys` ultimately depends on the specific requirements of your use case. If you need to support older browsers or environments, `for in` might be necessary.

**Alternative Approaches**

If performance is critical and you're using a modern JavaScript engine, consider using:

1. **`Array.prototype.forEach()`**: for iterating over arrays.
2. **`Array.prototype.entries()`**: for iterating over arrays while preserving the original key-value pairs.
3. **`Object.values()`** or **`Object.entries()`**: for iterating over object values or key-value pairs, respectively.

Keep in mind that these alternatives might not be suitable for every use case and may require additional setup or modifications to your existing code.

Related benchmarks:

for..in vs for loop using Object.keys (version: 0)

Comparing performance of: for in vs for loop with object keys

Created: 4 years ago by: Guest

Jump to the latest result

for in

for loop with object keys

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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