Benchmark: merge vs mergeWith vs object.assign vs spread12 vs test

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

lodash merge
var a = { a: 'oh', b: 'my', d: 'ss' }; var b = { c: 'goddess', d: 's2s' }; var c = _.merge(a, b); console.log('merge', c)
object.assign
var a = { a: 'oh', b: 'my', d: 'ss' }; var b = { c: 'goddess', d: 's2s' }; var c = Object.assign(a, b); console.log('assign', c)
spread
var a = { a: 'oh', b: 'my', d: 'ss' }; var b = { c: 'goddess', d: 's2s' }; var c = { ...a, ...b }; console.log('spread', c)
lodash mergeWith
var a = { a: 'oh', b: 'my', d: 'ss' }; var b = { c: 'goddess', d: 's2s' }; var c = _.mergeWith(a, b); console.log('mergeWith', c)
My test
var a = { a: 'oh', b: 'my', d: 'ss' }; var b = { c: 'goddess', d: 's2s' }; const customMerge = (a, b) => { const result = Object.assign({}, a, b); Object.keys(result).forEach(key => { if (typeof a[key] !== 'object' || typeof b[key] !== 'object') { return; } Object.assign(result, { [key]: Object.assign(a[key], b[key]) }); }); return result; }; var c = customMerge(a, b); console.log('customMerge', c)

Rendered benchmark preparation results:

Previous results

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

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Mac OS X 10.15.7

merge vs mergeWith vs object.assign vs spread12 vs test (version: 0)