Benchmark: Performance of JavaScript .forEach vs for in

Script Preparation code:

function generateTestObject() {
  const result = {};
  for (let i = 0; i < 10000; ++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 }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 hours 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

Test name	Executions per second
Object.entries()	399.1 Ops/sec
for in	384.0 Ops/sec
for in with variable	382.7 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided compares the performance of three different approaches to iterating over the properties of a JavaScript object by testing two key structures: the `for...in` loop and the method `Object.entries()`. Below are explanations of the approaches being tested, their advantages and disadvantages, and other relevant considerations.

### Benchmark Approaches:

1. **Using `Object.entries()` with `.forEach()`**:
   ```javascript
   const object = generateTestObject();
   Object.entries(object).forEach(([key, value]) => {
       const test = key + '' + value;
   });
   ```
   - **Description**: This approach utilizes the `Object.entries()` method to convert the object's properties into an array of key-value pairs. It then iterates over this array with the `.forEach()` method, which takes a callback function. The callback destructures each key-value pair from the array.
   - **Pros**:
     - Readability: The syntax is clear and easier to understand for most developers.
     - Destructuring: Gives immediate access to both key and value within the loop.
   - **Cons**:
     - Slightly slower performance compared to traditional loops due to the overhead of creating an array and the array methods.
     - May not be suitable for performance-critical applications with larger objects.

2. **Using `for...in` Loop**:
   ```javascript
   const object = generateTestObject();
   for(key in object) {
       const test = key + '' + object[key];
   }
   ```
   - **Description**: The `for...in` loop iterates directly over the keys of the object.
   - **Pros**:
     - Simplicity: Directly works on the object without additional overhead.
     - Performance: Often faster than methods that involve array creation, especially in scenarios with large datasets.
   - **Cons**:
     - Readability: If not documented well, it may cause confusion as it iterates over keys without showing values directly.
     - Enumerability: It includes properties from the object's prototype chain unless filtered, which might lead to unexpected behavior.

3. **Using `for...in` Loop with Variable for Value**:
   ```javascript
   const object = generateTestObject();
   for(key in object) {
       const value = object[key];
       const test = key + '' + value;
   }
   ```
   - **Description**: Similar to the previous `for...in` approach, but this one first retrieves the value associated with each key inside the loop.
   - **Pros**:
     - Avoids repeated lookups: By storing the value in a variable, it improves code efficiency when the value is accessed multiple times or used in further calculations.
   - **Cons**:
     - Still shares the cons of the `for...in` loop, including potential issues with prototype chain properties.

### Benchmark Results:

In the benchmark results provided, the **"for in with variable"** method achieved the highest executions per second (approximately 521.88), showing that this method is currently the most performance-efficient for the object size tested. The **"Object.entries()"** method performed slightly slower (approximately 517.99), while the simple **"for in"** loop was the slowest (approximately 503.59).

### Additional Considerations:
- **Performance Context**: Performance can vary depending on the size of the object being processed and the JavaScript engine being used. The results indicate how JavaScript engines optimize different operations, which may lead to varied outcomes across different browsers or environments.
- **Alternative Object Iteration Methods**: Other alternatives for iterating through object properties include:
  - **`Object.keys()`**: Similar to `Object.entries()`, but returns only an array of keys, offering flexibility in how values are accessed.
  - **`Object.values()`**: Another method that retrieves values directly, simplifying the iteration if keys are not necessary.
  - **`forEach` with `Object.keys(object).forEach(...)`**: Combines the array method with keys to iterate, but at a cost of array creation overhead.
  - **`Map` Structure**: If order and key types are essential, using a `Map` instead of an object might offer better performance characteristics through its built-in traversal methods.

By selecting the appropriate iteration method, developers can optimize their JavaScript code for both readability and performance.

Related benchmarks:

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

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

Created: 3 months ago by: Guest

Jump to the latest result

Object.entries()

for in

for in with variable

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