Benchmark: Angular merge vs lodash merge

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

Script Preparation code:

var obj1 = {
  firstName: 'Ronald',
  lastName: 'Reagan',
  password: '23k4jlqrkjq2343q',
  hairColor: 'brown'
};

var obj2 = {
  firstName: 'James',
  hairColor: 'black',
  phoneNumber: '8055555555'
}

  function merge(destination, source) {
    angular.forEach(source, function(value, key) {
      if (angular.isDefined(destination[key])) {
        if (angular.isObject(destination[key]) && !angular.isArray(destination[key])) {
          destination[key] = merge(destination[key], source[key]);
        } else {
          destination[key] = source[key];
        }
      } else { // adds value to the destination object
        destination[key] = source[key];
      }
    });
    return destination;
  }

Tests:

Angular merge
var newObj = merge(obj1, obj2);
Lodash merge
var newObj = _.merge(obj1, obj2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Angular merge
Lodash merge

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Angular merge	7517207.5 Ops/sec
Lodash merge	8913289.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case for comparing the performance of two different merge functions: one from Angular and another from Lodash.

**Merge Functions Compared**

Two merge functions are compared:

1. **Angular Merge**: This function is implemented as part of the Angular framework. It uses the `angular.forEach` method to iterate over the source object's properties, merging them with the destination object if necessary.
2. **Lodash Merge**: This function is from the Lodash utility library and uses a simpler approach to merge objects: it checks for existing keys in the destination object and updates their values accordingly.

**Options Compared**

The two merge functions are compared on the same input objects (`obj1` and `obj2`). The key differences between them lie in how they handle properties:

* **Angular Merge**: When both properties exist in both source and destination, it recursively calls itself to merge the nested objects. If one property is an object in the source but not in the destination, or if both are objects, it merges the two objects using its own `merge` function.
* **Lodash Merge**: It checks for existing keys in the destination object and updates their values accordingly. If a key is present in both sources and destinations, it uses the value from the destination; otherwise, it adds the new key-value pair to the destination.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Angular Merge**:
	+ Pros: Handles nested objects recursively, which can be beneficial for complex data structures.
	+ Cons: Can lead to performance issues due to recursive calls, especially with large input objects.
* **Lodash Merge**:
	+ Pros: Simpler implementation, less prone to performance issues.
	+ Cons: Does not handle nested objects as deeply as Angular's merge function.

**Library and Purpose**

The Lodash library is a utility library that provides various functions for working with data, including the `merge` function used in this benchmark.

**JavaScript Features/Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax. However, it relies on the `angular.forEach` method, which was introduced in AngularJS before becoming part of modern JavaScript standards.

**Other Alternatives**

If you need to compare merge functions for other libraries or frameworks, here are some alternatives:

* For a pure JavaScript implementation without using `forEach`, you can use the `Object.assign()` method or create your own loop.
* For another utility library like jQuery, its `extend` method (similar to Lodash's `merge`) might be used instead.

In summary, this benchmark compares the performance of two merge functions from different libraries: Angular and Lodash. The comparison highlights the trade-offs between recursive approaches (Angular) and simpler implementations (Lodash).

Related benchmarks:

Angular merge vs lodash merge (version: 0)

Angular merge vs lodash merge

Comparing performance of: Angular merge vs Lodash merge

Created: 7 years ago by: Guest

Jump to the latest result

Angular merge

Lodash merge

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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