Benchmark: foreach vs for const objects

HTML Preparation code:

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

Script Preparation code:

const data = {};
for (let i = 0; i < 10000; i++) {
  data[i] = {
    data: String.fromCharCode(97 + i),
    value: Math.floor(Math.random() * 100),
    isActive: Math.random() > 0.5
  };
}

Tests:

obj.values foreach
const allValues = Object.values(data); allValues.forEach((num) => { console.log(num.data); });
for const
for (const key in data) { const value = data[key]; console.log(value.data); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
obj.values foreach
for const

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Test name	Executions per second
obj.values foreach	12.5 Ops/sec
for const	12.4 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares two different JavaScript approaches to iterate over object properties: using `Object.values()` with `forEach`, and a traditional `for...in` loop.

### Benchmark Overview

1. **Benchmark Name**: "foreach vs for const objects"
2. **Objective**: To measure the performance of two approaches for iterating over an object in JavaScript.

### Test Cases Explained

1. **Test Case 1: `obj.values foreach`**
   - **Definition**:
     ```javascript
     const allValues = Object.values(data);
     allValues.forEach((num) => {
       console.log(num.data);
     });
     ```
   - **Explanation**: 
     - This test converts the object `data` into an array of its values using `Object.values(data)`, which returns an array of the values present in the object.
     - It then uses the `Array.prototype.forEach()` method to iterate over these values and log the `data` property of each value object.
   - **Pros**:
     - Cleaner and more modern syntax, which can enhance readability.
     - The `forEach` method is specifically an array method and is designed for iteration.
   - **Cons**:
     - Creates an intermediate array, which incurs additional memory overhead.
     - May have a slight performance disadvantage due to this extra step of array creation.

2. **Test Case 2: `for const`**
   - **Definition**:
     ```javascript
     for (const key in data) {
       const value = data[key];
       console.log(value.data);
     }
     ```
   - **Explanation**: 
     - This method uses a `for...in` loop to iterate directly over the keys in the object `data`.
     - For each key, it retrieves the corresponding value and logs its `data` property.
   - **Pros**:
     - More memory-efficient as it does not create an additional array; it directly accesses object properties.
     - Generally, can be faster for larger objects since it just iterates through the keys without extra transformations.
   - **Cons**:
     - Can lead to less readable code, especially if there are many nested properties or additional logic in the loop.
     - The `for...in` loop iterates over all properties, including inherited ones, which could introduce bugs if not careful (though `for...in` can be coupled with `hasOwnProperty` to mitigate this).

### Performance Results

According to the benchmark results:
- The `for const` test recorded **48.33 executions per second**.
- The `obj.values foreach` test recorded **47.22 executions per second**.

### Conclusion and Alternatives

In conclusion, this benchmark illustrates that while the `for...in` loop is slightly faster in this specific test case, both methods are acceptable depending on the situation.

#### Alternatives
- **`for...of` Loop**: This can be used with arrays but not directly with objects. You may need to convert objects to arrays first, which introduces similar overhead as `Object.values()`.
- **`map` Method**: For cases where you want to transform data while iterating, `map()` can be useful, but also introduces the need for array creation.
- **Traditional `for` Loop**: A standard `for` loop can iterate over an array of values if you've converted the object to an array format. This combines some of the flexibility and control of both methods.

Ultimately, which approach to choose may depend on the specific context of the application, the size of the data set, and performance requirements.

Related benchmarks:

foreach vs for const objects (version: 1)

Comparing performance of: obj.values foreach vs for const

Created: one year ago by: Guest

Jump to the latest result

obj.values foreach

for const

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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