Benchmark: Performance of JavaScript .forEach vs for in 3

Script Preparation code:

function generateTestObject() {
  const result = {};
  for (let i = 0; i < 1000; ++i) {
    result['v'+i] = i
  }
  return result;
}

Tests:

Object.entries()
const object = generateTestObject(); Object.entries(object).forEach(([key, value]) => { const test = key + '' + value })
for in
const object = generateTestObject(); for(key in object){ const test = key + '' + object[key] }
for in with variable
const object = generateTestObject(); for(key in object){ const value = object[key] const test = key + '' + value }
Object.entries() for of
const object = generateTestObject(); for(const [key, value] of Object.entries(object)){ const test = key + '' + value }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.entries()
for in
for in with variable
Object.entries() for of

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/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.entries()	7816.5 Ops/sec
for in	6821.5 Ops/sec
for in with variable	6946.6 Ops/sec
Object.entries() for of	8109.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON evaluates the performance of different JavaScript methods for iterating over the properties of an object. Specifically, it compares the following approaches:

1. **Using `Object.entries()` with `forEach`**
   ```javascript
   Object.entries(object).forEach(([key, value]) => {
       const test = key + '' + value;
   });
   ```
   - **Pros**: This approach is more expressive, allowing you to directly work with both keys and values in an intuitive manner using destructuring.
   - **Cons**: It may introduce some overhead due to the need to convert the object into an array of entries, which can be less efficient for larger objects.

2. **Using a `for...in` loop**
   ```javascript
   for (key in object) {
       const test = key + '' + object[key];
   }
   ```
   - **Pros**: The `for...in` loop is straightforward and does not require generating an intermediate array; it directly iterates over the keys of the object.
   - **Cons**: It may iterate over properties that are inherited from the object's prototype, which could lead to unexpected behavior if not managed correctly.

3. **Using `for...in` with variable assignment**
   ```javascript
   for (key in object) {
       const value = object[key];
       const test = key + '' + value;
   }
   ```
   - **Pros**: This version eliminates repeated lookups of the property value by storing it in a variable, which can improve performance in cases with a large number of iterations.
   - **Cons**: Like the simple `for...in` loop, it may also iterate over inherited properties.

4. **Using `Object.entries()` with `for...of`**
   ```javascript
   for (const [key, value] of Object.entries(object)) {
       const test = key + '' + value;
   }
   ```
   - **Pros**: This method provides a clean syntax and direct access to keys and values without the need for an additional loop inside. It iterates over the object's own properties, avoiding issues related to inherited properties.
   - **Cons**: Similar to the first item, it requires generating an array of entries, which could increase overhead compared to a direct `for...in` loop.

### Benchmark Results Summary
The benchmark results, as shown, report the number of executions per second for each approach:

- **Object.entries() for of**: 8109.83
- **Object.entries()**: 7816.53
- **for in with variable**: 6946.62
- **for in**: 6821.51

From these results, we can observe that the `Object.entries()` used with `for...of` is the most efficient option in this specific benchmark, followed by the regular `Object.entries()` approach. The `for...in` variants perform the least efficiently, which may suggest that even though they are typically faster due to less overhead, the specific implementation considerations in this benchmark may weigh against them.

### Other Considerations
1. **Use Case**: The choice of which iteration method to use can depend on the specific context of the application. For example, if you know that you're only iterating through owned properties, `Object.entries()` or `for...of` may be preferred for readability and clarity, while `for...in` might be used when dealing with small objects where performance differences are negligible.

2. **Performance Trade-offs**: For smaller objects, the performance may not be significantly different; however, as the size of the object increases, these differences can become more pronounced.

3. **Browser Compatibility**: While modern browsers support these features, developers must consider compatibility if their codebase or target audience requires support for older environments.

4. **Functional vs. Imperative Approaches**: The use of functional methods like `forEach` can often make the code more declarative at the cost of some performance in tight loops, which might be a consideration based on the team’s coding standards and the project requirements.

In summary, depending on your performance needs, readability preferences, and the specific characteristics of the data you are working with, you may choose one of these approaches over the others.

Related benchmarks:

Performance of JavaScript .forEach vs for in 3 (version: 1)

Comparing performance of: Object.entries() vs for in vs for in with variable vs Object.entries() for of

Created: 3 months ago by: Guest

Jump to the latest result

Object.entries()

for in

for in with variable

Object.entries() for of

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):