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 gemma2:9b, generated 29 days ago):

LLMs can make mistakes. Check important info.

This benchmark tests three different ways to create a copy of an object in JavaScript: using the spread operator (`...`), `Object.assign()`, and Lodash's `_.clone()` method.

**Here's a breakdown:**

* **Using the spread operator (`...`)**: This is the most concise approach. It iterates through the properties of the original object and copies them directly into a new object.

```javascript
   const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' };
   const finalObject = { ...firstObject }; 
   ```

* **Using `Object.assign()`**: This method takes the original object and copies its properties into a new object. It can also be used to merge multiple objects together.

```javascript
   const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' };
   const finalObject = Object.assign({}, firstObject); 
   ```

* **Using Lodash's `_.clone()`**: This function from the Lodash library creates a deep copy of an object, meaning it recursively copies all nested objects as well. This is important if your original object contains complex data structures.

```javascript
   const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' };
   const finalObject = _.clone(firstObject); 
   ```

**Pros and Cons:**

* **Spread operator**:
    * **Pros**: Concise, easy to read. 
    * **Cons**: Creates a shallow copy by default (doesn't handle nested objects). Can be less performant for large objects.

* **`Object.assign()`**:
    * **Pros**:  Flexible as it can merge multiple objects. Relatively efficient for simple object copies.
    * **Cons**: Creates a shallow copy by default. Less readable than the spread operator for simple copies.

* **Lodash's `_.clone()`**: 
    * **Pros**: Creates a deep copy, handles nested objects properly.  A reliable choice for complex data structures.
    * **Cons**: Requires including the Lodash library, which adds some overhead.

**Other Considerations:**

* **Object Size:** For very small objects, performance differences might be negligible.
* **Deep vs. Shallow Copy:** Consider whether you need a deep copy (recursive) or just a shallow copy (copying references to properties).
* **Readability**:  Choose the approach that is most readable and maintainable for your codebase.

**Alternatives:**

There are other libraries besides Lodash that provide deep cloning functionality. Some popular alternatives include:

* **Ramda:** [https://ramdajs.com/](https://ramdajs.com/)
* **Immutable.js:** [https://immutable-js.github.io/immutable-js/](https://immutable-js.github.io/immutable-js/)

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 gemma2:9b, generated 29 days ago):