Benchmark: JavaScript spread operator vs Object.assign performance

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: 2 days 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	35803408.0 Ops/sec
Using Object.assign	37887588.0 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 JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition**

The benchmark tests the performance of two approaches to merge two objects: using the spread operator (`...`) and `Object.assign()`.

**Options being compared**

1. **Using the spread operator (`...`)**: This approach uses the rest/spread syntax to merge the two objects, creating a new object with all properties from both sources.
2. **Using `Object.assign()`**: This approach uses the `Object.assign()` method to merge the two objects, copying all enumerable own properties from one or more source objects to a target object.

**Pros and Cons of each approach**

* **Using the spread operator (`...`)**:
	+ Pros: concise, readable syntax; works with any type of data (not just objects).
	+ Cons: may be slower than `Object.assign()` due to the overhead of parsing the rest/spread syntax.
* **Using `Object.assign()`**:
	+ Pros: widely supported and well-established method; can be faster than using the spread operator due to its optimized implementation.
	+ Cons: less readable syntax, may require more code to achieve the same result.

**Library/Function used**

None of these approaches rely on a specific library or function. However, it's worth noting that `Object.assign()` is a built-in method in JavaScript, while the spread operator (`...`) was introduced in ECMAScript 2015 (ES6).

**Special JS feature/syntax**

The benchmark uses ES6 syntax for the spread operator (`...`). This means that users with older browsers or without access to modern JavaScript features may not be able to run this specific test.

**Other alternatives**

If you wanted to compare other approaches, here are a few options:

1. **Using `Array.prototype.concat()`**: Another method for merging objects, although less efficient than using the spread operator or `Object.assign()`.
2. **Using a library like Lodash's `merge()` function**: A popular utility library that provides a convenient way to merge objects, but may introduce additional overhead.

**Benchmark preparation code**

Since this is a microbenchmark, the preparation code is minimal and focuses on setting up the test environment:

```javascript
const firstObject = { sampleData: 'Hello world' };
const secondObject = { moreData: 'foo bar' };

if (testName === 'Using Object.assign') {
  const finalObject = Object.assign(firstObject, secondObject);
} else if (testName === 'Using the spread operator') {
  const finalObject = { ...firstObject, ...secondObject };
}
```

The benchmark code itself is not provided here, but it's likely a simple timing loop that runs each test case multiple times and reports the results.

Overall, this benchmark provides a useful comparison between two common approaches to merging objects in JavaScript, helping developers understand the performance implications of their choice.

Related benchmarks:

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

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

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