Benchmark: for(const item of array) vs. for(const [k, v] of Object.entries(object))

Script Preparation code:

const ARRAY  = [{ key: 'a', foo: 'bar' }, { key: 'b', foo: 'bar' }, { key: 'c', foo: 'bar' }, { key: 'd', foo: 'bar' }];
const OBJECT = {'a': { foo: 'bar' }, 'b': { foo: 'bar' }, 'c': { foo: 'bar' }, 'd': { foo: 'bar' }};

Tests:

for(const item of array)
for(const item of ARRAY) { const test = true; }
for(const [k, v] of Object.entries(object))
for(const [k, v] of Object.entries(OBJECT)) { const test = true; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for(const item of array)
for(const [k, v] of Object.entries(object))

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

for(const item of array)

15.3M/s

for(const [k, v] of Object.entries(object))

3.2M/s

View exact numbers

Test name	Executions per second
✓ for(const item of array)	15,308,425 Ops/sec
for(const [k, v] of Object.entries(object))	3,188,438 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark compares the performance of two different iteration techniques in JavaScript, specifically:

1. **Using a `for...of` loop to iterate over an array**.
2. **Using a `for...of` loop in conjunction with `Object.entries()` to iterate over the properties of an object**.

### Options Being Compared

1. **Iteration Method 1: `for (const item of array)`**
   - This method iterates over the elements of an array directly using the `for...of` loop.
   - In the test case, it loops through the `ARRAY`, which contains objects with keys `key` and `foo`.

2. **Iteration Method 2: `for (const [k, v] of Object.entries(object))`**
   - This method iterates over the key-value pairs of an object using `Object.entries()`.
   - The `OBJECT` in the test case holds key-value pairs where keys are strings and values are objects containing a `foo` property.

### Performance Outcomes

Based on the latest benchmark results:

- **`for(const item of array)`**
  - Executions per second: **107,861,376.0**

- **`for(const [k, v] of Object.entries(object))`**
  - Executions per second: **7,931,163.0**

### Pros and Cons

#### Pros of Each Method

- **`for (const item of array)`**:
  - **Simplicity**: This approach is straightforward and easy to read.
  - **Performance**: It performs significantly better in this benchmark (over 13 times faster than the object iteration).

- **`for (const [k, v] of Object.entries(object))`**:
  - **Access to Keys and Values**: This method allows easy access to both keys and their associated values, providing flexibility when working with objects.
  - **Clarity in Structure**: Knowing the structure of key-value pairs alongside iterations aids in many use cases where direct access is necessary.

#### Cons of Each Method

- **`for (const item of array)`**:
  - **Limited Use Case**: This method is only applicable to arrays, which limits its functionality when working with other data structures.

- **`for (const [k, v] of Object.entries(object))`**:
  - **Performance Overhead**: The use of `Object.entries()` adds a layer of overhead due to the creation of an array of entries, which contributes to the slower performance.
  - **Complexity**: Slightly more complex due to destructuring; while not inherently difficult, it can be less readable for those unfamiliar with destructuring syntax.

### Other Considerations

- **Browser Optimization**: It's important to note that the range of execution speeds can vary based on browser optimizations for certain methods. The benchmark was conducted on Chrome 135; results may differ on other browsers or versions.
  
- **Alternative Approaches**:
  - **Using `forEach`**: You can also consider using `array.forEach()` for array iterations. However, it may be less performant than a simple `for` or `for...of` loop due to function context overhead.
  - **Object Keys**: Another common approach for object iteration is using a `for...in` loop. However, this has its own quirks, such as looping through inherited properties, which can be a source of bugs.
  - **Map and Set**: For collections requiring key-value pairs with ordered keys, using the `Map` object could provide better performance and usability while iterating.

### Conclusion

This benchmark clearly demonstrates the efficiency of direct array iteration over object property iteration using `Object.entries()`. Understanding these iteration methods and their performance implications can help software engineers choose the most appropriate approach for their specific cases, ultimately leading to improved performance in JavaScript applications.

for(const item of array) vs. for(const [k, v] of Object.entries(object)) (version: 1)

Comparing performance of: `for(const item of array) vs for(const [k, v] of Object.entries(object))`

Created: one year ago by: Registered User

Go to the latest result

for(const item of array)

for(const [k, v] of Object.entries(object))

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for(const item of array) vs. for(const [k, v] of Object.entries(object)) (version: 1)

Comparing performance of: for(const item of array) vs for(const [k, v] of Object.entries(object))

Created: one year ago by: Registered User

Go to the latest result

for(const item of array)

for(const [k, v] of Object.entries(object))

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: `for(const item of array) vs for(const [k, v] of Object.entries(object))`