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

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);
Using JSON
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const finalObject = JSON.parse(JSON.stringify(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
Using JSON

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark compares four ways to create a shallow copy of an object:

1. **Spread operator (`...`)**: Creates a new object with the same keys as the original object, but with new values.
2. **`Object.assign()`**: Assigns the properties of one or more source objects to a target object.
3. **`lodash.clone()`**: Clones the specified value as an object.
4. **`JSON.parse(JSON.stringify(object))`**: Creates a deep copy of an object by serializing it to a JSON string and then parsing it back.

**Test Cases**

Each test case uses a single object, `firstObject`, with two properties: `sampleData` and `moreData`.

* The original `firstObject` is defined as:
```javascript
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' }
```
The benchmark then creates four new objects:

1. **Using the spread operator**:
```javascript
const finalObject = {...firstObject}
```
This creates a new object with the same keys as `firstObject`, but with new values.

2. **Using `Object.assign()`**:
```javascript
const finalObject = Object.assign(firstObject)
```
This assigns the properties of `firstObject` to a new object, effectively creating a shallow copy.

3. **Using `lodash.clone()`**:
```javascript
const finalObject = _.clone(firstObject)
```
This uses the `_.clone()` function from Lodash to create a deep copy of `firstObject`.

4. **Using `JSON.parse(JSON.stringify(object))`**:
```javascript
const finalObject = JSON.parse(JSON.stringify(firstObject))
```
This serializes `firstObject` to a JSON string and then parses it back into an object, creating a deep copy.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Spread operator (`...`)**:
	+ Pros: Simple, efficient, and modern.
	+ Cons: May not work as expected with objects that have mutable properties (e.g., arrays).
* **`Object.assign()`**:
	+ Pros: Widely supported and well-established.
	+ Cons: Can be slow for large objects and may not work correctly with some object types.
* **`lodash.clone()`**:
	+ Pros: Deep copying, works with most object types.
	+ Cons: Adds an extra dependency (Lodash), can be slower due to the cloning process.
* **`JSON.parse(JSON.stringify(object))`**:
	+ Pros: Works with most object types, including arrays and objects.
	+ Cons: Can be slow for large objects, may not work correctly with some object types (e.g., functions).

**Library and Special JS Features**

The benchmark uses the following library:

* **Lodash**: Used to implement the `_.clone()` function.

There are no special JavaScript features used in this benchmark. The test cases only rely on standard JavaScript syntax and built-in functions.

**Alternatives**

If you're looking for alternative ways to create a shallow copy of an object, consider using:

* **`Object.create(null)`**: Creates a new object without any prototype chain.
* **`Array.prototype.slice()`**: Slices an array into a new array with the same elements (can be used to clone objects).
* **`JSON.parse(JSON.stringify(object))`** with some caveats: While this method works for most object types, it may not work correctly with some types, such as functions or Dates.

Keep in mind that these alternatives may have different performance characteristics and may require additional dependencies.

Latest run results:

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

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

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	74889328.0 Ops/sec
Using Object.assign	7092028.5 Ops/sec
Using lodash.clone	2028223.4 Ops/sec
Using JSON	928990.4 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using lodash.clone

Using JSON

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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