Benchmark: Object.entries: loop vs reduce

HTML Preparation code:

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

Script Preparation code:

const multiplier = {}
multiplier.millis = 1;
multiplier.seconds = 1000 * multiplier.millis;
multiplier.minutes = 60 * multiplier.seconds;
multiplier.hours = 60 * multiplier.minutes;
multiplier.days = 24 * multiplier.hours;
multiplier.weeks = 7 * multiplier.days;
multiplier.months = 4 * multiplier.weeks;
multiplier.years = 365 * multiplier.months;

const info = {hours: 5}

Tests:

reduce
const result = Object.entries(info).reduce((acc, [key, value]) => acc + (value * multiplier[key]), 0);
loop
let result = 0; for (const [key, value] of Object.entries(info)) { result += value * multiplier[key]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 137 on Ubuntu

View result in a separate tab

Test name	Executions per second
reduce	18522758.0 Ops/sec
loop	18788502.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark named "Object.entries: loop vs reduce" tests the performance of two different approaches to iterate over properties of an object and compute a weighted sum based on another object (the `multiplier`).

### Approaches Compared
1. **Reduce**:
   ```javascript
   const result = Object.entries(info).reduce((acc, [key, value]) => acc + (value * multiplier[key]), 0);
   ```
   - **Description**: This approach uses the `Array.prototype.reduce` method to accumulate a total by multiplying the values from the `info` object by the corresponding weights in the `multiplier` object.
   - **Pros**:
     - Concise and expressive syntax.
     - Functional programming style which can improve readability for those familiar with it.
   - **Cons**:
     - May be slightly less performant due to higher overhead from function calls and the closure created for the accumulator (`acc`).
     - Less intuitive for developers who are not comfortable with functional programming patterns.

2. **For-of Loop**:
   ```javascript
   let result = 0;
   for (const [key, value] of Object.entries(info)) {
       result += value * multiplier[key];
   }
   ```
   - **Description**: This approach explicitly iterates over an array of entries created from the `info` object using a for-of loop and accumulates the result in a variable.
   - **Pros**:
     - Clear and easy to understand for many developers, which aids in maintainability.
     - Generally better performance as the loop structure is simpler and incurs less overhead compared to the reduce method.
   - **Cons**:
     - More verbose than the reduce approach.
     - Less idiomatic in functional programming contexts.

### JavaScript Features
The benchmark employs Object.entries, which is a JavaScript feature that retrieves an array of an object’s key-value pairs. This method is part of ES8 (ECMAScript 2017) and allows for a cleaner way to iterate through objects. Note that both approaches use this method to obtain the iterable results, making it a common feature utilized in this benchmark.

### Alternatives
Beyond these two approaches, there are other methods for iterating over objects and performing calculations:

- **For-In Loop**:
   Although not shown in this benchmark, another common method to iterate over object properties is using a for-in loop.
   ```javascript
   for (const key in info) {
       if (info.hasOwnProperty(key)) {
           result += info[key] * multiplier[key];
       }
   }
   ```
   - **Pros**: Native to JavaScript and can be less verbose.
   - **Cons**: Requires checks (e.g., `hasOwnProperty`) to ensure that only the object’s own properties are accessed, which may add complexity.

- **Map Method**:
   If dealing with an array, using `map` could be an option:
   ```javascript
   const result = Object.entries(info).map(([key, value]) => value * multiplier[key]).reduce((acc, val) => acc + val, 0);
   ```
   - However, this is generally less efficient due to double iteration (first for mapping and second for reducing).

### Conclusion
In this benchmark, users can observe the performance differences of these two common methods of iteration in JavaScript. The results show that while both methods are fairly comparable, the for-of loop outperformed the reduce method in the tested conditions, illustrating the balance between readability and performance in JavaScript coding practices. The choice depends on the specific context, preferences for functional versus imperative programming styles, and performance needs.

Related benchmarks:

Object.entries: loop vs reduce (version: 1)

Comparing performance of: reduce vs loop

Created: one year ago by: Guest

Jump to the latest result

reduce

loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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