Benchmark: JavaScript spread operator vs Object.assign performance immutable

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using Object.assign no mutation

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	38545340.0 Ops/sec
Using Object.assign	10769090.0 Ops/sec
Using Object.assign no mutation	8661344.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is tested on the provided JSON and explain the different approaches compared.

**Benchmark Overview**

The benchmark measures the performance of two ways to merge objects in JavaScript: using the spread operator (`...`) and `Object.assign()`. The tests are designed to preserve previous data when merging two objects.

**Options Compared**

1. **Using the spread operator (`...`)**:
	* This approach uses the syntax `{ ...firstObject, ...secondObject }` to create a new object with merged properties from both `firstObject` and `secondObject`.
	* The pros of this approach are that it is concise and expressive, making it easier to read and write code.
	* However, it may incur a performance overhead due to the creation of a new object and potentially more memory allocation.
2. **Using `Object.assign()`**:
	* This approach uses the `Object.assign()` method to merge two objects into one: `const finalObject = Object.assign(firstObject, secondObject);`.
	* The pros of this approach are that it is widely supported and can handle more complex object merges (e.g., with nested objects).
	* However, it may require more code to achieve the same result as using the spread operator.
3. **Using `Object.assign()` without mutation (`Object.assign({}, firstObject, secondObject)`)**:
	* This approach uses `Object.assign()` to merge two objects into a new object: `const finalObject = Object.assign({}, firstObject, secondObject);`.
	* The pros of this approach are that it avoids mutating the original objects and creates a new object with merged properties.
	* However, it may still incur some performance overhead due to the creation of multiple objects.

**Library/Utility Used**

None, as this is a built-in JavaScript feature (`...` spread operator) or a standard method (`Object.assign()`).

**Special JS Features/Syntax**

The benchmark uses the new spread operator syntax (`{ ...firstObject, ...secondObject }`) which was introduced in ECMAScript 2018 (ES2018). This syntax allows for more concise and expressive object merging.

**Other Considerations**

* Memory allocation: Creating a new object using the spread operator may incur more memory allocation than using `Object.assign()`.
* Performance overhead: While using the spread operator might be slower due to the creation of a new object, it can still provide better readability and maintainability.
* Browser support: All three approaches are widely supported in modern browsers.

**Alternatives**

If you're not interested in using the latest JavaScript features or want more control over the merging process, alternative methods include:

1. `Object.assign()` with nested objects support (e.g., using `Object.assign()` recursively).
2. Manually iterating through object properties and assigning values.
3. Using a library like Lodash's `merge` function to handle complex object merges.

However, these alternatives may come at the cost of increased code complexity or performance overhead.

Related benchmarks:

JavaScript spread operator vs Object.assign performance immutable (version: 0)

Performance of object spread vs Object.assign when while preserving previous data.

Comparing performance of: Using the spread operator vs Using Object.assign vs Using Object.assign no mutation

Created: 6 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using Object.assign no mutation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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