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

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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of three different methods for creating a copy of an object in JavaScript:

1. **Using the spread operator (`...`)**:  This is the modern approach introduced in ES6. It's concise and often considered the most readable option. The example code uses `...firstObject` to create a new object containing all properties from `firstObject`.
2. **Using `Object.assign()`**: This built-in method allows you to copy properties from one or more objects into a new object. In this benchmark, it's used with  `Object.assign({}, firstObject)` to create a shallow copy of `firstObject`. The empty object at the beginning ensures that a new object is created rather than modifying an existing one.
3. **Using Lodash's `_.clone()`**: Lodash is a popular JavaScript utility library that offers numerous helper functions, including `_.clone()` which creates a deep copy of an object.

**Pros and Cons:**

* **Spread Operator:**
    * **Pros:** Concise, readable, often the fastest option.
    * **Cons:** Might not work well with deeply nested objects containing circular references (though newer versions handle this better).
* **`Object.assign()`**:
    * **Pros:** Built-in, handles merging properties from multiple sources.
    * **Cons:** Creates a shallow copy, meaning nested objects are still references to the original object. Can be slower than the spread operator in some cases.
* **Lodash's `_.clone()`:**
    * **Pros:** Creates a deep copy, safe for complex objects with circular references. 
    * **Cons:** Adds a dependency on Lodash, can be slightly slower than the spread operator or `Object.assign()`.

**Other Considerations:**

* The choice of method depends heavily on your use case. If you need a simple shallow copy and performance is crucial, the spread operator is often the best choice. For deep copies or if you need to merge properties from multiple sources, `Object.assign()` or Lodash's `_.clone()` might be more suitable.
* Consider using tools like benchmark.js for more comprehensive and reliable performance testing across different environments and browsers.

**Alternatives:**

Besides the three methods tested in this benchmark, other options include:

* **JSON parsing and stringification:** This method can work but is generally slower and less efficient than the direct object copy approaches.

Related benchmarks:

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

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

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

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):