Benchmark: lodash merge vs object.assign vs spread 4

HTML Preparation code:

<script src='https://unpkg.com/deepmerge@4.0.0/dist/umd.js'></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<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 = $.extend( true, {}, a, b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Browser/OS: Chrome 77 on Windows

View result in a separate tab

Test name	Executions per second
lodash merge	77550.4 Ops/sec
object.assign	48394.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test on MeasureThat.net, which compares the performance of three different methods to merge two objects: `lodash.merge`, `$.extend`, and simple object assignment using the spread operator (`{...a, ...b}`).

**Options Compared**

1. **Lodash Merge**: Uses the `lodash.merge` function to merge two objects.
2. **jQuery Extend**: Uses the `$extend` method from jQuery to merge two objects.
3. **Spread Operator**: Simply assigns the properties of one object to another using the spread operator (`{...a, ...b}`).

**Why these options?**

The benchmark likely chose these three methods because they are widely used in JavaScript development and have different performance characteristics.

* `lodash.merge` is a popular utility function for merging objects, but it may incur additional overhead due to its feature set.
* `$extend` from jQuery is another common method for merging objects, but it may have dependencies on the jQuery library and might not be as lightweight as other options.
* The spread operator (`{...a, ...b}`) is a modern JavaScript feature that has gained popularity in recent years. Its performance is often compared to other object merging methods.

**Benchmark Results**

The latest benchmark results show that:

* `lodash.merge` outperforms `$extend` and the spread operator by a significant margin, indicating that `lodash.merge` might be the fastest option for this specific use case.
* The spread operator performs reasonably well, suggesting that it can be a viable alternative to other methods when performance is critical.

Keep in mind that these results may vary depending on the specific requirements of your application and the JavaScript engine being used.

Related benchmarks:

lodash merge vs object.assign vs spread 4 (version: 0)

Comparing performance of: lodash merge vs object.assign

Created: 5 years ago by: Guest

Jump to the latest result

lodash merge

object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):