Benchmark: lodash merge vs object.assign vs spread vs deepMerge util

HTML Preparation code:

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

Script Preparation code:

var deepMerge = (
  target,
  source,
) => {
  var result = target;

  Object.keys(source)
    .forEach((key) => {
      if (Array.isArray(source[key])) {
        if (source[key].length > 0) {
          result[key] = [...source[key]];
        } else {
          delete result[key];
        }
      } else if (_.isObject(source[key]) && _.isObject(target[key])) {
        result[key] = deepMerge({ ...target[key] }, source[key]);
      } else {
        result[key] = source[key];
      }
    });

  return result;
};

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
object.assign
spread
deepMerge

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):

LLMs can make mistakes. Check important info.

I'll break down what's tested in this benchmark, the options compared, their pros and cons, and other considerations.

**Benchmarked Libraries and Methods:**

1. **`_.merge()` (Lodash):** A utility function for merging two objects into one. It recursively merges properties from both objects.
2. **`Object.assign()`:** A built-in JavaScript method for copying the values of an object to a target object.
3. **Spread Operator (`{ ... }`)**: A syntax feature introduced in ECMAScript 2018 (ES9) that allows creating a new object by spreading properties from an existing object or objects.

**Test Cases:**

The benchmark compares these four methods for merging two objects:

* `_.merge()`: Merges the objects recursively.
* `Object.assign()`: Copies the values of one object to another, but can lead to shallow copying issues (e.g., arrays are not copied correctly).
* Spread Operator (`{ ... }`): Creates a new object by spreading properties from an existing object or objects.

**Pros and Cons:**

1. **`.merge()` (Lodash)**:
	* Pros:
		+ Recursively merges properties, ensuring consistency.
		+ Handles arrays and nested objects correctly.
	* Cons:
		+ Requires the Lodash library to be included.
2. **`Object.assign()`:**
	* Pros:
		+ Built-in method, no additional libraries needed.
		+ Fast and lightweight.
	* Cons:
		+ May not handle complex merging scenarios (e.g., arrays with objects).
3. **Spread Operator (`{ ... }`)**:
	* Pros:
		+ Easy to use and concise.
		+ Handles simple merge scenarios well.
	* Cons:
		+ Only supports merge of shallow properties (no deep merging).
		+ May lead to unexpected behavior if not used carefully.

**Deep Merge:**

The `deepMerge()` function provided in the benchmark definition is a custom implementation that recursively merges objects, similar to `_.merge()`. It's not included as a built-in option, but it demonstrates an alternative approach for deep merging.

**Other Considerations:**

* **Performance:** The benchmark measures the execution speed of each method. `.merge()` and `Object.assign()` are likely to be faster due to their optimized implementations.
* **Library dependencies:** Using libraries like Lodash or custom implementations (like `deepMerge()`) may introduce additional overhead compared to native methods.
* **Consistency:** When merging objects, consistency is crucial. The chosen method should ensure that all properties are preserved and updated correctly.

**Alternatives:**

Other alternatives for merging objects include:

1. **`JSON.parse(JSON.stringify())`:** A more complex method that can handle deep merging of most data types.
2. **`util.deepMerge()`:** Another implementation of deep merge, available in Node.js's `util` module.
3. **`immer`:** A library for managing immutable state and merging objects.

Keep in mind that the best approach depends on the specific use case and requirements.

Related benchmarks:

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

Comparing performance of: lodash merge vs object.assign vs spread vs deepMerge

Created: 5 years ago by: Registered User

Jump to the latest result

lodash merge

object.assign

spread

deepMerge

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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