Benchmark: JavaScript Object.assign() vs object spread operator

Tests:

Using the spread operator
const evt = { name: 'Test Object', amount: 1234 } const obj1 = { ...evt, section: 'zxcv', subsection: '123' } const obj2 = { ...evt, section: 'asdf', subsection: 'qwer' }
Using Object.assign
const evt = { name: 'Test Object', amount: 1234 } const obj1 = Object.assign({}, evt, { section: 'zxcv', subsection: '123' }) const obj2 = Object.assign({}, evt, { section: 'asdf', subsection: 'qwer' })

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/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	45529972.0 Ops/sec
Using Object.assign	9403204.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 benchmark and explain what's being tested.

**Benchmark Purpose:**
The benchmark compares the performance of two approaches to create an object by spreading another object:

1. **Object Spread Operator (ES6+):** `const obj = { ...evt, section: 'zxcv', subsection: '123' }`
2. **`Object.assign()` method:** `const obj = Object.assign({}, evt, { section: 'zxcv', subsection: '123' })`

The benchmark aims to measure which approach is faster and more efficient.

**Options Compared:**

* **Object Spread Operator (ES6+):** uses the spread operator (`...`) to create a new object by copying the properties of `evt` and adding additional properties.
* **`Object.assign()` method:** uses the `Object.assign()` method to merge two or more objects into a new object.

**Pros and Cons:**

* **Object Spread Operator (ES6+):**
	+ Pros:
		- More concise and expressive syntax.
		- Faster execution, as it avoids the overhead of function calls.
	+ Cons:
		- May not work in older browsers that don't support ES6+ features.
		- Can be slower due to the way JavaScript engines optimize the spread operator.
* **`Object.assign()` method:**
	+ Pros:
		- Works in all modern browsers, including older versions.
		- Can be faster due to the optimization of function calls by some JavaScript engines.
	+ Cons:
		- More verbose syntax, which can make it less readable.

**Library/Function Used:**
None specific. Both approaches use built-in JavaScript features or functions.

**Special JS Feature/Syntax:**
The benchmark uses ES6+ features (spread operator) and the `Object.assign()` method, which is a part of the ECMAScript standard. No special syntax is required for these tests.

**Other Alternatives:**

* **`Object.create()` method:** Another way to create an object by setting its prototype.
* **`Array.prototype.slice()` or `Array.prototype.copy()` methods:** Not typically used for creating objects, but could be used in some cases where a shallow copy of an array is needed.

In general, the benchmark provides a good representation of the trade-offs between conciseness and performance in JavaScript object creation.

Related benchmarks:

JavaScript Object.assign() vs object spread operator (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>

Fastest: N/A

Slowest: N/A

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