Benchmark: ES6 vs Lodash object copying

HTML Preparation code:

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

Script Preparation code:

var o = { data: 'foo bar', moreData: 'bar foo' }

Tests:

ES6 Object.assign
const a = Object.assign({}, o);
ES6 Spread
const a = {... o};
Lodash clone
const a = _.clone(o)
Lodash cloneDeep
const a = _.cloneDeep(o)
Lodash merge
const a = _.merge({}, o)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Object.assign
ES6 Spread
Lodash clone
Lodash cloneDeep
Lodash merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Object.assign	2873723.2 Ops/sec
ES6 Spread	9417105.0 Ops/sec
Lodash clone	1346250.1 Ops/sec
Lodash cloneDeep	974119.7 Ops/sec
Lodash merge	1512342.4 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.

**Benchmark Definition**

The benchmark is testing the performance of three different approaches to copy an object in JavaScript: ES6 `Object.assign()`, ES6 spread syntax (`...`), Lodash `clone()` function, and Lodash `cloneDeep()` function. The benchmark also includes a script preparation code that sets up an object `o` with some data.

**Options being compared**

The options being compared are:

1. **ES6 Object.assign()**: This method takes two objects as arguments and returns a new object that is the result of merging the properties of both objects.
2. **ES6 Spread syntax (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object into a new object.
3. **Lodash clone()**: This function creates a deep copy of an object, which means it recursively copies all properties and values of the original object.
4. **Lodash cloneDeep()**: This function creates a deep copy of an object, but unlike `clone()`, it also preserves the cyclic references between objects.

**Pros and Cons**

Here's a brief summary of each approach:

1. **ES6 Object.assign()**:
	* Pros: Simple, widely supported, and efficient.
	* Cons: Can be slow for large objects due to the overhead of creating a new object.
2. **ES6 Spread syntax (`...`)**:
	* Pros: Fast, efficient, and easy to use.
	* Cons: Only works with simple objects and doesn't support cyclic references.
3. **Lodash clone()**:
	* Pros: Preserves all properties and values of the original object, including cyclic references.
	* Cons: Can be slower than `Object.assign()` due to the overhead of creating a deep copy.
4. **Lodash cloneDeep()**:
	* Pros: Preserves all properties and values of the original object, including cyclic references, while still being efficient.
	* Cons: Can be slower than `clone()` for very large objects.

**Library and special features**

The benchmark uses Lodash, a popular JavaScript library that provides various utility functions. The `_.clone()` function is used to create a shallow copy of an object, while the `_.cloneDeep()` function creates a deep copy of an object.

Note that there's no special feature or syntax being tested in this benchmark, as all options are well-established and widely supported JavaScript features.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **JSON.parse(JSON.stringify(o))**: This method creates a deep copy of an object by serializing the original object to a JSON string and then parsing it back into an object.
2. **Array.prototype.slice.call()` or `Array.from()`: These methods can be used to create a shallow copy of an array (or object) by creating a new array with the same elements.

Keep in mind that these alternatives may not offer the same performance as the ES6 spread syntax, Lodash clone(), or Lodash cloneDeep() functions.

Related benchmarks:

ES6 vs Lodash object copying (version: 0)

Comparing performance of: ES6 Object.assign vs ES6 Spread vs Lodash clone vs Lodash cloneDeep vs Lodash merge

Created: 4 years ago by: Guest

Jump to the latest result

ES6 Object.assign

ES6 Spread

Lodash clone

Lodash cloneDeep

Lodash merge

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):