Benchmark: JavaScript spread operator vs Object.assign with new empty object

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 (Macintosh; Intel Mac OS X 10.15; rv:97.0) Gecko/20100101 Firefox/97.0

Browser/OS: Firefox 97 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	7621328.5 Ops/sec
Using Object.assign	11178984.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark is designed to compare the performance of two approaches for merging objects in JavaScript: the spread operator (`...`) and `Object.assign()`. The test creates two objects, merges them using each approach, and measures the execution time.

**Options Compared**

There are two options being compared:

1. **Spread Operator (`...`)**: This method uses the syntax `{ ...obj1, ...obj2 }` to merge two objects. It iterates over the properties of the first object and adds them to the resulting object.
2. **Object.assign()**: This method takes multiple objects as arguments and returns a new object with the merged properties.

**Pros and Cons**

* **Spread Operator (`...`)**:
	+ Pros:
		- More concise and expressive syntax.
		- Can be more readable, especially for simple merges.
		- Less overhead since it doesn't require function calls or method invocation.
	+ Cons:
		- May not work as expected if the properties are functions or have other complex types.
		- Can lead to confusion if not used carefully (e.g., spreading an array instead of an object).
* **Object.assign()**:
	+ Pros:
		- Robust and widely supported, working with various data types and edge cases.
		- Less prone to errors due to its explicit behavior.
	+ Cons:
		- More verbose syntax.
		- Requires function calls or method invocation, which can introduce overhead.

**Library Usage**

There is no library explicitly mentioned in the benchmark definition. However, `Object.assign()` is a built-in JavaScript method that does not require any external libraries.

**Special JS Feature/Syntax**

The benchmark uses the spread operator (`...`), which is a relatively recent feature introduced in ECMAScript 2018 (ES9). It allows for more concise and expressive merging of objects. This syntax was supported by most modern browsers before ES9, but it's now widely adopted.

**Alternative Approaches**

Other approaches to merge objects include:

1. **Loose Equality**: Using `=` or `||` to combine properties.
```javascript
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, c: obj2.b }; // Not recommended due to potential errors
```
2. **Array methods**: Converting objects to arrays and using array methods like `concat()` or `reduce()`.
```javascript
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const arr1 = Object.values(obj1);
const arr2 = Object.values(obj2);
const merged = arr1.concat(arr2); // Not recommended due to potential errors
```
3. **For...in loops**: Iterating over properties and assigning values manually.
```javascript
const obj1 = { a: 1 };
const obj2 = { b: 2 };
for (let prop in obj1) {
    merged[prop] = obj1[prop];
}
for (let prop in obj2) {
    merged[prop] = obj2[prop];
} // Not recommended due to performance and readability concerns
```
While these approaches may work, they are generally less efficient, more error-prone, and less readable than the spread operator or `Object.assign()`.

Related benchmarks:

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