Benchmark: for-in vs object.keys (new)

Script Preparation code:

var obj = {
  'a': 1,
  'b': 1,
  'c': 1,
  'd': 1,
  'e': 1,
  'f': 1,
  'g': 1
};

Tests:

for-in
for (var i=10000; i > 0; i--) { for (var key in obj) { console.log(key, obj[key]); } }
Object.keys
for (var i=10000; i > 0; i--) { for (const [key, value] of Object.keys(obj)) { console.log(key, value); } }

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
for-in	3.1 Ops/sec
Object.keys	2.6 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares two different approaches to iterating over the properties of a JavaScript object: using a `for-in` loop and using `Object.keys()` in conjunction with a `for...of` loop.

### Approaches Compared
1. **for-in Loop**
   - **Code**: 
     ```javascript
     for (var i = 10000; i > 0; i--) {
         for (var key in obj) {
             console.log(key, obj[key]);
         }
     }
     ```
   - **Description**: The `for-in` loop iterates over the enumerable properties of an object. In this case, the `key` variable takes on the names of properties in the object `obj`.

2. **Object.keys() with for...of Loop**
   - **Code**: 
     ```javascript
     for (var i = 10000; i > 0; i--) {
         for (const [key, value] of Object.keys(obj)) {
             console.log(key, obj[key]);
         }
     }
     ```
   - **Description**: `Object.keys(obj)` returns an array of the object's own enumerable property names. The `for...of` loop iterates over this array, using destructuring to extract both `key` and `value` from the array of keys.

### Performance Results
- **for-in**: 3.08 executions per second
- **Object.keys**: 2.59 executions per second

In this benchmark, the `for-in` loop performed significantly better than the `Object.keys` approach.

### Pros and Cons

#### `for-in` Loop
- **Pros**:
  - Generally faster in this benchmark, as shown by the execution results.
  - Simpler syntax for directly accessing properties.
  
- **Cons**:
  - Less predictable when the object has a prototype chain, as it may iterate over inherited properties unless you specifically check with tools like `hasOwnProperty`.
  - Tends to be less safe in scenarios involving objects that may have properties added to their prototype chain.

#### `Object.keys()`
- **Pros**:
  - Only iterates over the object's own properties, providing a more predictable iteration.
  - Clearer intention of working with the object’s own keys.
  
- **Cons**:
  - Slightly slower due to the overhead of creating an intermediate array from `Object.keys()`.
  - Requires more code and destructuring to access values.

### Other Considerations
- **Browser and Environment Variability**: It’s worth noting that performance can vary significantly based on the JavaScript engine, the environment (e.g., node vs browser), and even the configuration of the machine being used for testing. This benchmark was conducted on a specific version of Chrome, which may yield different results than other browsers or versions.
  
- **Readability vs Performance**: While `for-in` can yield better performance, maintainability and clarity often take precedence. In many real-world scenarios, clarity of code is critical, and the `Object.keys()` approach is generally considered safer.

### Alternatives to Consider
- **`forEach` Method**: If the requirement is to iterate over an array of keys, one could also convert the object's keys into an array and use the built-in `forEach` method, but this also involves creating an intermediary array thereby introducing overhead.
  
  ```javascript
  Object.keys(obj).forEach(key => {
      console.log(key, obj[key]);
  });
  ```

- **`for...of` with `Object.entries`**: This provides both keys and values in a single pass, which can be more elegant.
  
  ```javascript
  for (const [key, value] of Object.entries(obj)) {
      console.log(key, value);
  }
  ```

In summary, this benchmark highlights the performance differences between two common object iteration techniques in JavaScript, providing valuable insights into the trade-offs between execution speed and code clarity.

Related benchmarks:

for-in vs object.keys (new) (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):