Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
lodash merge vs object.assign vs spread 2
(version: 0)
Comparing performance of:
lodash merge vs object.assign vs spread
Created:
6 years ago
by:
Guest
Jump to the latest result
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 = { "backgroundColor": "transparent", "color": "#C8C6C4", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "cursor": "pointer", ":focus": { "outline": 0, "bla": true, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; var b = { "backgroundColor": "transparent", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "color": "#C8C6C4", "cursor": "pointer", ":focus": { "outline": 0, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; var c = _.merge(a, b);
object.assign
var a = { "backgroundColor": "transparent", "color": "#C8C6C4", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "cursor": "pointer", ":focus": { "outline": 0, "bla": true, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; var b = { "backgroundColor": "transparent", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "color": "#C8C6C4", "cursor": "pointer", ":focus": { "outline": 0, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; var c = Object.assign(a, b);
spread
var a = { "backgroundColor": "transparent", "color": "#C8C6C4", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "cursor": "pointer", ":focus": { "outline": 0, "bla": true, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; var b = { "backgroundColor": "transparent", "borderWidth": "2px", "borderStyle": "solid", "borderColor": "transparent", "borderRadius": "50%", "height": "3.2rem", "minWidth": "3.2rem", "padding": "0", "color": "#C8C6C4", "cursor": "pointer", ":focus": { "outline": 0, "blaaaa": true }, ":hover": { "color": "#A6A7DC", "backgroundColor": "transparent", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } }, ":focus-visible": { "color": "#A6A7DC", "backgroundColor": "transparent", "borderColor": "#A6A7DC", "& .ui-icon__filled": { "display": "block" }, "& .ui-icon__outline": { "display": "none" } } }; /** * Simple object check. * @param item * @returns {boolean} */ function isObject(item) { return (item && typeof item === 'object' && !Array.isArray(item)); } /** * Deep merge two objects. * @param target * @param ...sources */ function mergeDeep(target, ...sources) { if (!sources.length) return target; const source = sources.shift(); if (isObject(target) && isObject(source)) { for (const key in source) { if (isObject(source[key])) { if (!target[key]) Object.assign(target, { [key]: {} }); mergeDeep(target[key], source[key]); } else { Object.assign(target, { [key]: source[key] }); } } } return mergeDeep(target, ...sources); } var c = mergeDeep({}, a, b);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
lodash merge
object.assign
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
A challenging problem! After analyzing the code, I noticed that the `mergeDeep` function is being used to merge objects, but it's not clear how it's related to the benchmark results. However, I can make an educated guess. The `mergeDeep` function seems to be designed to merge two objects recursively, and its performance might be impacted by the number of nested objects being merged. Looking at the benchmark results, I notice that three different benchmarks are reported: 1. "object.assign" - a built-in JavaScript method for merging objects 2. "lodash merge" - a popular utility function from the Lodash library 3. "spread" - which is likely related to the spread operator (`...`) used in the `mergeDeep` implementation The key insight here is that the `mergeDeep` function uses the spread operator (`...`) to merge objects, and this operator has performance implications. Assuming that the `mergeDeep` function is being called with a large number of nested objects, it's likely that the spread operator is being used extensively, leading to slower performance compared to built-in methods like `object.assign`. Therefore, I'm going to take a guess that the benchmark result for "spread" is actually related to the performance impact of using the spread operator in the `mergeDeep` function. Am I correct?
Related benchmarks:
lodash merge vs object.assign vs spread new obj
lodash.assign vs object.assign vs spread
lodash merge vs object.assign vs spread overwriting one property
lodash merge vs object.assign vs spread (no intermediate vars)
lodash assign vs object.assign vs spread operator - variable and constant
Comments
Confirm delete:
Do you really want to delete benchmark?