Benchmark: JavaScript spread operator vs Object.assign performance v2

Tests:

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

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

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

Browser/OS: Chrome 77 on Mac OS X 10.15.0

View result in a separate tab

Test name	Executions per second
Using the spread operator	48661816.0 Ops/sec
Using Object.assign	3982634.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition:**
The benchmark is designed to compare the performance of two approaches for creating a new object by copying an existing one:

1. Using the spread operator (`...`).
2. Using `Object.assign()`.

**Options Compared:**

* **Using the spread operator (spread syntax)**:
	+ Pros:
		- More concise and readable.
		- Declarative, meaning you specify what you want to create, rather than how.
	+ Cons:
		- May incur a small performance overhead due to JavaScript's complexity.
		- Not supported in older browsers or environments with limited support for modern syntax.
* **Using `Object.assign()`**:
	+ Pros:
		- Widely supported across all browsers and environments.
		- Can be more efficient if you need to copy multiple properties at once.
	+ Cons:
		- More verbose and less readable than the spread operator.
		- Imperative, meaning you specify how to create the new object.

**Library:**
In both test cases, no external library is used. The `Object.assign()` method is a built-in part of the JavaScript language.

**Special JS Feature/Syntax:**
The benchmark uses modern JavaScript syntax features, specifically:

* Spread operator (`...`): Introduced in ECMAScript 2015 (ES6).
* Template literals (`\r\nconst finalObject = {\r\n\t...firstObject,\r\n};`): Also introduced in ES6.

**Other Considerations:**

* The benchmark measures the execution time of each approach, assuming a constant input object.
* The test cases use identical input objects to focus on the performance difference between the two approaches.
* MeasureThat.net is designed to provide accurate and unbiased results by using a consistent setup and testing environment.

**Alternatives:**
If you want to explore alternative approaches for creating new objects in JavaScript, consider:

* Using `Object.create()` and setting properties individually: `const finalObject = Object.create(firstObject); finalObject.propertyName = 'value';`
* Using libraries like Lodash or Ramda, which provide utility functions for working with objects.

Keep in mind that these alternatives might have different performance characteristics and use cases compared to the spread operator and `Object.assign()`.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

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