Benchmark: Lodash deepMerge vs Object.assign

HTML Preparation code:

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

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

Script Preparation code:

var max = 100000;

var arr = [];
for (var i = 0; i <= max; i++) { arr.push(i); }

 
var max = 100000;​var arr = [];for (var i = 0; i <= max; i++) { arr.push(i); }

Tests:

Lodash


arr.forEach(() => {
  let object = { 'a': { 'b': 2 } };
  let other = { 'a': { 'b': 1, 'c': 3 } };
  _.defaultsDeep(object, other);
})

 
​​arr.forEach(() => {  let object = { 'a': { 'b': 2 } };  let other = { 'a': { 'b': 1, 'c': 3 } };  _.defaultsDeep(object, other);})

Native

function defaultsDeep(target, ...sources) {
  sources.forEach(source => {
    Object.keys(source).forEach(key => {
      if (typeof source[key] === 'object') {
        if (!target[key]) {
          Object.assign(target, { [key]: {} });
        }
        defaultsDeep(target[key], source[key]);
      } else {
        if (!target[key]) {
          Object.assign(target, { [key]: source[key] });
        }
      }
    });
  });

  return target;
}


arr.forEach(() => {
  let object = { 'a': { 'b': 2 } };
  let other = { 'a': { 'b': 1, 'c': 3 } };
  defaultsDeep(object, other);
});

 
function defaultsDeep(target, ...sources) {  sources.forEach(source => {    Object.keys(source).forEach(key => {      if (typeof source[key] === 'object') {        if (!target[key]) {          Object.assign(target, { [key]: {} });        }        defaultsDeep(target[key], source[key]);      } else {        if (!target[key]) {          Object.assign(target, { [key]: source[key] });        }      }    });  });​  return target;}​​arr.forEach(() => {  let object = { 'a': { 'b': 2 } };  let other = { 'a': { 'b': 1, 'c': 3 } };  defaultsDeep(object, other);});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Lodash
Native

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash	34.5 Ops/sec
Native	39.4 Ops/sec

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

Let's dive into the benchmark.

Benchmark Overview

The benchmark compares two approaches for merging objects: Lodash's defaultsDeep function and JavaScript's built-in Object.assign. The test creates an array of 100,000 elements, where each element represents an object with a nested structure. One object is used as the target (object), and another object is used as the source (other). The benchmark measures which approach performs better in merging these two objects.

Options Compared

The two options being compared are:

Lodash's defaultsDeep function: This function is a utility that merges two objects recursively, creating a new object with values from both sources. It handles nested objects and arrays.
JavaScript's built-in Object.assign: This method creates a new object by copying all enumerable properties from one or more source objects.

Pros and Cons

Lodash's defaultsDeep function:
- Pros: Recursively merges objects, handles nested structures, and is a simple one-line call.
- Cons: Requires the Lodash library, which adds a small overhead (approximately 2.5KB).
JavaScript's built-in Object.assign:
- Pros: Lightweight, no additional libraries are required, and works for simple object merges.
- Cons: Can be slower for deep merges with large objects, as it uses property iteration.

In general, Lodash's defaultsDeep function is a better choice when:

You need to merge deeply nested objects or arrays.
You want a simple, one-line solution.

On the other hand, JavaScript's built-in Object.assign might be preferred when:

You only need to merge simple objects with minimal nesting.
You prioritize lightweight code over a single function call.

Library: Lodash

Lodash is a popular utility library for JavaScript that provides various functions for tasks like string manipulation, array and object manipulation, and more. defaultsDeep is one of the many useful functions in the library.

Special JS Feature/Syntax

This benchmark does not explicitly use any special JavaScript features or syntax beyond what's required for the merge operations. However, it's worth noting that some versions of JavaScript (like ECMAScript 2015+) have added new features like Object.entries and Object.fromEntries, which might affect performance in certain cases.

Alternatives

If you're looking for alternatives to Lodash or prefer a more lightweight solution, consider the following options:

Immutable.js: A library that provides immutable data structures and utilities, including deep merge functions.
Underscore.js: Another popular utility library that includes functions like defaultsDeep, although it's not as widely used as Lodash.
JavaScript's Object.assign with reduce or forEach: While this approach is not as lightweight as using a dedicated library, it can be an alternative solution for simple object merges.

Keep in mind that these alternatives might have different performance characteristics and use cases compared to the benchmarked approaches.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Overview**

The benchmark compares two approaches for merging objects: Lodash's `defaultsDeep` function and JavaScript's built-in `Object.assign`. The test creates an array of 100,000 elements, where each element represents an object with a nested structure. One object is used as the target (`object`), and another object is used as the source (`other`). The benchmark measures which approach performs better in merging these two objects.

**Options Compared**

The two options being compared are:

1. **Lodash's `defaultsDeep` function**: This function is a utility that merges two objects recursively, creating a new object with values from both sources. It handles nested objects and arrays.
2. **JavaScript's built-in `Object.assign`**: This method creates a new object by copying all enumerable properties from one or more source objects.

**Pros and Cons**

* **Lodash's `defaultsDeep` function**:
	+ Pros: Recursively merges objects, handles nested structures, and is a simple one-line call.
	+ Cons: Requires the Lodash library, which adds a small overhead (approximately 2.5KB).
* **JavaScript's built-in `Object.assign`**:
	+ Pros: Lightweight, no additional libraries are required, and works for simple object merges.
	+ Cons: Can be slower for deep merges with large objects, as it uses property iteration.

In general, Lodash's `defaultsDeep` function is a better choice when:

* You need to merge deeply nested objects or arrays.
* You want a simple, one-line solution.

On the other hand, JavaScript's built-in `Object.assign` might be preferred when:

* You only need to merge simple objects with minimal nesting.
* You prioritize lightweight code over a single function call.

**Library: Lodash**

Lodash is a popular utility library for JavaScript that provides various functions for tasks like string manipulation, array and object manipulation, and more. `defaultsDeep` is one of the many useful functions in the library.

**Special JS Feature/Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax beyond what's required for the merge operations. However, it's worth noting that some versions of JavaScript (like ECMAScript 2015+) have added new features like `Object.entries` and `Object.fromEntries`, which might affect performance in certain cases.

**Alternatives**

If you're looking for alternatives to Lodash or prefer a more lightweight solution, consider the following options:

1. **Immutable.js**: A library that provides immutable data structures and utilities, including deep merge functions.
2. **Underscore.js**: Another popular utility library that includes functions like `defaultsDeep`, although it's not as widely used as Lodash.
3. **JavaScript's `Object.assign` with `reduce` or `forEach`**: While this approach is not as lightweight as using a dedicated library, it can be an alternative solution for simple object merges.

Keep in mind that these alternatives might have different performance characteristics and use cases compared to the benchmarked approaches.

Related benchmarks:

Lodash deepMerge vs Object.assign (version: 0)

Compare Lodash deepMerge vs Object.assign

Comparing performance of: Lodash vs Native

Created: 7 months ago by: Guest

Jump to the latest result