Benchmark: for-in vs object.keys vs object.values for objects without extra log

Script Preparation code:

function getObj(i) {
  return {
    'a': {
      id: 'a',
      num: 1
    },
    'b': {
      id: 'b',
      num: 1
    },
    'c': {
      id: 'c',
      num: 1
    },
    'd': {
      id: 'd',
      num: 1
    },
    'e': {
      id: 'e',
      num: 1
    },
    'f': {
      id: 'f',
      num: 1
    },
    'g': {
      id: 'g',
      num: 1
    },
    [i.toString()]: 1,
  };
};

Tests:

for-in
const r = []; for (var i=10000; i > 0; i--) { for (var key in getObj(i)) { r[i] = key; } } console.log(r.length)
Object.keys
const r = []; for (var i=10000; i > 0; i--) { Object.keys(getObj(i)).forEach(key => { r[i] = key; }); } console.log(r.length)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-in
Object.keys

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for-in	252.4 Ops/sec
Object.keys	318.1 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of different methods for iterating over the properties of an object in JavaScript: the `for...in` loop versus the `Object.keys` method.

### Benchmark Options

1. **for-in Loop**
   - *Test Case*: 
     ```javascript
     const r = [];
     for (var i = 10000; i > 0; i--) {
       for (var key in getObj(i)) {
         r[i] = key;
       }
     }
     console.log(r.length);
     ```

2. **Object.keys Method**
   - *Test Case*:
     ```javascript
     const r = [];
     for (var i = 10000; i > 0; i--) {
       Object.keys(getObj(i)).forEach(key => {
         r[i] = key;
       });
     }
     console.log(r.length);
     ```

### Pros and Cons

#### for-in Loop
- **Pros**:
  - Simple syntax that can directly iterate over the enumerable properties of an object.
  - Requires less boilerplate code as you don’t need to create an intermediate array of keys.

- **Cons**:
  - It also iterates over inherited enumerable properties (from the prototype chain), which can lead to unexpected results if not filtered.
  - Slower performance compared to `Object.keys` in most environments, as demonstrated by the benchmark results where `for-in` executed 252.42 operations per second.

#### Object.keys Method
- **Pros**:
  - Only iterates over the object's own properties, excluding any properties that might be inherited, providing cleaner and expected results.
  - Generally faster performance due to optimizations in modern JavaScript engines, as indicated by its higher execution rate of 318.13 operations per second in the benchmark.

- **Cons**:
  - Slightly more complex syntax since it creates an array of keys that you then need to iterate over with a method like `forEach`, though this is often negligible in practice.

### Other Considerations

- **Object.values / Object.entries**: Additional methods like `Object.values()` and `Object.entries()` can be used to retrieve property values or key-value pairs respectively. These methods provide flexibility depending on whether you need keys, values, or both during iteration.

- **Iterating Performance**: In scenarios where performance is critical (e.g., dealing with a large number of object properties or in performance-sensitive applications), using `Object.keys` is generally advisable based on this benchmark's results.

- **Code Readability**: Modern JS development highly values readability. Using `Object.keys` is often preferred by developers for its clarity about the intent to only iterate over own properties. The functional style of `forEach` can also be more expressive compared to traditional loops.

### Alternatives

In addition to the methods tested, other alternatives for iterating over object properties include:

- **Object.values()**: If you only need the values of the properties.
- **Object.entries()**: If both keys and values are needed together.
- **forEach with a `Map` or `Set`**: If you are using collections, these data structures provide methods to iterate over elements with built-in methods.

In summary, this benchmark highlights the performance differences between two common object-property iteration techniques in JavaScript. It suggests that while both methods are valid, `Object.keys` is generally the more performant and cleaner option for most scenarios.

Related benchmarks:

for-in vs object.keys vs object.values for objects without extra log (version: 1)

Comparing performance of: for-in vs Object.keys

Created: one year ago by: Guest

Jump to the latest result

for-in

Object.keys

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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