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

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	2066799.1 Ops/sec
Using Object.assign	5366830.5 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 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.

Related benchmarks:

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

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

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