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

Historical Performance Data aggregated from 856 community runs

Desktop Results:

Chrome 659 runs

Using the spread operator

34.1M/s

Using Object.assign

13.1M/s

Fastest: Using the spread operator (2.6x faster)

View exact numbers

✓ Using the spread operator: 34,057,664 ops/sec
• Using Object.assign: 13,059,139 ops/sec

Firefox 106 runs

Using Object.assign

27.3M/s

Using the spread operator

13.8M/s

Fastest: Using Object.assign (2.0x faster)

View exact numbers

✓ Using Object.assign: 27,264,986 ops/sec
• Using the spread operator: 13,827,054 ops/sec

Safari 25 runs

Using the spread operator

16.9M/s

Using Object.assign

12.7M/s

Fastest: Using the spread operator (1.3x faster)

View exact numbers

✓ Using the spread operator: 16,926,222 ops/sec
• Using Object.assign: 12,740,767 ops/sec

Other 16 runs

Using the spread operator

24.8M/s

Using Object.assign

8.2M/s

Fastest: Using the spread operator (3.0x faster)

View exact numbers

✓ Using the spread operator: 24,788,604 ops/sec
• Using Object.assign: 8,219,880 ops/sec

Mobile Results:

Chrome 31 runs

Using the spread operator

16.7M/s

Using Object.assign

6.8M/s

Fastest: Using the spread operator (2.4x faster)

View exact numbers

✓ Using the spread operator: 16,650,817 ops/sec
• Using Object.assign: 6,834,563 ops/sec

Safari 19 runs

Using the spread operator

15.2M/s

Using Object.assign

13.3M/s

Fastest: Using the spread operator (1.2x faster)

View exact numbers

✓ Using the spread operator: 15,238,333 ops/sec
• Using Object.assign: 13,250,666 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: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Mac OS X 10.15

View result in a separate tab

Using Object.assign

51.8M/s

Using the spread operator

26.2M/s

View exact numbers

Test name	Executions per second
✓ Using Object.assign	51,817,564 Ops/sec
Using the spread operator	26,183,906 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 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.

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

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

Created: 8 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 856 community runs

Desktop Results:

Chrome 659 runs

Firefox 106 runs

Safari 25 runs

Other 16 runs

Mobile Results:

Chrome 31 runs

Safari 19 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 (version: 0)

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

Created: 8 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 856 community runs

Desktop Results:

Chrome 659 runs

Firefox 106 runs

Safari 25 runs

Other 16 runs

Mobile Results:

Chrome 31 runs

Safari 19 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`