Benchmark: merge test - lodash vs native

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: ${mergeDeep(obj1, obj2)}`;
Lodash.js filter
document.getElementById('id2').textContent = `Result is: ${_.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:

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.

**Overview of the Benchmark**

The provided JSON represents a benchmark test case on MeasureThat.net, which compares the performance of two approaches: native JavaScript and Lodash.js (a popular JavaScript utility library). The benchmark tests the `mergeDeep` function, which merges two objects recursively.

**What is being tested?**

The benchmark tests the performance of the `mergeDeep` function in two different ways:

1. **Native**: This test case uses only JavaScript, without any external libraries or dependencies.
2. **Lodash.js filter**: This test case uses Lodash.js to implement the `mergeDeep` function.

**Options compared:**

The benchmark compares the performance of the native JavaScript implementation and the Lodash.js implementation of the `mergeDeep` function.

**Pros and Cons:**

1. **Native JavaScript:**
	* Pros:
		+ No external dependencies or libraries are required.
		+ Can be optimized for specific use cases.
	* Cons:
		+ May require more code and complexity to implement.
		+ Performance can vary depending on the JavaScript engine and browser.
2. **Lodash.js filter:**
	* Pros:
		+ Utilizes a well-maintained and widely-used library with optimized implementations.
		+ Reduces code size and complexity.
	* Cons:
		+ Requires an external dependency (Lodash.js).
		+ May introduce performance overhead due to the addition of another library.

**Library: Lodash.js**

Lodash.js is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string manipulation, and more. The `mergeDeep` function in Lodash.js is an implementation of the merge deep function, which merges two objects recursively, handling nested objects and arrays.

**Special JS feature or syntax:**

None mentioned explicitly in this benchmark case.

**Other alternatives:**

If you want to implement your own `mergeDeep` function without using any libraries, you can use a recursive approach similar to the one used in the native JavaScript implementation. This would involve traversing the objects and merging their properties recursively.

Alternatively, you could consider using other JavaScript utility libraries like Underscore.js or Ramda, which provide similar functionality to Lodash.js.

**Benchmark preparation code:**

The script preparation code includes functions for generating random characters (`getRandChar`) and a recursive function `mergeDeep` that merges two objects. The HTML preparation code includes links to load the Lodash.js library and HTML elements with IDs to display the results of the benchmark.

**Individual test cases:**

Each test case consists of a single line of JavaScript code that assigns a value to an HTML element, using either the native JavaScript implementation (`mergeDeep(obj1, obj2)`) or the Lodash.js filter (`_.merge(obj1, obj2)`).

The latest benchmark result shows the performance data for both test cases, with Chrome 111 providing better results.

Related benchmarks:

merge test - lodash vs native (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

No previous run results

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