Benchmark: merge test - lodash vs native v2

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

<p id="id1"></p>
<p id="id2"></p>

Script Preparation code:

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

const getRandChar = () => getRandomInt(48, 127);

const isObject = (item) => (item && typeof item === 'object' && !Array.isArray(item));

function mergeDeep(target, source) {
  let output = Object.assign({}, target);

  if (isObject(target) && isObject(source)) {
    Object.keys(source).forEach((key) => {
      if (isObject(source[key])) {
        if (!(key in target)) {
          Object.assign(output, { [key]: source[key] });
        }
        else {
          output[key] = mergeDeep(target[key], source[key]);
        }
      } else {
        Object.assign(output, { [key]: source[key] });
      }
    });
  }

  return output;
}

const max1 = 100000; // 100,000 (100 Thousand)
const max2 = 10000000; // 10,000,000 (10 Million)
const max3 = 100000000; // 100,000,000 (100 Million)

var obj1 = {};
var obj2 = {};

for (let i1 = 0; i1 < 13; i1++) {
  const key1 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

  for (let i2 = 0; i2 < 23; i2++) {
    const key2 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

    for (let i3 = 0; i3 < 42; i3++) {
      const key3 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

      for (let i4 = 0; i4 < 69; i4++) {
        const key4 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

        for (let i5 = 0; i5 < 13; i5++) {
          const value1 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));
          const value2 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));
          Object.assign(
            obj1,
            { [key1]: { [key2]: { [key3]: { [key4]: { aValue: value1 } } } } },
          );
          Object.assign(
            obj2,
            { [key1]: { [key2]: { [key3]: { [key4]: { aValue: value2 } } } } },
          );
        }
      }
    }
  }
}

Tests:

Native
document.getElementById('id1').textContent = `Result is 1: ${JSON.stringify(mergeDeep(obj1, obj2))}`;
Lodash.js filter
document.getElementById('id2').textContent = `Result is 2: ${JSON.stringify(_.merge(obj1, obj2))}`;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
Lodash.js filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Native	347526.2 Ops/sec
Lodash.js filter	493693.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences between JavaScript libraries and native implementations is crucial in today's web development landscape.

**Benchmark Overview**

The provided benchmark, `merge test - lodash vs native v2`, tests the performance of two approaches:

1. **Native**: The native implementation uses JavaScript's built-in functions to merge objects.
2. **Lodash.js filter**: This implementation leverages the `lodash.merge` function from the popular Lodash library.

**Options Compared**

The benchmark compares the execution speed of these two approaches, which can be summarized as follows:

* Native:
	+ Uses JavaScript's built-in `Object.assign()` and conditional checks to determine object merging.
	+ Does not rely on any external libraries.
* Lodash.js filter:
	+ Utilizes the `lodash.merge` function, which is a more comprehensive merge function that handles various edge cases.
	+ Relies on an external library (Lodash).

**Pros and Cons**

**Native:**

Pros:

* No dependencies on external libraries, reducing the attack surface and increasing modularity.
* Leverages built-in JavaScript functions, making it easier to understand and debug.

Cons:

* May require more conditional checks and explicit looping for complex merge scenarios.
* Can be slower due to the overhead of JavaScript's dynamic typing and type checks.

**Lodash.js filter:**

Pros:

* Provides a more comprehensive merge function that handles edge cases, reducing code duplication.
* Is often faster than native implementations due to its optimized algorithms and caching.

Cons:

* Adds an external dependency on Lodash, which can increase the bundle size and complexity.
* May introduce additional overhead due to library initialization and dependency resolution.

**Other Considerations**

* The benchmark uses a large dataset with 13 levels of nesting, which can impact performance. Using smaller datasets might yield different results.
* The test data is generated randomly using ASCII characters, which may not accurately reflect real-world data structures.
* The benchmark does not account for memory allocation and garbage collection overhead, which could affect performance in other scenarios.

**Library Description**

Lodash is a popular JavaScript library that provides a comprehensive set of utility functions for tasks like array manipulation, object merging, and more. In this benchmark, Lodash's `merge` function is used to compare with the native implementation.

**Special JS Feature/Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax (e.g., async/await, promises, ES6 classes). However, it relies on some advanced concepts like conditional checks and object merging, which can be challenging to understand without a good grasp of JavaScript fundamentals.

Related benchmarks:

merge test - lodash vs native v2 (version: 0)

Comparing performance of: Native vs Lodash.js filter

Created: 3 years ago by: Guest

Jump to the latest result

Native

Lodash.js filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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