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

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Using the spread operator

21.6M/s

Using Object.assign

5.9M/s

Fastest: Using the spread operator (3.7x faster)

View exact numbers

✓ Using the spread operator: 21,611,484 ops/sec
• Using Object.assign: 5,866,378 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Windows

View result in a separate tab

Using Object.assign

26.2M/s

Using the spread operator

18.1M/s

View exact numbers

Test name	Executions per second
✓ Using Object.assign	26,247,028 Ops/sec
Using the spread operator	18,068,720 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 5 years ago by: Registered User

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 5 years ago by: Registered User

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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