Benchmark: lodash merge vs object.assign vs spread for 3 objects

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' }; var b = { c: 'goddess' }; var d = { d: 'smh'}; var c = _.merge(a, b, d);
object.assign
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var d = { d: 'smh'}; var c = Object.assign(a, b, d);
spread
var a = { a: 'oh', b: 'my' }; var b = { c: 'goddess' }; var d = { d: 'smh'}; var c = { ...a, ...b, ...d };

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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark compares the performance of three different approaches to merge objects in JavaScript:

1. **Lodash `merge`**: The `merge` function from the Lodash library is used to merge multiple objects into one.
2. **`Object.assign`**: The `assign` method of the `Object` prototype is used to merge two or more source objects into a single target object.
3. **Spread Operator (`...`)**: The spread operator is used to create a new object by merging properties from multiple source objects.

**Options Compared**

The benchmark compares the performance of these three approaches on a specific test case, which involves merging three objects:

* `a`: `{ a: 'oh', b: 'my' }`
* `b`: `{ c: 'goddess' }`
* `d`: `{ d: 'smh'}`

**Pros and Cons**

Here's a brief overview of each approach:

1. **Lodash `merge`**: Pros:
	* Easy to use and concise syntax.
	* Supports deep merging (merging nested objects).
2. **`Object.assign`**: Pros:
	* Widely supported and standardized method.
	* Can be used with arrays as well.
3. **Spread Operator (`...`)**: Pros:
	* Simple and concise syntax.
	* Creates a new object, avoiding mutating the original.

Cons:

1. **Lodash `merge`**:
	* Requires importing the Lodash library, which may add overhead.
2. **`Object.assign`**:
	* Can be slower than other approaches due to its method call overhead.
3. **Spread Operator (`...`)**:
	* Creates a new object, which can lead to memory allocation and copying.

**Library/Feature Descriptions**

1. **Lodash `merge`**: Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks like array manipulation, string manipulation, and more. The `merge` function is used to recursively merge objects into one.
2. **Spread Operator (`...`)**: The spread operator is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows you to create a new object by merging properties from multiple source objects.

**Other Considerations**

1. **Importing Lodash**: If you don't have the Lodash library imported, you'll need to add it before using the `merge` function.
2. **Browser Support**: The benchmark results only show performance data for Chrome 98 on Windows. You may want to run the benchmark on other browsers and platforms to get a more comprehensive picture of each approach's performance.

**Alternatives**

If you don't like using Lodash or the spread operator, you can consider alternative approaches:

1. **Using `reduce()`**: You can use the `reduce()` method to merge objects by iteratively combining properties from multiple source objects.
2. **Implementing a custom merging function**: You can create your own merging function that iterates through the properties of each object and combines them in a way that suits your needs.

Keep in mind that these alternatives may have different performance characteristics than the approaches compared in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 98 on Windows

View result in a separate tab

Test name	Executions per second
lodash merge	2405892.0 Ops/sec
object.assign	6200861.5 Ops/sec
spread	1388862.0 Ops/sec

Related benchmarks:

lodash merge vs object.assign vs spread for 3 objects (version: 0)

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

Created: 2 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 28 days ago):