Run results for: JavaScript spread operator vs Object.assign performance vs a custom merge object method

Run details:

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

Browser: Chrome 121

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Using the spread operator

8.6M/s

Using Object.assign

5.5M/s

Using custom merge method (Create a clone object)

1.5M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	8,640,652 Ops/sec
Using Object.assign	5,470,456 Ops/sec
Using custom merge method (Create a clone object)	1,495,925 Ops/sec

Script Preparation code:

var firstObject = {
    sampleData: 'Hello world'
}
var secondObject = {
    moreData: 'foo bar'
}
var merge = (def, opt) => {
    if (!opt) return def
    for (const key in def) {
        if (!Object.prototype.hasOwnProperty.call(opt, key) || opt[key] === undefined)
            opt[key] = def[key]
        else if (opt[key] === Object(opt[key]))
            opt[key] = merge(def[key], opt[key])
    }
    return opt
}

Tests:

Using the spread operator
const finalObject = { ...firstObject, ...secondObject }
Using Object.assign
const finalObject = Object.assign(firstObject, secondObject)
Using custom merge method (Create a clone object)
const finalObject = merge(firstObject, secondObject)