Benchmark: lodash merge vs lodash assign vs Object.assign vs spread

HTML Preparation code:

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

Tests:

_.merge
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var c = _.merge(a, b);
_.assign
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var c = _.assign(a, b);
Object.assign
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var c = Object.merge(a, b);
Spread
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var c = { ...a, ...b };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.merge
_.assign
Object.assign
Spread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its various aspects.

**Benchmark Overview**

The MeasureThat.net website provides a microbenchmarking tool to compare the performance of different JavaScript functions for merging objects. The benchmark compares four methods: `_.merge`, `_.assign`, `Object.assign`, and the spread operator (`{ ...a, ...b }`).

**Test Cases**

Each test case consists of two variables `a` and `b`, with `a` containing properties `a` and `b`, and `b` containing property `c`. The goal is to merge these two objects into a new object.

1.  **_.merge**: This method merges the contents of two or more source objects into a new object.
2.  **_.assign**: Similar to `_.merge`, but returns the destination object, allowing for chaining multiple assignments.
3.  **Object.assign**: A built-in JavaScript function used for merging objects.
4.  **Spread**: The spread operator is a shorthand way of creating a new object from an existing one.

**Library and Purpose**

1.  **_ (Lodash)**: Lodash is a popular JavaScript library that provides utility functions, including `_.merge` and `_.assign`. These functions are used for merging objects.
2.  **Object.assign**: This is a built-in JavaScript function that merges the properties of two or more source objects into a new object.

**JavaScript Features**

1.  Spread Operator (`{ ...a, ...b }`): Introduced in ECMAScript 2018 (ES10), this feature allows creating a new object by merging the properties of two or more existing objects.
2.  Chaining (`_.assign(a, b)` vs `Object.assign(b, a)`): The `_ (Lodash)_` functions use a chaining approach for multiple assignments, whereas the built-in `Object.assign` function does not support chaining.

**Pros and Cons**

1.  **_.merge** and **_.assign**: These Lodash functions offer flexibility in merging objects, including handling arrays, null values, and custom merge strategies.
2.  **Object.assign**: Simple, lightweight, and well-supported by most browsers, but it can lead to unexpected behavior if not used carefully (e.g., when merging arrays or objects with `null` properties).
3.  **Spread Operator**: Offers a concise way of merging objects, with good browser support. However, its performance may vary depending on the size and complexity of the merged object.

**Benchmarking Considerations**

1.  **Microbenchmarking**: This benchmark is designed to measure the execution time of each method for a specific use case.
2.  **Device Platform**: The benchmark results are reported for Chrome 77 on macOS High Sierra, which might not be representative of other devices or browsers.
3.  **JavaScript Engines**: The performance differences between these methods may vary depending on the JavaScript engine used by the browser.

**Alternatives**

1.  **Manual Loop**: You can use a simple loop to merge two objects, but this approach is less concise and more error-prone than using one of the provided functions.
2.  **Other Merge Libraries**: If you need more advanced merge functionality (e.g., handling nested objects or arrays), you may consider using other JavaScript libraries like `merge-deep` or `lodash.merge`.
3.  **Native Implementation**: In some cases, writing a native implementation for merging objects might be the most efficient approach.

Latest run results:

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

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

Browser/OS: Chrome 77 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
_.merge	2863408.8 Ops/sec
_.assign	3723854.2 Ops/sec
Object.assign	0.0 Ops/sec
Spread	22364566.0 Ops/sec

Related benchmarks:

lodash merge vs lodash assign vs Object.assign vs spread (version: 0)

Comparing performance of: _.merge vs _.assign vs Object.assign vs Spread

Created: 5 years ago by: Guest

Jump to the latest result

_.merge

_.assign

Object.assign

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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