Benchmark: JavaScript spread operator vs Object.assign performance to merge into new object

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	14882756.0 Ops/sec
Using Object.assign	4166167.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches to merge objects in JavaScript: the spread operator (`...`) and `Object.assign()`.

**Options Compared**

1. **Spread Operator (`...`)**:
	* Pros:
		+ Concise and expressive syntax.
		+ Creates a new object with a shallow copy of the properties from both objects.
		+ Can handle nested objects and arrays.
	* Cons:
		+ Might not be as fast as other approaches, especially for large datasets.
		+ Can lead to unexpected behavior if not used carefully (e.g., when merging objects with circular references).
2. **Object.assign()**:
	* Pros:
		+ Well-established and widely supported syntax.
		+ Can handle nested objects and arrays.
		+ Allows for more control over the merge process (e.g., using `Object.assign()` with an empty object as the target).
	* Cons:
		+ Less concise and less expressive than the spread operator.
		+ Can lead to slower performance compared to the spread operator.

**Library and Purpose**

In this benchmark, no libraries are explicitly mentioned. However, `Object.assign()` is a built-in JavaScript method that allows you to copy properties from one or more sources into a target object.

**Special JS Feature/Syntax**

There's no special JavaScript feature or syntax used in this benchmark, as it focuses on comparing two existing approaches: the spread operator and `Object.assign()`. However, if you're interested in exploring other features, some examples include:

* Arrow functions (`() => {}`) vs traditional function expressions (`function () {}`)
* Template literals (`template literal`) vs string concatenation
* Classes vs prototype-based object creation

**Alternatives**

Other alternatives for merging objects in JavaScript include:

1. **Lodash's merge()` method**: A popular utility library that provides a robust and flexible way to merge objects.
2. **Underscore.js's _.merge()` function**: Another well-known utility library that offers a simple and efficient way to merge objects.
3. **ES6 Object spread operator (`...`) with nested objects**: This approach can be used when working with nested objects, but it may lead to unexpected behavior if not handled carefully.

In summary, the benchmark measures the performance difference between two approaches to merge objects in JavaScript: the spread operator and `Object.assign()`. The spread operator is concise and expressive, but might be slower, while `Object.assign()` is well-established and widely supported but less efficient.

Related benchmarks:

JavaScript spread operator vs Object.assign performance to merge into new object (version: 0)

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

Created: 3 years ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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