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: 2 years ago by: Guest

Go 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

Latest run results:

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

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

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Using Object.assign (known change)

13K/s

Using Object.assign (filtered)

13K/s

Using Object.assign

13K/s

Using the spread operator (known change)

13K/s

Using the spread operator (filter)

13K/s

Using the spread operator

12K/s

View exact numbers

Test name	Executions per second
✓ Using Object.assign (known change)	13,418 Ops/sec
Using Object.assign (filtered)	13,113 Ops/sec
Using Object.assign	12,977 Ops/sec
Using the spread operator (known change)	12,944 Ops/sec
Using the spread operator (filter)	12,631 Ops/sec
Using the spread operator	12,422 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Go 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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)`