Run results for: JavaScript spread operator vs Object.assign performance, small objects v3

Run details:

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

Browser: Chrome 126

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

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

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)

Run results for: JavaScript spread operator vs Object.assign performance, small objects v3

For small objects, 1 value change only

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)