Benchmark: lodash merge vs object.assign vs spread - kin

HTML Preparation code:

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

Tests:

lodash merge
var a = { a: 'oh', b: 'my', a1: 'oh', b1: 'my', a2: 'oh', b2: 'my', a3: 'oh', b3: 'my', a4: 'oh', b4: 'my', a5: 'oh', b5: 'my' }; var b = { c: 'goddess', c1: 'goddess', c2: 'goddess', c3: 'goddess', c4: 'goddess', c5: 'goddess', c6: 'goddess'}; var c = _.merge(a, b);
object.assign
var a = { a: 'oh', b: 'my', a1: 'oh', b1: 'my', a2: 'oh', b2: 'my', a3: 'oh', b3: 'my', a4: 'oh', b4: 'my', a5: 'oh', b5: 'my' }; var b = { c: 'goddess', c1: 'goddess', c2: 'goddess', c3: 'goddess', c4: 'goddess', c5: 'goddess', c6: 'goddess'}; var c = Object.assign(a, b);
spread
var a = { a: 'oh', b: 'my', a1: 'oh', b1: 'my', a2: 'oh', b2: 'my', a3: 'oh', b3: 'my', a4: 'oh', b4: 'my', a5: 'oh', b5: 'my' }; var b = { c: 'goddess', c1: 'goddess', c2: 'goddess', c3: 'goddess', c4: 'goddess', c5: 'goddess', c6: 'goddess'}; var c = { ...a, ...b };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
object.assign
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
lodash merge	539803.8 Ops/sec
object.assign	1395137.8 Ops/sec
spread	2317692.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The provided JSON represents three test cases that measure the performance of different approaches to merging two objects in JavaScript:

1. **Lodash `merge`**: A utility function from the Lodash library that merges two objects into a new object.
2. **`Object.assign()`**: A built-in JavaScript method that assigns values from one or more source objects to a target object.
3. **Spread syntax (`...`)**: A shorthand way of creating a new object by spreading the properties of an existing object.

**Options being compared**

The three approaches are being compared in terms of their performance, measured in executions per second (ExecutionsPerSecond) on a specific browser and device platform.

**Pros and Cons:**

1. **Lodash `merge`**:
	* Pros:
		+ Robust and flexible merging capabilities.
		+ Well-tested and widely used library.
	* Cons:
		+ Adds an external dependency (Lodash).
		+ May have a higher overhead due to the library's presence.
2. **`Object.assign()`**:
	* Pros:
		+ Fast and lightweight, since it's built-in.
		+ Simple and intuitive syntax.
	* Cons:
		+ Limited merging capabilities; can only merge single values or objects with specific properties.
		+ May not be as flexible as Lodash `merge`.
3. **Spread syntax (`...`)**:
	* Pros:
		+ Fast and lightweight, since it's a shorthand syntax.
		+ Simplifies code and reduces verbosity.
	* Cons:
		+ Only available in modern browsers that support the spread syntax (ECMAScript 2015+).
		+ May not be as flexible or robust as Lodash `merge` or `Object.assign()`.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks like string manipulation, array manipulation, and object merging. The `merge` function in particular is designed to merge two objects into a new object, handling various edge cases and nuances.

In the context of this benchmark, Lodash's `merge` function is being compared to other approaches for its performance and reliability.

**Special JS feature or syntax**

The spread syntax (`...`) is a relatively new addition to JavaScript (introduced in ECMAScript 2015). It allows objects to be spread as values in an array or object literal, making it easier to create new objects by merging existing ones.

While not explicitly mentioned in the benchmark, the use of `Object.assign()` assumes that the browser supports this method. If the target browsers do not support `Object.assign()`, alternative approaches would need to be used.

**Other alternatives**

Depending on the specific requirements and constraints, other alternatives for merging objects might include:

* Using a simple object iteration approach (e.g., iterating over object properties and adding them to a new object).
* Utilizing a library like `merge-deep` or `objectassign`, which provide more advanced merging capabilities.
* Employing a custom solution that leverages the browser's built-in `JSON.parse()` method or other native APIs.

However, for most use cases, Lodash `merge`, `Object.assign()`, and the spread syntax (`...`) are likely to remain popular choices due to their performance, flexibility, and simplicity.

Related benchmarks:

lodash merge vs object.assign vs spread - kin (version: 0)

Comparing performance of: lodash merge vs object.assign vs spread

Created: 4 years ago by: Guest

Jump to the latest result

lodash merge

object.assign

spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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