Benchmark: lodash merge vs object.assign vs spread (v3)

HTML Preparation code:

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

Tests:

lodash merge
var defaultOptions = { headers: { 'content-type': 'application/json', 'user-agent': 'super-app', } }; var options = { headers: {'content-type': 'application/xml' }, data: { 'key': 'value' } }; var result = _.merge(defaultOptions, options);
object.assign
var defaultOptions = { headers: { 'content-type': 'application/json', 'user-agent': 'super-app', } }; var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } }; var result = Object.assign(defaultOptions, options);
spread
var defaultOptions = { headers: { 'content-type': 'application/json', 'user-agent': 'super-app', } }; var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } }; var result = { ...defaultOptions, ...options };
json deep clone
var defaultOptions = { headers: { 'content-type': 'application/json', 'user-agent': 'super-app', } }; var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } }; var clonedOptions = JSON.parse(JSON.stringify(options)); var result = Object.assign(defaultOptions, clonedOptions);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
object.assign
spread
json deep clone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Browser/OS: Chrome 90 on Linux

View result in a separate tab

Test name	Executions per second
lodash merge	367361.0 Ops/sec
object.assign	4670935.0 Ops/sec
spread	1646190.8 Ops/sec
json deep clone	450785.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares the performance of three approaches to merge two objects: `lodash.merge`, `Object.assign`, and the spread operator (`{ ...defaultOptions, ...options }`).

**Lodash Merge**

* **Library:** Lodash is a popular JavaScript library that provides various utility functions.
* **Purpose:** In this case, `_merge` is used to merge two objects into one. It recursively merges the properties of the second object (`options`) into the first object (`defaultOptions`).
* **Pros:**
	+ Easy to use and concise syntax.
	+ Handles nested objects and arrays by default.
* **Cons:**
	+ Can be slower than other approaches due to its recursive nature.

**Object.assign**

* **Method:** `Object.assign` is a built-in JavaScript method that merges one or more source objects into a target object.
* **Purpose:** In this case, it's used to merge the `options` object into the `defaultOptions` object.
* **Pros:**
	+ Fast and efficient since it uses a simple copy operation.
	+ Works well with small to medium-sized objects.
* **Cons:**
	+ Can be slower for large or deeply nested objects due to its limited handling of arrays and nested properties.

**Spread Operator**

* **Method:** The spread operator (`{ ...defaultOptions, ...options }`) is a shorthand syntax that creates a new object by copying the properties from one or more source objects.
* **Purpose:** In this case, it's used to merge the `options` object into the `defaultOptions` object using the spread operator.
* **Pros:**
	+ Fast and efficient since it uses a simple copy operation.
	+ Works well with large or deeply nested objects due to its ability to handle arrays and nested properties.
* **Cons:**
	+ May be slower than `Object.assign` for very small objects due to the overhead of creating a new object.

**JSON Deep Clone**

This approach is not being compared in terms of performance, but rather used as a control case. It creates a deep clone of the `options` object using `JSON.parse(JSON.stringify(options))`, and then merges it into the `defaultOptions` object using `Object.assign`.

* **Library:** No library is used for this approach.
* **Purpose:** The purpose is to create a deep copy of the `options` object before merging it with the `defaultOptions` object.

**Comparison**

The benchmark compares the performance of these three approaches in terms of:

1. Number of executions per second (`ExecutionsPerSecond`)
2. Execution time (not explicitly measured, but inferred from the number of executions per second)

**Other Alternatives**

Some other alternatives that could be considered for merging objects include:

* Using a library like Immutable.js or Ramda
* Creating a custom merge function using `Object.create()` and `Object.assign()`
* Using a functional programming approach with `reduce()` or `merge()`

However, these alternatives are not being tested in this benchmark.

Overall, the benchmark provides a good comparison of the performance characteristics of three common approaches to merging objects in JavaScript.

Related benchmarks:

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

Comparing performance of: lodash merge vs object.assign vs spread vs json deep clone

Created: 3 years ago by: Guest

Jump to the latest result

lodash merge

object.assign

spread

json deep clone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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