Benchmark: lodash merge vs object.assign vs spread with arraysj

HTML Preparation code:

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

Tests:

lodash assign
var a = { a: 'oh', b: [1, 2, 3] }; var b = { b: [2, 3, 4] }; var c = _.assign({}, a, b);
object.assign
var a = { a: 'oh', b: [1, 2, 3] }; var b = { b: [2, 3, 4] }; var c = Object.assign({}, a, b);
spread
var a = { a: 'oh', b: [1, 2, 3] }; var b = { b: [2, 3, 4] }; var c = { ...a, ...b };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash assign
object.assign
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
lodash assign	3371020.5 Ops/sec
object.assign	9274050.0 Ops/sec
spread	16305028.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The benchmark is testing three approaches to merge two objects in JavaScript:

1. **Lodash `_.assign()`**: This method takes two or more sources and merges them into an object, overwriting any existing properties.
2. **Object.assign()**: This method takes one or more source objects and merges them into a target object, overwriting any existing properties.
3. **Spread operator (`...`)**: This is a new syntax in JavaScript that allows you to merge two objects into a new object by spreading the properties of each object.

**Options compared**

The benchmark is comparing these three approaches on a specific test case:

* Create an object `a` with one property `b` containing an array `[1, 2, 3]`.
* Create another object `b` with the same property `b` but with a different array `[2, 3, 4]`.
* Merge `a` and `b` into a new object using each of the three approaches.

**Pros and cons of each approach**

1. **Lodash `.assign()`**: This method is fast and efficient, as it uses a specialized algorithm for merging objects. However, it requires an external library (Lodash) to be included.
2. **Object.assign()**: This method is also efficient, but it requires the use of `null` values to preserve the original object's properties. It's also more concise than writing a custom merge function.
3. **Spread operator (`...`)**: This syntax is very concise and easy to read, but it can be slower than the other two approaches, as it involves creating new objects.

**Library usage**

The benchmark uses Lodash for the `.assign()` method. The `lodash.min.js` library is included in the HTML file using a `<script>` tag.

**Special JS feature/syntax**

None mentioned in the provided benchmark code.

**Other considerations**

* The benchmark is running on Firefox 62, which may not be the most up-to-date browser version.
* The test cases are quite simple and don't cover edge cases, such as merging objects with duplicate properties or using `null` values.
* The benchmark doesn't account for potential memory allocation overhead of creating new objects.

**Alternative approaches**

Other methods to merge two objects include:

1. **Custom recursive function**: Writing a custom function that recursively merges the properties of two objects.
2. **Using `for...in` loops**: Using `for...in` loops to iterate over the properties of an object and merging them using conditional statements.

These alternative approaches may be slower than the benchmarked methods, but they provide more control over the merge process.

I hope this explanation helps!

Related benchmarks:

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

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

Created: 7 years ago by: Guest

Jump to the latest result

lodash assign

object.assign

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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