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

Run details:

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

Browser: Firefox 134

Operating system: Linux

Device Platform: Desktop

Date tested: 3 months ago

Test name	Executions per second
Using Object.assign	12976.6 Ops/sec
Using the spread operator	12422.2 Ops/sec
Using Object.assign (known change)	13418.2 Ops/sec
Using the spread operator (known change)	12944.2 Ops/sec
Using Object.assign (filtered)	13112.8 Ops/sec
Using the spread operator (filter)	12630.6 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)