Benchmark: lodash assign vs object.assign vs spread operator - variable and constant

lodash assign vs object.assign vs spread operator - variable and constant (version: 1)

Compares the creation of a new object by merging two existing ones using lodash, Object.assign and the spread operator, when merging an object literal with an object from a variable.

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

Created: 5 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

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

Script Preparation code:

var other = { c: 'goddness', d: '!' };

Tests:

lodash assign
var result = _.assign({ a: 'oh', b: 'my' }, other);
object.assign
var result = Object.assign({ a: 'oh', b: 'my' }, other);
spread
var result = { a: 'oh', b: 'my', ...other };

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: 10 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash assign	12759012.0 Ops/sec
object.assign	31328308.0 Ops/sec
spread	27425204.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 world of JavaScript microbenchmarks.

**Benchmark Definition**

The provided JSON represents a benchmark that tests the performance of three different methods to merge two objects: `lodash.assign`, `Object.assign`, and the spread operator (`...`). The benchmark is focused on creating a new object by merging an object literal with an object from a variable (`other`).

**Options Compared**

The benchmark compares the following three options:

1. **Lodash's `assign` method**: A utility function provided by the popular JavaScript library Lodash, which merges multiple objects into one.
2. **Object's `assign` method**: A built-in method in JavaScript that allows you to merge two or more objects into one.
3. **Spread operator (`...`)**: A new syntax introduced in ECMAScript 2018, which allows you to spread the properties of an object onto a new object.

**Pros and Cons**

Here's a brief summary of each option:

1. **Lodash's `assign` method**:
	* Pros: Provides a more concise way to merge objects, especially when dealing with multiple objects.
	* Cons: Requires an external library (Lodash), which might add overhead.
2. **Object's `assign` method**:
	* Pros: Built-in and available without any additional libraries.
	* Cons: Can be less readable or convenient than Lodash's implementation, especially for more complex merges.
3. **Spread operator (`...`)**:
	* Pros: A modern and concise syntax that is easy to read and write.
	* Cons: Only available in ECMAScript 2018 and later, which might limit compatibility.

**Library**

In this benchmark, `lodash.assign` is used as the implementation for the first option. Lodash is a popular JavaScript library that provides various utility functions, including `assign`, which can be useful when working with objects.

**Special JS Feature or Syntax**

There isn't any special JavaScript feature or syntax used in this benchmark, apart from the spread operator (`...`), which is a relatively new addition to the language. However, it's worth noting that other browsers might not support the spread operator yet, so the results might vary depending on the browser and its version.

**Other Alternatives**

If you're interested in exploring alternative methods for merging objects, here are some options:

1. **Use `Object.create()`**: You can create a new object using `Object.create()`, which takes another object as the prototype. This method can be more flexible than the spread operator but requires more code.
2. **Use `for...in` loop**: You can use a `for...in` loop to iterate over the properties of an object and add them to a new object.
3. **Use a library like `merge-deep`**: There are also libraries available that provide a more flexible way to merge objects, such as `merge-deep`, which supports merging nested objects.

I hope this explanation helps you understand the benchmark and the options compared!

Related benchmarks: