Benchmark: Object.keys vs Object.entries with filtering properties

Script Preparation code:

const props = {
  href: '/',
  class: 'link',
  'data-test-id': 'test',
  'data-test-name': '테스트',
};

Tests:

Object.keys
Object.keys(props).reduce((acc, key) => { if (key.indexOf('data-test-') !== -1) { acc[key] = props[key]; } return acc; }, {});
Object.entries
Object.entries(props).reduce((acc, [key, value]) => { if (key.indexOf('data-test-') !== -1) { acc[key] = value; } return acc; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.keys
Object.entries

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Object.keys

17.5M/s

Object.entries

16.5M/s

View exact numbers

Test name	Executions per second
✓ Object.keys	17,543,898 Ops/sec
Object.entries	16,450,616 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares the performance of two different methods of accessing object properties in JavaScript: `Object.keys()` and `Object.entries()`. The objective is to assess which method is more efficient when filtering object properties based on specific criteria—in this case, properties that contain the string `'data-'`.

### Options Compared:
1. **Object.keys() with reduce**
   - **Implementation**: 
     ```javascript
     Object.keys(props).reduce((acc, key) => {
       if (key.indexOf('data-') !== -1) {
         acc[key] = props[key];
       }
       return acc;
     }, {});
     ```
   - **Test Name**: Object.keys

2. **Object.entries() with filter**
   - **Implementation**: 
     ```javascript
     Object.fromEntries(
       Object.entries(props).filter(([key, _value]) => key.indexOf('data-') !== -1),
     );
     ```
   - **Test Name**: Object.entries

### Pros and Cons of Each Approach:

1. **Object.keys() with reduce**
   - **Pros**:
     - Directly retrieves only the keys of the object, which may lead to slightly faster performance when only keys are needed.
     - More flexible in terms of subsequent operations, as it allows for custom accumulation behavior using `reduce`.
   - **Cons**:
     - Requires an additional step of creating an accumulator object and manually adding filtered properties, which can add overhead.
     - Slightly less readable for this specific use case, as it combines key retrieval with logic for creating a new object.

2. **Object.entries() with filter**
   - **Pros**:
     - Allows direct access to both keys and values, which can be advantageous for more complex filtering criteria.
     - The use of `filter` provides a more declarative style, which can enhance readability and maintainability.
     - The final conversion to an object is neatly handled by `Object.fromEntries()`, making the intent clear.
   - **Cons**:
     - Iterating over both keys and values may introduce slight performance overhead compared to iterating over keys alone.
     - If only keys are needed, this approach could be seen as less efficient.

### Other Considerations:
- **Performance**: The benchmark results indicate a significant performance difference between the two methods. `Object.keys()` achieved approximately 32.83 million executions per second, while `Object.entries()` reached about 11.71 million. This disparity suggests that for this particular use case—filtering properties based solely on keys—`Object.keys()` is more efficient.
  
- **Usability**: Depending on the specific needs of your application, the choice between these methods can affect both performance and code readability. Choosing the more straightforward method may outweigh the slight performance gain in situations where maintainability is a concern.

### Other Alternatives:
- **Looping through properties manually**: One could alternatively loop through the object properties using a `for...in` loop and manually check against the criteria, but this approach can introduce additional complexity related to prototype properties.
  
- **Using Object.values()**: If only the values are required after filtering based on keys, `Object.values()` could be paired with `Object.keys()` or `Object.entries()` followed by filtering.

Overall, while `Object.keys()` shows better performance for this specific benchmark, the choice of method should also be informed by factors such as code maintainability, readability, and the specific requirements of the task at hand.

Object.keys vs Object.entries with filtering properties (version: 4)

Comparing performance of Object.keys vs Object.entries

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

Created: one year ago by: Registered User

Go to the latest result

Object.keys

Object.entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.keys vs Object.entries with filtering properties (version: 4)

Comparing performance of Object.keys vs Object.entries

Comparing performance of: Object.keys vs Object.entries

Created: one year ago by: Registered User

Go to the latest result

Object.keys

Object.entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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