Benchmark: Loop through object keys

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

let items = {
    one: {
        label: 'One'
    },
    two: {
        label: 'Two'
    },
    three: {
        label: 'Three'
    },
    four: {
        label: 'Four'
    }
}

function doStuff(e) {}

Tests:

for...in Loop
for (const key in items) { if (items.hasOwnProperty(key)) { doStuff(key) } }
Object.keys() with for
const keys = Object.keys(items); for (let i = 0; i < keys.length; i++) { doStuff(keys[i]) }
Object.entries() with for...of
for (const [key, value] of Object.entries(items)) { doStuff(key) }
Object.keys with for...of
for (const key of Object.keys(items)) { doStuff(key) }
Object.keys() with forEach
Object.keys(items).forEach(key => { doStuff(key) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...in Loop
Object.keys() with for
Object.entries() with for...of
Object.keys with for...of
Object.keys() with forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 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 Loop	65342544.0 Ops/sec
Object.keys() with for	137837184.0 Ops/sec
Object.entries() with for...of	9198728.0 Ops/sec
Object.keys with for...of	102728160.0 Ops/sec
Object.keys() with forEach	96794120.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark outlined in the provided JSON performs comparisons of different methods for looping through the keys of an object in JavaScript. The object under consideration, `items`, contains a few simple key-value pairs, where the keys are strings ("one", "two", "three", "four") and the values are objects with a single `label` property. The benchmark compares five different iterative techniques:

1. **for...in Loop**  
   ```javascript
   for (const key in items) {
       if (items.hasOwnProperty(key)) {
           doStuff(key);
       }
   }
   ```
   - **Pros**: The `for...in` loop accesses all enumerable properties of the object directly.
   - **Cons**: It may also iterate over properties inherited from the prototype chain unless filtered out using `hasOwnProperty`. This could introduce unexpected behavior if the object is not properly constrained.

2. **Object.keys() with for**  
   ```javascript
   const keys = Object.keys(items);
   for (let i = 0; i < keys.length; i++) {
       doStuff(keys[i]);
   }
   ```
   - **Pros**: This method generates an array of the object's own enumerable keys, thereby avoiding inherited properties. It allows for traditional indexing.
   - **Cons**: The intermediate creation of an array of keys could add some overhead in terms of performance, though it typically scales well.

3. **Object.entries() with for...of**  
   ```javascript
   for (const [key, value] of Object.entries(items)) {
       doStuff(key);
   }
   ```
   - **Pros**: This method returns an array of key-value pairs and allows destructuring directly in the loop. It enhances readability and conveys intent clearly.
   - **Cons**: If only keys are needed, this may be slightly overkill since it processes both keys and values.

4. **Object.keys() with for...of**  
   ```javascript
   for (const key of Object.keys(items)) {
       doStuff(key);
   }
   ```
   - **Pros**: A concise syntax compared to classic `for` loops. It avoids the need to manage indices, making it less error-prone and more readable.
   - **Cons**: Similar to the previous `Object.keys()` method, it incurs overhead from creating an array of keys.

5. **Object.keys() with forEach**  
   ```javascript
   Object.keys(items).forEach(key => {
       doStuff(key);
   });
   ```
   - **Pros**: The use of `forEach()` provides a functional approach, creating concise and readable code without explicit indexing.
   - **Cons**: This does not allow for early exits from the loop (e.g., using a `break` statement), which can limit control in certain situations compared to other looping methods.

### Benchmark Results
The benchmark results indicate performance differences among these approaches as measured by the number of executions per second:

- The **"Object.keys() with for"** approach shows the best performance results (137,837,184 executions per second), suggesting it's highly efficient for this operation.
- The **"Object.keys with for...of"** also performs well (about 102,728,160), showing that the modern ES6 syntax does not come with significant performance penalties.
- The other methods, including **`for...in`** and **`Object.entries() with for...of`**, demonstrate considerably lower performance, especially the `for...in` method and using `Object.entries()` which outputs values that are not leveraged.

### Other Considerations
- **Readability vs. Performance**: Often, the choice of method may boil down to a trade-off between code readability and performance. In performance-critical applications, the most efficient loop might be preferred, while in other cases, clearer code can enhance maintainability.
- **Browser Compatibility**: All the methods used in the benchmarks are widely supported in modern JavaScript environments, but older techniques like `for...in` are particularly well-supported across all JavaScript engines.
- **Functional vs. Imperative**: Some developers prefer functional programming paradigms (e.g., using `.forEach()`), while others may lean towards traditional imperatives (e.g., `for` loops) based on personal or team coding standards.

### Alternatives
Apart from the methods tested, other alternatives could include:
- **Manual iteration using `for` loops**: A classical approach that permits precise handling of iteration.
- **Using `reduce()`**: Although primarily for transforming arrays, it can be leveraged creatively to accumulate results while iterating through object keys.
- **Using libraries**: Libraries like Lodash offer functions such as `_.forEach()` which can provide additional utilities for collection traversal, and may also optimize performance in utility-heavy applications.

In conclusion, each of these techniques has its specific use cases, and the right choice often depends on the specifics of the task, as well as the desired balance between performance and code clarity.

Related benchmarks:

Loop through object keys (version: 1)

Comparing performance of: for...in Loop vs Object.keys() with for vs Object.entries() with for...of vs Object.keys with for...of vs Object.keys() with forEach

Created: 3 months ago by: Registered User

Jump to the latest result

for...in Loop

Object.keys() with for

Object.entries() with for...of

Object.keys with for...of

Object.keys() with forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):