Benchmark: lodash merge vs recursive indexed setter merge function

HTML Preparation code:

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

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

Script Preparation code:

function jsMerge(target, ...sources) {
    if (!sources.length) {
        return target;
    }

    sources.forEach((src) => {
        Object.keys(src).forEach((key) => {
          	const value = src[key];
            if (Object.prototype.hasOwnProperty.call(target, key)) {
                // target already has key. Merge if required.
                if (typeof target[key] === 'object' && typeof value === 'object') {
                    // Try to merge objects or arrays
                  	if (Array.isArray(value)) {
                      	if (Array.isArray(target[key]) && target[key].length > value.length) {
	                      	// Both arrays and old array is longer. Merge
    	                  	target[key] = Array.prototype.concat(value, Array.prototype.slice.call(target[key], value.length));
	                    } else {
                          	// Either not both arrays or old array is same length/shorter. Overwrite.
							target[key] = value;
                        }
                    } else {
                        // Both non-array objects. Recursively merge
                        target[key] = jsMerge(target[key], value);
                    }
                } else {
                    // At least one side is not object/array. Overwrite.
                    target[key] = value;
                }
            } else {
                // Key does not exist on object. Assign.
                target[key] = value;
            }
        });
    });

    return target;
}

​x
 
function jsMerge(target, ...sources) {    if (!sources.length) {        return target;    }​    sources.forEach((src) => {        Object.keys(src).forEach((key) => {            const value = src[key];            if (Object.prototype.hasOwnProperty.call(target, key)) {                // target already has key. Merge if required.                if (typeof target[key] === 'object' && typeof value === 'object') {                    // Try to merge objects or arrays                    if (Array.isArray(value)) {                        if (Array.isArray(target[key]) && target[key].length > value.length) {                            // Both arrays and old array is longer. Merge                            target[key] = Array.prototype.concat(value, Array.prototype.slice.call(target[key], value.length));                        } else {                            // Either not both arrays or old array is same length/shorter. Overwrite.                            target[key] = value;                        }                    } else {                        // Both non-array objects. Recursively merge                        target[key] = jsMerge(target[key], value);                    }                } else {                    // At least one side is not object/array. Overwrite.                    target[key] = value;                }            } else {                // Key does not exist on object. Assign.                target[key] = value;            }        });    });​    return target;}

Tests:

recursive indexed setter merge function
var a1 = { a: 'oh', b: 'my', c: 'goodness', d: { a: 'nested', b: 'object', c: [ 'arrayA', 'arrayB', 'arrayC' ], e: 'a.d.e' } }; var b1 = { c: 'GOODNESS', d: { b: 'object!', c: [ 'array1', 'array2' ], d: 'b.d.d' } }; jsMerge(a1, b1);
var a1 = { a: 'oh', b: 'my', c: 'goodness', d: { a: 'nested', b: 'object', c: [ 'arrayA', 'arrayB', 'arrayC' ], e: 'a.d.e' } };
var b1 = { c: 'GOODNESS', d: { b: 'object!', c: [ 'array1', 'array2' ], d: 'b.d.d' } };
jsMerge(a1, b1);

lodash merge

var a2 = { a: 'oh', b: 'my', c: 'goodness', d: { a: 'nested', b: 'object', c: [ 'arrayA', 'arrayB', 'arrayC' ], e: 'a.d.e' } };
var b2 = { c: 'GOODNESS', d: { b: 'object!', c: [ 'array1', 'array2' ], d: 'b.d.d' } };
_.merge(a2, b2);

 
var a2 = { a: 'oh', b: 'my', c: 'goodness', d: { a: 'nested', b: 'object', c: [ 'arrayA', 'arrayB', 'arrayC' ], e: 'a.d.e' } };var b2 = { c: 'GOODNESS', d: { b: 'object!', c: [ 'array1', 'array2' ], d: 'b.d.d' } };_.merge(a2, b2);

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
recursive indexed setter merge function
lodash merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 14; Mobile; rv:131.0) Gecko/131.0 Firefox/131.0

Browser/OS: Firefox Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
recursive indexed setter merge function	1089465.5 Ops/sec
lodash merge	319668.3 Ops/sec

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

Let's break down what's being tested in this benchmark.

Benchmark Definition

The benchmark tests two different approaches for merging objects:

Recursive Indexed Setter Merge Function: This is the custom implementation provided as part of the benchmark definition, which we'll refer to as jsMerge. It recursively merges the properties of two objects based on their types.
Lodash Merge: The benchmark uses a version of Lodash's merge function, which also recursively merges objects.

Options Compared

The main difference between these two approaches is how they handle arrays and nested objects:

Recursive Indexed Setter Merge Function (jsMerge):
- When merging arrays, it tries to concatenate the arrays if one array is longer than the other. If not, it overwrites the shorter array.
- When merging nested objects, it recursively calls itself with the nested objects.
Lodash Merge:
- When merging arrays, it uses Array.prototype.concat and Array.prototype.slice.
- When merging nested objects, it also uses recursive calls.

Pros and Cons

jsMerge (Recursive Indexed Setter Merge Function):
- Pros:
  - More control over the merge process.
  - Handles arrays with different lengths more elegantly.
- Cons:
  - May be slower due to recursive function calls.
  - Less maintainable than a dedicated library like Lodash.
Lodash Merge:
- Pros:
  - Faster execution time due to optimized implementation.
  - More maintainable and less prone to errors.
- Cons:
  - Less control over the merge process.

Other Considerations

When choosing between these two approaches, consider the trade-offs between performance, readability, and maintainability. If you need more control over the merge process or are working with complex data structures, jsMerge might be a better choice. However, if you prioritize speed and ease of maintenance, Lodash's merge function is likely a better option.

Library Used

The benchmark uses Lodash version 4.17.21 in its Html Preparation Code. Lodash is a popular JavaScript library that provides a set of utility functions for tasks like array manipulation, object creation, and more.

Special JS Feature or Syntax

There are no special JavaScript features or syntax used in this benchmark. The code uses standard ES6 syntax and only relies on built-in JavaScript functionality.

Now that we've broken down the benchmark, let's discuss other alternatives:

Other alternatives to Lodash's merge function include:

Underscore.js: Another popular utility library for JavaScript that provides a similar merge function.
Immutable.js: A library that provides a more functional programming approach to data manipulation and merging.
Custom implementation: As shown in the benchmark, you can also implement your own merge function using standard JavaScript syntax. However, this may require more maintenance effort and expertise.

Keep in mind that these alternatives might offer different trade-offs between performance, readability, and maintainability, depending on your specific use case and requirements.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark tests two different approaches for merging objects:

1. **Recursive Indexed Setter Merge Function**: This is the custom implementation provided as part of the benchmark definition, which we'll refer to as `jsMerge`. It recursively merges the properties of two objects based on their types.
2. **Lodash Merge**: The benchmark uses a version of Lodash's `merge` function, which also recursively merges objects.

**Options Compared**

The main difference between these two approaches is how they handle arrays and nested objects:

* **Recursive Indexed Setter Merge Function (jsMerge)**:
	+ When merging arrays, it tries to concatenate the arrays if one array is longer than the other. If not, it overwrites the shorter array.
	+ When merging nested objects, it recursively calls itself with the nested objects.
* **Lodash Merge**:
	+ When merging arrays, it uses `Array.prototype.concat` and `Array.prototype.slice`.
	+ When merging nested objects, it also uses recursive calls.

**Pros and Cons**

* **jsMerge (Recursive Indexed Setter Merge Function)**:
	+ Pros:
		- More control over the merge process.
		- Handles arrays with different lengths more elegantly.
	+ Cons:
		- May be slower due to recursive function calls.
		- Less maintainable than a dedicated library like Lodash.
* **Lodash Merge**:
	+ Pros:
		- Faster execution time due to optimized implementation.
		- More maintainable and less prone to errors.
	+ Cons:
		- Less control over the merge process.

**Other Considerations**

When choosing between these two approaches, consider the trade-offs between performance, readability, and maintainability. If you need more control over the merge process or are working with complex data structures, `jsMerge` might be a better choice. However, if you prioritize speed and ease of maintenance, Lodash's `merge` function is likely a better option.

**Library Used**

The benchmark uses Lodash version 4.17.21 in its `Html Preparation Code`. Lodash is a popular JavaScript library that provides a set of utility functions for tasks like array manipulation, object creation, and more.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code uses standard ES6 syntax and only relies on built-in JavaScript functionality.

Now that we've broken down the benchmark, let's discuss other alternatives:

Other alternatives to Lodash's `merge` function include:

* **Underscore.js**: Another popular utility library for JavaScript that provides a similar `merge` function.
* **Immutable.js**: A library that provides a more functional programming approach to data manipulation and merging.
* **Custom implementation**: As shown in the benchmark, you can also implement your own merge function using standard JavaScript syntax. However, this may require more maintenance effort and expertise.

Keep in mind that these alternatives might offer different trade-offs between performance, readability, and maintainability, depending on your specific use case and requirements.

Related benchmarks:

lodash merge vs recursive indexed setter merge function (version: 0)

Comparing performance of: recursive indexed setter merge function vs lodash merge

Created: 3 years ago by: Guest

Jump to the latest result

recursive indexed setter merge function