Benchmark: JavaScript spread operator vs Object.assign vs Lodash.clone

HTML Preparation code:

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

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const finalObject = { ...firstObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const finalObject = Object.assign(firstObject);
Using lodash.clone
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const finalObject = _.clone(firstObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using lodash.clone

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 29 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its results.

**Benchmark Definition**

The benchmark is called "JavaScript spread operator vs Object.assign vs Lodash.clone". It compares three different ways to create a copy of an object in JavaScript: using the spread operator (`...`), `Object.assign()`, and Lodash's `clone()` function.

**Individual Test Cases**

There are three test cases, each testing one of these methods:

1. **Using the spread operator**: This test case uses the spread operator to create a copy of an object. The benchmark definition code is:
```javascript
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' }
const finalObject = { ...firstObject };
```
This method creates a new object by spreading the properties of `firstObject` into it.

2. **Using Object.assign()**: This test case uses `Object.assign()` to create a copy of an object. The benchmark definition code is:
```javascript
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' }
const finalObject = Object.assign(firstObject);
```
This method creates a new object by copying the properties from `firstObject` into it.

3. **Using lodash.clone()**: This test case uses Lodash's `clone()` function to create a copy of an object. The benchmark definition code is:
```javascript
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' }
const finalObject = _.clone(firstObject);
```
This method creates a deep copy of the object, meaning it recursively clones all nested objects.

**Latest Benchmark Result**

The latest benchmark result shows the execution speed (Executions Per Second) for each test case on a Chrome 89 browser running on Windows:

* **Using the spread operator**: 81787024.0 executions per second
* **Using Object.assign()**: 7636966.0 executions per second
* **Using lodash.clone()**: 1845699.875 executions per second

**Library and Feature Explanation**

Lodash is a popular JavaScript library that provides functional programming helpers, including the `clone()` function used in this benchmark.

The spread operator (`...`) is a JavaScript feature introduced in ECMAScript 2015 (ES6). It allows you to create a new array or object by spreading an iterable (like an array) or an object into it.

**Pros and Cons**

* **Spread Operator**: Pros:
	+ Easy to use and concise syntax
	+ Fast execution speed in this benchmark
	+ Works well for shallow copies of objects
*   Cons:
    - May not be suitable for deep copying objects with nested properties
* **Object.assign()**: Pros:
	+ Widely supported in modern browsers
	+ Can create a copy of an object, including its prototype chain (if needed)
*   Cons:
    - Not as concise as the spread operator syntax
    - May have slower execution speed compared to other methods
* **Lodash.clone()**: Pros:
	+ Recursively clones all nested objects and arrays
	+ Handles complex data structures with ease
*   Cons:
    - Requires including Lodash library, which adds extra overhead
    - May be overkill for simple use cases

**Other Alternatives**

If you don't need to use a library like Lodash, other alternatives to consider are:

* **JSON.parse(JSON.stringify())**: This method uses the JSON API to create a string representation of an object and then parses it back into an object. While not the most efficient approach, it can work for simple cases.
* **Object.create()**: This method creates a new object with a given prototype (if specified). You can use it in conjunction with other methods to create a copy of an object.

When deciding which approach to take, consider factors like performance requirements, complexity of your data structure, and personal preference for coding style.

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.114 Safari/537.36

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	81787024.0 Ops/sec
Using Object.assign	7636966.0 Ops/sec
Using lodash.clone	1845699.9 Ops/sec

Related benchmarks:

JavaScript spread operator vs Object.assign vs Lodash.clone (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Using lodash.clone

Created: 6 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using lodash.clone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 29 days ago):