Benchmark: Object.assign vs spread operator : owntest v2

HTML Preparation code:

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

Tests:

Object.assign
const messageInternal = { a: 1 , b: 2 }; const message = { id: 1111, name: 'SOME', isActive: 1, country: 'USA', createdAt: '2013-09-26T16:35:41.047Z', updatedAt: '2013-09-26T16:35:41.057Z', createdBy: '', updatedBy: '', things: [ 34, 86 ], internal: messageInternal }; var other = Object.assign({ a: 2 }, message);
spread operator
const messageInternal = { a: 1 , b: 2 }; const message = { id: 1111, name: 'SOME', isActive: 1, country: 'USA', createdAt: '2013-09-26T16:35:41.047Z', updatedAt: '2013-09-26T16:35:41.057Z', createdBy: '', updatedBy: '', things: [ 34, 86 ], internal: messageInternal }; var other = { a: 2, ...message };
lodash clonedeep
const messageInternal = { a: 1 , b: 2 }; const message = { id: 1111, name: 'SOME', isActive: 1, country: 'USA', createdAt: '2013-09-26T16:35:41.047Z', updatedAt: '2013-09-26T16:35:41.057Z', createdBy: '', updatedBy: '', things: [ 34, 86 ], internal: messageInternal }; var other = _.cloneDeep(message);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
lodash clonedeep

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 llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript operations can be challenging due to the browser's dynamic nature and the numerous factors that influence execution time.

**Benchmark Overview**

The benchmark compares three approaches for creating a new object by merging an existing object (`messageInternal`) with another object (`message`):

1. `Object.assign()`
2. The spread operator (`...`)
3. `_.cloneDeep()` from Lodash (a popular utility library)

**Options Compared**

The benchmark tests the performance of these three approaches in two ways:

* **Raw Execution Time**: Measures how long each approach takes to execute, typically measured in milliseconds or seconds.
* **Executions Per Second (EPS)**: Calculates how many times each approach can execute within a second, which provides an indication of performance.

**Pros and Cons of Each Approach**

1. `Object.assign()`:
	* Pros: Widely supported, easy to use, and efficient for simple merges.
	* Cons: Can be slow for deep object merges due to its recursive nature, and may lead to unexpected behavior if not used carefully.
2. Spread Operator (`...`):
	* Pros: Fast and efficient for shallow object merges, concise syntax, and widely supported in modern browsers.
	* Cons: May not work as expected with complex objects or custom objects that don't support spreadable properties.
3. `_.cloneDeep()` from Lodash:
	* Pros: Robust and reliable way to create deep copies of objects, useful for avoiding unintended modifications.
	* Cons: Slower than the spread operator due to its cloning algorithm, and may require additional dependencies (Lodash).

**Library and Purpose**

`_.cloneDeep()` is a function from the Lodash library, which provides a set of utility functions for working with JavaScript data structures. The purpose of `_.cloneDeep()` is to create a deep copy of an object, ensuring that any modifications made to the original object do not affect the cloned object.

**Special JS Feature or Syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES2018) and allows for creating new objects by merging existing properties. It's a concise way to create new objects while avoiding code duplication.

**Alternatives**

Other alternatives for creating new objects include:

* Using `Object.create()` or `Object.assign()` with an empty object as the target
* Utilizing a library like Immutable.js for immutable data structures
* Implementing custom merge functions using JavaScript's built-in `Object.keys()`, `Array.prototype.forEach()`, and other methods.

Keep in mind that the choice of approach depends on the specific use case, performance requirements, and personal preference.

Related benchmarks:

Object.assign vs spread operator : owntest v2 (version: 0)

Comparing performance of: Object.assign vs spread operator vs lodash clonedeep

Created: 7 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

lodash clonedeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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