Benchmark: JavaScript spread operator vs Object.assign without mutation performance

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

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

LLMs can make mistakes. Check important info.

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

**What's being tested?**

The benchmark is comparing the performance of two approaches to merge two objects: using the JavaScript spread operator (`...`) and using `Object.assign()` without mutating the original object.

**Options compared**

The two options being compared are:

1. **Using the JavaScript spread operator**: This approach uses the `...` syntax to create a new object that includes all properties from both `firstObject` and `secondObject`.
2. **Using Object.assign() without mutation**: This approach creates a new object by calling `Object.assign()` with an empty object as the target, and then merging the properties of `firstObject` and `secondObject` into it.

**Pros and cons**

* **Using the JavaScript spread operator:**
	+ Pros:
		- More concise and expressive syntax
		- Less error-prone than using `Object.assign()`
	+ Cons:
		- Can be slower due to object creation overhead
		- May not be compatible with older browsers or environments that don't support the spread operator
* **Using Object.assign() without mutation:**
	+ Pros:
		- Faster and more efficient, as it avoids object creation overhead
		- More widely supported across different browsers and environments
	+ Cons:
		- Less concise and expressive syntax
		- May be more prone to errors if not used correctly

**Library/Dependency**

Neither of these approaches relies on a specific library or dependency. However, `Object.assign()` is a built-in method in JavaScript that has been available since ECMAScript 2015 (ES6).

**Special JS feature/syntax**

There are no special JS features or syntax being tested in this benchmark.

**Other alternatives**

If you want to explore other approaches to merging objects, here are some alternatives:

1. **Using the `Object.keys()` and `reduce()` methods**: You can use `Object.keys()` to get an array of property names from both objects, and then use `reduce()` to create a new object with merged properties.
2. **Using a library like Lodash**: If you need more complex merging logic or want to take advantage of additional features like memoization, you can consider using a library like Lodash.

Here's an example implementation using the `Object.keys()` and `reduce()` methods:
```javascript
const firstObject = { sampleData: 'Hello world' };
const secondObject = { moreData: 'foo bar' };

const finalObject = Object.keys(firstObject).reduce((obj, key) => {
  obj[key] = firstObject[key];
}, {});
finalObject[Object.keys(secondObject)[0]] = secondObject[Object.keys(secondObject)[0]];
```
And here's an example implementation using Lodash:
```javascript
import _ from 'lodash';

const firstObject = { sampleData: 'Hello world' };
const secondObject = { moreData: 'foo bar' };

const finalObject = _.merge({}, firstObject, secondObject);
```
Note that these alternatives may have different performance characteristics or trade-offs depending on your specific use case.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 84 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	2150172.0 Ops/sec
Using Object.assign	5243596.5 Ops/sec

Related benchmarks:

JavaScript spread operator vs Object.assign without mutation performance (version: 0)

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

Created: 4 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 26 days ago):