Benchmark: Object.keys partial assign vs Spread Operator

Object.keys partial assign vs Spread Operator (version: 0)

Verify if is worth using object keys to get keys of a given object, that have some properties of another one, to assign to another object or just use spread operator modify the object partially.

Comparing performance of: Using Object keys and modifying the original object vs Using spread to merge objects vs Manually editing every single property (Wanna have this to prove why sometimes there is a manual assign for each property required)

Created: one year ago by: Guest

Jump to the latest result

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "vertical": [],
    "allowedPaymentMethods": [],
    "allowedBanks": [],
    "types": [],
    "partners": [],
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

var voucherQuantityAndPriceUpdated = {
    value: 120,
    quantity: 10
}

​x
 
var voucher = {    "single": false,    "applyOverTaxes": false,    "discountType": "1",    "value": 100,    "minimumAmount": 0,    "quantity": 1,    "suffixLength": 8,    "code": "IF5R0AFX",    "vertical": [],    "allowedPaymentMethods": [],    "allowedBanks": [],    "types": [],    "partners": [],    "startDate": "2020-10-21T00:00:00.000Z",    "endDate": "2020-10-21T00:00:00.000Z",    "applyed": false}​var voucherQuantityAndPriceUpdated = {    value: 120,    quantity: 10}

Tests:

Using Object keys and modifying the original object
const keysOfObjectWithUpdatedData = Object.keys(voucherQuantityAndPriceUpdated) for (key of keysOfObjectWithUpdatedData) { const updatedPropertyValue = voucher[key] = voucherQuantityAndPriceUpdated[key] }
const keysOfObjectWithUpdatedData = Object.keys(voucherQuantityAndPriceUpdated)

for (key of keysOfObjectWithUpdatedData) {
const updatedPropertyValue =
voucher[key] = voucherQuantityAndPriceUpdated[key]
}
Using spread to merge objects
const voucherUpdated = { ...voucher, ...voucherQuantityAndPriceUpdated }
const voucherUpdated = {
...voucher,
...voucherQuantityAndPriceUpdated
}
Manually editing every single property (Wanna have this to prove why sometimes there is a manual assign for each property required)
voucher.value = voucherQuantityAndPriceUpdated.value voucher.quantity = voucherQuantityAndPriceUpdated.quantity
voucher.value = voucherQuantityAndPriceUpdated.value
voucher.quantity = voucherQuantityAndPriceUpdated.quantity

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Using Object keys and modifying the original object
Using spread to merge objects
Manually editing every single property (Wanna have this to prove why sometimes there is a manual assign for each property required)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 10; Mobile; rv:109.0) Gecko/112.0 Firefox/112.0

Browser/OS: Firefox Mobile 112 on Android

View result in a separate tab

Test name	Executions per second
Using Object keys and modifying the original object	3548374.0 Ops/sec
Using spread to merge objects	734079.1 Ops/sec
Manually editing every single property (Wanna have this to prove why sometimes there is a manual assign for each property required)	155488528.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down the provided benchmark.

Benchmark Description

The benchmark is designed to compare three approaches for partially assigning properties from one object to another:

Using Object.keys() to get keys of an object and then iterating over those keys to assign values.
Using the spread operator (...) to merge two objects.
Manually editing every single property.

What is being tested?

The benchmark tests which approach is faster, assuming that the size of the voucher and voucherQuantityAndPriceUpdated objects are fixed.

Options Compared

Using Object.keys(): This method iterates over the keys of the voucher object using a for...of loop and then assigns values from voucherQuantityAndPriceUpdated to each key in the original object.
Using spread operator (...): This method creates a new object that is a copy of voucher, and then merges voucherQuantityAndPriceUpdated into this new object using the spread operator.
Manually editing every single property: This approach involves assigning individual properties from voucherQuantityAndPriceUpdated to corresponding keys in voucher.

Pros and Cons

Using Object.keys():
- Pros: Simple and easy to understand, can be used for arbitrary objects.
- Cons: May be slower than other approaches due to the overhead of iterating over keys.
Using spread operator (...):
- Pros: Concise and efficient, creates a new object that is a copy of voucher.
- Cons: May not work as expected if voucher has complex properties or if the order of properties matters.
Manually editing every single property:
- Pros: Can be faster for small objects, allows for direct assignment.
- Cons: Requires explicit loops and assignments, can lead to errors if not done correctly.

Library/Functionality

None mentioned in this benchmark definition. The benchmark focuses on comparing different approaches rather than utilizing external libraries or functions.

Special JS Feature/Syntax

No special JavaScript features or syntax are used in this benchmark. All code is standard JavaScript.

Other Considerations

The benchmark assumes that the size of the voucher and voucherQuantityAndPriceUpdated objects is fixed, which may not be the case in all scenarios.
The benchmark only compares three approaches, so other optimizations or techniques may not be tested.

Alternatives

Other methods for partially assigning properties from one object to another might include using Object.assign(), creating a new object with Object.create() and then assigning values, or using a library like Lodash.
Additional optimization techniques might involve caching results, memoizing expensive operations, or optimizing data structures used in the benchmark.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**Benchmark Description**

The benchmark is designed to compare three approaches for partially assigning properties from one object to another:

1. Using `Object.keys()` to get keys of an object and then iterating over those keys to assign values.
2. Using the spread operator (`...`) to merge two objects.
3. Manually editing every single property.

**What is being tested?**

The benchmark tests which approach is faster, assuming that the size of the `voucher` and `voucherQuantityAndPriceUpdated` objects are fixed.

**Options Compared**

1. **Using `Object.keys()`**: This method iterates over the keys of the `voucher` object using a `for...of` loop and then assigns values from `voucherQuantityAndPriceUpdated` to each key in the original object.
2. **Using spread operator (`...`)**: This method creates a new object that is a copy of `voucher`, and then merges `voucherQuantityAndPriceUpdated` into this new object using the spread operator.
3. **Manually editing every single property**: This approach involves assigning individual properties from `voucherQuantityAndPriceUpdated` to corresponding keys in `voucher`.

**Pros and Cons**

1. **Using `Object.keys()`**:
	* Pros: Simple and easy to understand, can be used for arbitrary objects.
	* Cons: May be slower than other approaches due to the overhead of iterating over keys.
2. **Using spread operator (`...`)**:
	* Pros: Concise and efficient, creates a new object that is a copy of `voucher`.
	* Cons: May not work as expected if `voucher` has complex properties or if the order of properties matters.
3. **Manually editing every single property**:
	* Pros: Can be faster for small objects, allows for direct assignment.
	* Cons: Requires explicit loops and assignments, can lead to errors if not done correctly.

**Library/Functionality**

None mentioned in this benchmark definition. The benchmark focuses on comparing different approaches rather than utilizing external libraries or functions.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in this benchmark. All code is standard JavaScript.

**Other Considerations**

* The benchmark assumes that the size of the `voucher` and `voucherQuantityAndPriceUpdated` objects is fixed, which may not be the case in all scenarios.
* The benchmark only compares three approaches, so other optimizations or techniques may not be tested.

**Alternatives**

* Other methods for partially assigning properties from one object to another might include using `Object.assign()`, creating a new object with `Object.create()` and then assigning values, or using a library like Lodash.
* Additional optimization techniques might involve caching results, memoizing expensive operations, or optimizing data structures used in the benchmark.

Related benchmarks: