Benchmark: Copy object using reduce Object.entries vs Object.keys + extra check for loop

HTML Preparation code:

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

Script Preparation code:

var params = {a: 1, b: 2, c: 3, d: 4};

Tests:

Reduce using Object.entries
const p = Object.entries(params).reduce((acc, [key, value]) => { acc[key] = value; return acc; }, {});
Reduce using Object.keys
const p = Object.keys(params).reduce((acc, key) => { acc[key] = params[key]; return acc; }, {});
Object.keys and for loop
const acc = {}; for (let i = 0, keys = Object.keys(params); i < keys.length; i++) { acc[keys[i]] = params[keys[i]]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce using Object.entries
Reduce using Object.keys
Object.keys and for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: yesterday)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 YaBrowser/24.10.0.0 Safari/537.36

Browser/OS: Yandex Browser 24 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce using Object.entries	5571882.0 Ops/sec
Reduce using Object.keys	15454313.0 Ops/sec
Object.keys and for loop	15534380.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated yesterday):

LLMs can make mistakes. Check important info.

The provided benchmark evaluates various methods for copying an object in JavaScript, using different approaches to iterate over the object's properties. The main options being compared are:

1. **Using `Object.entries()` with `reduce()`:**
   - **Benchmark Definition:** 
     ```javascript
     const p = Object.entries(params).reduce((acc, [key, value]) => {
         acc[key] = value;
         return acc;
     }, {});
     ```
   - **Pros:** 
     - Utilizes the `Object.entries()` method, which returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This can make the intention clear by showcasing that both keys and values are explicitly handled.
     - The `reduce()` method is functional and can be elegant for transforming data.
   - **Cons:** 
     - The overhead of creating an intermediate array of entries, which can be slightly less efficient in terms of memory and performance.
     - Not as straightforward for those unfamiliar with functional programming concepts.
   - **Performance:** 
     - This approach resulted in **5,571,882 executions per second**, making it the slowest of the options tested.

2. **Using `Object.keys()` with `reduce()`:**
   - **Benchmark Definition:**
     ```javascript
     const p = Object.keys(params).reduce((acc, key) => {
         acc[key] = params[key];
         return acc;
     }, {});
     ```
   - **Pros:**
     - `Object.keys()` returns an array of a given object’s own enumerable property names, and using `reduce()` maintains a functional style.
     - More straightforward than `Object.entries()`, as it focuses solely on keys, making it easier for some developers to read and understand.
   - **Cons:**
     - Similar to the `Object.entries()` method, this approach is less efficient compared to a direct loop due to the intermediate array of keys.
   - **Performance:**
     - Achieved **15,454,313 executions per second**, making it the second-fastest option.

3. **Using `Object.keys()` with a traditional `for` loop:**
   - **Benchmark Definition:**
     ```javascript
     const acc = {};
     for (let i = 0, keys = Object.keys(params); i < keys.length; i++) {
         acc[keys[i]] = params[keys[i]];
     }
     ```
   - **Pros:**
     - The traditional `for` loop is highly optimized and has a lower overhead since it avoids creating intermediate data structures.
     - Performance with `for` loops is often superior in scenarios like this due to reduced function call overheads, leading to faster execution.
   - **Cons:**
     - Slightly less elegant and concise than functional programming approaches. It may require more boilerplate code and be less expressive.
   - **Performance:**
     - Recorded **15,534,380 executions per second**, making it the most efficient method in this benchmark.

### Other Considerations:
- **Alternatives:** 
  - While the benchmark compares these three specific methods, there are different ways to copy objects in JavaScript, such as using `Object.assign()` or spreading syntax `{...params}` for shallow copies. However, these methods aren't tested in this benchmark.
  - For deep object copying, external libraries like Lodash with its `_.cloneDeep()` method could be utilized, although this was not within the scope of the current benchmark.

### Summary:
The benchmark effectively highlights the trade-offs between methods of copying an object in JavaScript, focusing on performance and readability. The traditional `for` loop method is the fastest while still being clear about its functionality, while using `reduce()` with `Object.entries()` showcases a more functional programming approach, albeit at a performance cost. The tests demonstrate not just raw speed, but also the importance of choosing the right approach based on use case and developer familiarity.

Related benchmarks:

Copy object using reduce Object.entries vs Object.keys + extra check for loop (version: 2)

Comparing performance of: Reduce using Object.entries vs Reduce using Object.keys vs Object.keys and for loop

Created: yesterday by: Registered User

Jump to the latest result

Reduce using Object.entries

Reduce using Object.keys

Object.keys and for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated yesterday):