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

Tests:

Using the spread operator
const obj = { sampleData: 'Hello world' } const finalObj = { ...obj, single: 'foo' };
Using Object.assign
const obj = { sampleData: 'Hello world' } const finalObj = Object.assign(obj, { single: 'foo' });

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Using the spread operator

54.5M/s

Using Object.assign

28.9M/s

Fastest: Using the spread operator (1.9x faster)

View exact numbers

✓ Using the spread operator: 54,464,856 ops/sec
• Using Object.assign: 28,938,968 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: 8 months ago)

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

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Using the spread operator

78.1M/s

Using Object.assign

37.6M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	78,138,048 Ops/sec
Using Object.assign	37,642,652 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The provided benchmark compares the performance of two approaches to create a new object by spreading an existing object and adding new properties: using the spread operator (`...`) and using `Object.assign()`. The test case focuses on creating a single addition operation, which means only one property is added to the original object.

**Options compared**

Two options are being tested:

1. **Using the spread operator**: This approach uses the syntax `{ ...obj, ...single }` to create a new object that inherits properties from `obj` and adds the `single` property.
2. **Using `Object.assign()`**: This approach uses the method `Object.assign(obj, { single: 'foo' })` to merge two objects: the original object `obj` and an object with the `single` property.

**Pros and Cons**

* **Using the spread operator**:
	+ Pros:
		- More concise and readable code.
		- Efficient in terms of performance, as it only creates a new object reference.
	+ Cons:
		- May be less intuitive for developers who are not familiar with this syntax.
* **Using `Object.assign()`**:
	+ Pros:
		- Widely supported and well-established method.
		- May be more readable for some developers due to its explicit nature.
	+ Cons:
		- Creates a new object reference, which can lead to unnecessary memory allocation.

**Library: Object.assign()**

`Object.assign()` is a built-in JavaScript method that returns a new object with the properties of all the specified source objects. It is used extensively in modern JavaScript development and is supported by most browsers and Node.js versions.

**Special JS feature/syntax: None mentioned**

This benchmark does not use any special JavaScript features or syntax beyond what's commonly known.

**Other alternatives**

While `Object.assign()` has been widely adopted, there are other methods that can achieve similar results:

* **Spread operator with array**: `const finalObj = { ...obj, ...['single'] }`. Note that this creates an array, which may lead to unexpected behavior if not handled correctly.
* **Array spread and Object.fromEntries()**: `const finalObj = Object.fromEntries([[...obj, single: 'foo']]`. This approach is more explicit but has similar performance characteristics to `Object.assign()`.

In summary, the benchmark compares two approaches to create a new object by spreading an existing object and adding a new property. The spread operator offers concise code with good performance, while `Object.assign()` provides a well-established method with slightly less efficient overhead.

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

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

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 (single addition) (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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`