Run results for: JavaScript spread operator vs Object.assign performance, large objects v2

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: 3 months ago

Test name	Executions per second
Using the spread operator	2264.5 Ops/sec
Using Object.assign	2516.7 Ops/sec
Using Object.assign (known change)	7485.8 Ops/sec
Using the spread operator (known change)	6977.7 Ops/sec
Using Object.assign (filtered)	5733.0 Ops/sec
Using the spread operator (filter)	5475.5 Ops/sec

Tests:

Using the spread operator
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); const finalObject = { ...firstObject, ...secondObject }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); const finalObject = Object.assign(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 < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); 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 < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); 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 < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) 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 < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) 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, large objects v2

For large objects, 1 value change only

Using the spread operator

Using Object.assign

Using Object.assign (known change)

Using the spread operator (known change)

Using Object.assign (filtered)

Using the spread operator (filter)