Benchmark: lodash assign vs spread operator

HTML Preparation code:

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

Script Preparation code:

var person = {name: 'Frederick', lastName: 'Corcino Alejo'};

Tests:

lodash
let copied = _.assign({}, person, {age: 15});
native
let copied = {...person};

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

native

15.0M/s

lodash

4.2M/s

Fastest: native (3.5x faster)

View exact numbers

✓ native: 14,965,732 ops/sec
• lodash: 4,223,528 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash
native

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

native

97.2M/s

lodash

10.9M/s

View exact numbers

Test name	Executions per second
✓ native	97,189,904 Ops/sec
lodash	10,867,246 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark.

**What is being tested?**

The provided benchmark measures the performance of two approaches for creating a copy of an object in JavaScript: `lodash.assign()` and the spread operator (`...`).

**Options compared**

There are two options being compared:

1. **Lodash's assign function**: Lodash is a popular utility library that provides a lot of functions to make common tasks easier. In this case, the `assign()` function is used to merge objects.
2. **Native JavaScript spread operator**: The spread operator (`...`) is a new feature introduced in ECMAScript 2018 (ES2018) and later versions. It allows you to create a copy of an object by spreading its properties into a new object.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Lodash's assign function**
	* Pros:
		+ Well-tested and widely used library.
		+ Provides more features than just assignment, such as handling null or undefined values.
	* Cons:
		+ Requires an additional dependency (the Lodash library).
		+ May have a higher overhead due to the need to load the library.
2. **Native JavaScript spread operator**
	* Pros:
		+ Fast and lightweight, as it's built into the language.
		+ Easy to use and understand.
	* Cons:
		+ Limited support for older browsers (pre-ES2018).
		+ May not be as flexible or powerful as Lodash's assign function.

**Library**

The `lodash` library is a JavaScript utility library that provides many functions to make common tasks easier. In this case, the `assign()` function is used to merge objects.

**Special JS feature/syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2018 (ES2018) and later versions. It allows you to create a copy of an object by spreading its properties into a new object.

**Other alternatives**

If you don't want to use `lodash` or the spread operator, there are other ways to create a copy of an object:

1. **Using `Object.assign()`**: This is another built-in JavaScript function that can be used to merge objects.
2. **Using `Array.prototype.slice()`**: You can also create a shallow copy of an array using `Array.prototype.slice()`.
3. **Manual implementation**: If you need more control over the copying process, you can write your own function to manually iterate over the object's properties and assign them to a new object.

Here's an example of how you could implement a manual copy function:
```javascript
function copyObject(obj) {
  const copied = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copied[key] = obj[key];
    }
  }
  return copied;
}
```
This implementation creates a new object and manually iterates over the original object's properties, assigning each value to the corresponding property on the new object.

lodash assign vs spread operator (version: 0) Benchmark.js

lodash assign vs spread operator

Comparing performance of: `lodash vs native`

Created: 8 years ago by: Guest

Go to the latest result

lodash

native

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash assign vs spread operator (version: 0) Benchmark.js

lodash assign vs spread operator

Comparing performance of: lodash vs native

Created: 8 years ago by: Guest

Go to the latest result

lodash

native

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `lodash vs native`