Benchmark: JavaScript spread operator vs Object.assign performance, small objects v3

JavaScript spread operator vs Object.assign performance, small objects v3 (version: 0)

For small objects, 1 value change only

Comparing performance of: Using Object.assign vs Using the spread operator vs Using Object.assign (known change) vs Using the spread operator (known change) vs Using Object.assign (filtered) vs Using the spread operator (filter)

Created: 3 months ago by: Guest

Jump to the latest result

Tests:

Using Object.assign
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); const finalObject = Object.assign(firstObject, secondObject); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using the spread operator
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); const finalObject = { ...firstObject, ...secondObject }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign (known change)
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); let diff = {} diff[rnd] = secondObject[rnd]; const finalObject = Object.assign(firstObject, diff); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using the spread operator (known change)
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); let diff = {} diff[rnd] = secondObject[rnd]; const finalObject = { ...firstObject, ...diff }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign (filtered)
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) diff = Object.fromEntries(diff) const finalObject = Object.assign(firstObject, diff); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using the spread operator (filter)
const firstObject = {} const secondObject = {} for(let i = 1; i < 10; i++) firstObject[i] = Math.random(); for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 10); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) diff = Object.fromEntries(diff) const finalObject = { ...firstObject, ...diff }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using Object.assign
Using the spread operator
Using Object.assign (known change)
Using the spread operator (known change)
Using Object.assign (filtered)
Using the spread operator (filter)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test created on MeasureThat.net. The test compares the performance of three different approaches to merge two objects:

1. Using `Object.assign()`
2. Using the spread operator (`...`)
3. Using the spread operator with a known change (i.e., filtering out one property)

**Approach 1: Using `Object.assign()`**

This approach uses the `Object.assign()` method to merge the two objects. The first object is assigned all properties of the second object.

**Approach 2: Using the Spread Operator (`...`)**

This approach uses the spread operator (`...`) to create a new object with all properties from both objects. This approach does not require explicit iteration or filtering.

**Approach 3: Using the Spread Operator with a Known Change (Filtering)**

This approach uses the spread operator (`...`) and filters out one property using `Object.entries()`, `filter()`, and `Object.fromEntries()`.

**Benchmark Results**

The latest benchmark results show performance variations between the three approaches on different devices running Chrome 126:

* Using the spread operator with a known change (Filtering): fastest, averaging around 41136 executions per second
* Using the spread operator: slightly slower, averaging around 35891 executions per second
* Using `Object.assign()`: slowest, averaging around 58231 and 55762 executions per second

**Observations**

The results suggest that using the spread operator with filtering (Approach 3) is the fastest method, followed by the simple spread operator (Approach 2), and then `Object.assign()` (Approach 1). The performance difference between these approaches is significant, indicating that the specific implementation choice can have a substantial impact on performance.

**Recommendation**

Based on these results, if performance is critical, using the spread operator with filtering (Approach 3) might be the best choice. However, it's essential to consider other factors, such as code readability and maintainability, when selecting an implementation method.

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
Using Object.assign	35891.4 Ops/sec
Using the spread operator	41136.6 Ops/sec
Using Object.assign (known change)	58231.6 Ops/sec
Using the spread operator (known change)	59201.1 Ops/sec
Using Object.assign (filtered)	55669.3 Ops/sec
Using the spread operator (filter)	55763.0 Ops/sec

Related benchmarks:

JavaScript spread operator vs Object.assign performance, small objects v3 (version: 0)

For small objects, 1 value change only

Comparing performance of: Using Object.assign vs Using the spread operator vs Using Object.assign (known change) vs Using the spread operator (known change) vs Using Object.assign (filtered) vs Using the spread operator (filter)

Created: 3 months ago by: Guest

Jump to the latest result

Using Object.assign

Using the spread operator

Using Object.assign (known change)

Using the spread operator (known change)

Using Object.assign (filtered)

Using the spread operator (filter)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):