Benchmark: JavaScript spread operator vs Object.assign performance (blackcoffeecat)

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: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1690698.0 Ops/sec
Using Object.assign	3420156.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what's being tested on MeasureThat.net.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches to merge objects in JavaScript: the spread operator (`...`) and `Object.assign()`. The benchmark is designed to measure which approach is faster, allowing users to compare their performance under different scenarios.

**Options compared:**

1. **Spread Operator (`...`)**: This method uses the syntax `{ ...firstObject, ...secondObject }` to merge two objects. It creates a new object by copying properties from both input objects.
2. **Object.assign()**: This method takes multiple sources (in this case, `firstObject` and `secondObject`) as arguments and returns a new object with merged properties.

**Pros and Cons:**

* Spread Operator (`...`):
	+ Pros:
		- More concise and readable code
		- Can be used to merge objects in a more expressive way
	+ Cons:
		- May not be as efficient as `Object.assign()` for large objects or deep merges
		- Requires compatibility with older browsers (before ECMAScript 2018)
* Object.assign():
	+ Pros:
		- More efficient for large objects or deep merges
		- More widely supported across browsers and Node.js versions
	+ Cons:
		- Less readable code compared to the spread operator
		- Can be more verbose

**Library usage:**

In this benchmark, no specific libraries are used. However, `Object.assign()` relies on the built-in JavaScript object methods.

**Special JS features/syntax:**

None mentioned in the provided Benchmark Definition json or individual test cases.

Related benchmarks:

JavaScript spread operator vs Object.assign performance (blackcoffeecat) (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):