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

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPad; CPU OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 16 on iOS 16.1.1

View result in a separate tab

Test name	Executions per second
Using the spread operator	15061750.0 Ops/sec
Using Object.assign	8253047.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided benchmark and discuss the pros and cons of different approaches.

**What's being tested:**

The benchmark is testing the performance difference between two ways of merging objects in JavaScript:

1. Using the spread operator (`...`) with object destructuring.
2. Using `Object.assign()` with a new object as the target.

**Benchmark Definition JSON:**

The benchmark definition json contains two test cases, each defining a different way to merge two objects into a single object. The first test case uses the spread operator:

```javascript
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {
  ...firstObject,
  ...secondObject
}
```

The second test case uses `Object.assign()` with a new object as the target:

```javascript
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = Object.assign({}, firstObject, secondObject)
```

**Options compared:**

The benchmark is comparing the performance of these two approaches.

**Pros and Cons:**

1. **Using the spread operator (`...`)**:
	* Pros:
		+ More concise and readable code.
		+ Can be used to merge objects with different structures (e.g., nested objects).
		+ Often faster due to the nature of object creation.
	* Cons:
		+ May not work as expected if the spread operator is used with an array or a non-object value.
		+ Can lead to unexpected behavior if not used carefully.
2. **Using `Object.assign()`**:
	* Pros:
		+ More explicit and predictable code.
		+ Works with arrays, null, and undefined values.
		+ Can be used for other purposes (e.g., cloning objects).
	* Cons:
		+ May result in slower performance due to the overhead of function calls.

**Library usage:**

There is no library explicitly mentioned in the benchmark definition. However, `Object.assign()` uses a built-in JavaScript method that relies on the browser's engine for its implementation.

**Special JS feature or syntax:**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES8) and has since become a standard feature in modern browsers.

**Other alternatives:**

If you're looking for alternative ways to merge objects, consider using:

1. `Object.create()`: A more traditional approach that creates a new object by copying an existing object.
2. `Array.prototype.reduce()`: Can be used to merge objects with arrays or other iterables.
3. Libraries like Lodash or Underscore.js, which provide utility functions for merging objects and arrays.

Keep in mind that each alternative has its pros and cons, and the best approach depends on your specific use case and performance requirements.

Related benchmarks:

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

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

Created: one year 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):