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

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	1924392.4 Ops/sec
Using Object.assign	4474362.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents two test cases, each testing the performance of JavaScript objects with varying methods: the spread operator (`...`) and `Object.assign()`. The benchmark aims to compare these two approaches in creating new objects by combining existing ones.

**Options compared:**

1. **Spread Operator (`...`)**: This syntax is used to create a new object by spreading the properties of an existing object into a new object.
2. **`Object.assign()`**: This method is used to copy all enumerable own properties from one or more source objects to a target object.

**Pros and Cons:**

* **Spread Operator (`...`)**:
	+ Pros:
		- More concise and readable syntax
		- Does not require explicit referencing of the source objects
	+ Cons:
		- May lead to unexpected behavior if used with non-object literals or with functions (e.g., `...[1, 2, 3]`)
* **`Object.assign()`**:
	+ Pros:
		- More flexible and powerful, allowing for copying of properties from multiple sources
		- Does not rely on the spread operator syntax, making it safer to use in certain contexts
	+ Cons:
		- Requires more code to achieve the same result

**Library:**

Neither test case relies on any external libraries. The `Object.assign()` method is a built-in JavaScript function.

**Special JS Feature/Syntax:**

There are no special features or syntaxes being tested here, as both test cases use standard JavaScript constructs.

**Other Considerations:**

When choosing between the spread operator and `Object.assign()`, consider the following factors:

* Readability and conciseness: If code readability is important, the spread operator might be a better choice.
* Flexibility and power: If you need to copy properties from multiple sources or use more advanced scenarios (e.g., copying properties with custom values), `Object.assign()` might be a better fit.

**Alternatives:**

For creating new objects by combining existing ones, other approaches include:

1. **Loops**: Manual looping over object properties using `for...in` or `Object.keys()`.
2. **Concatenation**: Using the `+` operator to concatenate two objects (not recommended due to potential performance issues).
3. **Custom functions**: Creating a custom function that iterates over source objects and copies their properties to a target object.

It's worth noting that the spread operator has become increasingly popular and efficient in modern JavaScript, making it a preferred choice for many developers.

Related benchmarks:

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

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

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