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: one month 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month 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

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: one month 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