Benchmark: for...of Object.keys vs for...of Object.keys.values

Script Preparation code:

let obj = {
        a: 1,
        b: [],
        c: 'abc',
        d: Symbol('test')
    },
    keys1 = Object.keys(obj),
    keys2 = keys1.values()

Tests:

...of Object.keys
for (let prop of keys1) console.log(prop)
...of Object.keys.keys
for (let prop of keys2) console.log(prop)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
...of Object.keys
...of Object.keys.keys

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
...of Object.keys	15776.6 Ops/sec
...of Object.keys.keys	19994014.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON evaluates the performance of two different methods of iterating over the keys of a JavaScript object using the `for...of` loop. Specifically, it compares using `Object.keys()` directly versus using `Object.keys()` followed by `.values()`. Below, I will describe the methodologies used, the libraries involved, the results, and other relevant considerations.

### Benchmarking Methodologies

1. **Method A: for...of Object.keys**
   - **Benchmark Definition**: `for (let prop of keys1) console.log(prop)`
   - **Test Name**: `...of Object.keys`
   - **Description**: This test iterates over the keys of the object using the array returned by `Object.keys(obj)`. The `Object.keys()` method returns an array of a given object's own enumerable property names (keys) in the same order as that provided by a `for...in` loop.

2. **Method B: for...of Object.keys.keys**
   - **Benchmark Definition**: `for (let prop of keys2) console.log(prop)`
   - **Test Name**: `...of Object.keys.keys`
   - **Description**: This test uses `keys1.values()` to derive an iterator over the values of the `keys1` array. The `values()` method returns a new array iterator object that contains the values for each index in the array, effectively creating an iterable sequence of the array's values.

### Pros and Cons of Each Approach

#### Method A (`Object.keys`)
- **Pros**:
  - Direct and straightforward approach to iterate over the keys.
  - Better readability and comprehension for many developers familiar with the `for...of` loop.

- **Cons**:
  - Performance may not be optimized compared to some newer iteration methods or approaches, depending on the JavaScript engine's optimizations.

#### Method B (`Object.keys.values`)
- **Pros**:
  - This method demonstrates an alternative approach to work with iterators. Using `.values()` could provide some level of abstraction and flexibility within certain contexts.
  - May be beneficial when you specifically want to obtain an iterator, which can be useful for handling large data sets or chains of operations.

- **Cons**:
  - Slightly more complex and potentially less intuitive than the direct approach.
  - Additional function call might introduce overhead, which can be detrimental to performance, especially for a large number of items.

### Benchmark Results Interpretation
The results show significant differences in performance for the two tested methods:

- **Method A (`...of Object.keys`)**: Achieved approximately **10,190** executions per second.
- **Method B (`...of Object.keys.keys`)**: Achieved approximately **28,467,942** executions per second.

This drastic difference indicates that method B is significantly more performant in this specific case, likely due to optimizations present in the JavaScript engine handling the `.values()` method on arrays.

### Alternatives
In JavaScript, there are several alternative approaches to iterating over object properties or their keys:

1. **for...in loop**: A traditional method that iterates over all enumerable properties (including prototype properties) of an object. However, it requires additional checks (like `hasOwnProperty`) to avoid inherited property issues.

```javascript
   for (let prop in obj) {
       if (obj.hasOwnProperty(prop)) {
           console.log(prop);
       }
   }
   ```

2. **Array methods**: You can combine `Object.keys()` with methods like `forEach()`, `map()`, etc., for functional-style programming.

```javascript
   Object.keys(obj).forEach(prop => {
       console.log(prop);
   });
   ```

3. **Object.entries()**: This method returns an array of a given object's own enumerable string-keyed property `[key, value]` pairs, allowing for more complex iterations directly.

```javascript
   Object.entries(obj).forEach(([key, value]) => {
       console.log(key);
   });
   ```

4. **forEach() on the values array**: Similar to using `for...of` with `Object.values()` directly, allowing for an iteration over property values rather than just keys.

In summary, the benchmark aimed to evaluate two specific methods for property key iteration, with results indicating a clear performance advantage for the method utilizing `.values()`. This comparison can provide valuable insights for developers regarding performance-critical situations and can inform them on best practices when iterating over object properties.

Related benchmarks:

for...of Object.keys vs for...of Object.keys.values (version: 1)

Comparing performance of: ...of Object.keys vs ...of Object.keys.keys

Created: 20 days ago by: Guest

Jump to the latest result

...of Object.keys

...of Object.keys.keys

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):