Benchmark: JavaScript spread operator vs direct property change 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' } firstObject.moreData = 'foo bar';

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 year ago)

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	11703943.0 Ops/sec
Using Object.assign	8654268.0 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 JSON data and explain what's being tested in each benchmark.

**What is being tested?**

MeasureThat.net is testing the performance difference between two approaches:

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

The tests are designed to compare these two approaches on a specific use case, where you have two objects: `firstObject` and `secondObject`, each with some data. The test creates a third object `finalObject` by merging `firstObject` and `secondObject` using both methods.

**Options compared**

We're comparing the performance of two specific syntaxes:

1. **Spread operator (`...`)**: This is a shorthand way to merge objects in JavaScript. It allows you to create a new object by copying all the enumerable properties from one or more source objects.
2. **Object.assign()**: This method copies the enumerable properties from an object specified by a given `value` or multiple values.

**Pros and cons**

* **Spread operator (`...`)**:
	+ Pros: concise, readable, and efficient.
	+ Cons: not supported in older browsers (IE 11+) and requires modern JavaScript features.
* **Object.assign()**:
	+ Pros: widely supported, no performance issues reported by MeasureThat.net.
	+ Cons: can be less readable than the spread operator syntax.

In general, the spread operator is a more modern and concise way to merge objects. However, Object.assign() has been around for longer and might still be a better choice if you need to support older browsers or prefer a more traditional approach.

**Library/Functionality being tested**

There's no specific library being used in these tests. The functionality being tested is built-in JavaScript syntax: the spread operator (`...`) and `Object.assign()`.

**Special JS feature/syntax (not applicable)**

There are no special features like ES6 modules, Promises, or async/await in this benchmark.

Related benchmarks:

JavaScript spread operator vs direct property change performance (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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