Benchmark: JavaScript spread operator vs Object.assign performance create new

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

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

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

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	1632424.6 Ops/sec
Using Object.assign	3866353.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Main Objective:**
The main objective of this benchmark is to compare the performance of two ways to merge objects in JavaScript:

1. Using the spread operator (`...` syntax)
2. Using `Object.assign()`

**Options Compared:**

* **Using the spread operator**: This method uses the rest-spread operator (`...`) to create a new object with properties from both `firstObject` and `secondObject`. The syntax is `{ ...firstObject, ...secondObject }`.
* **Using Object.assign()**: This method creates a new object and assigns values from `firstObject` and `secondObject` using the `assign()` method. The syntax is `const finalObject = Object.assign({}, firstObject, secondObject);`.

**Pros and Cons:**

* **Using the spread operator**:
	+ Pros:
		- More concise and expressive code
		- Faster execution time (as it avoids the overhead of function calls)
	+ Cons:
		- Less readable for some developers who are not familiar with the rest-spread syntax
* **Using Object.assign()**:
	+ Pros:
		- More widely supported in older browsers and versions of JavaScript
		- More explicit and understandable code for some developers
	+ Cons:
		- Slower execution time (due to function call overhead)

**Other Considerations:**

* Both methods assume that the properties of `firstObject` and `secondObject` are strings or values, not objects themselves.
* The benchmark does not account for differences in performance when dealing with nested objects or arrays.

**Library and Special JS Features:**
None mentioned in this benchmark. However, it's worth noting that some JavaScript engines may have additional optimizations or features that affect performance in this type of benchmark.

**Alternatives:**

Other methods to merge objects include:

* Using the `Object.create()` method
* Using a custom loop to assign properties from one object to another
* Using libraries like Lodash, which provides a `merge` function for merging objects

These alternatives may have different performance characteristics and trade-offs in terms of readability and maintainability.

Related benchmarks:

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

create new object when using Object.assign.

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