Benchmark: JavaScript spread operator vs Object.assign performance, non mutating

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_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

Browser/OS: Safari 14 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	2568284.0 Ops/sec
Using Object.assign	4589270.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 what is being tested in this benchmark.

**Benchmark Goal**

The goal of this benchmark is to compare the performance of two different ways to merge two objects in JavaScript: using the spread operator (`...`) and `Object.assign()`.

**Options Compared**

There are only two options being compared:

1. **Using the Spread Operator**: This method uses the spread operator (`...`) to create a new object with the merged properties.
2. **Using Object.assign()**: This method uses the `Object.assign()` function to merge the properties of two objects into a new object.

**Pros and Cons**

* **Using the Spread Operator**:
	+ Pros: concise, readable, and efficient for simple merges.
	+ Cons: only works with objects that have enumerable properties, may be slower for very large datasets due to the overhead of creating a new array.
* **Using Object.assign()**:
	+ Pros: more flexible, can handle non-enumerable properties, and is generally faster for large datasets.
	+ Cons: less readable and more verbose than using the spread operator.

**Library and Special JS Feature**

There are no libraries being used in this benchmark. However, the use of the spread operator (`...`) is a special JavaScript feature that was introduced in ECMAScript 2018 (ES2018). This feature allows for more concise and expressive way of creating new objects with merged properties.

**Other Considerations**

When deciding between these two options, you should consider the size and complexity of your dataset. For simple merges, using the spread operator is a good choice due to its conciseness and readability. However, if you're dealing with very large datasets or need more flexibility in handling non-enumerable properties, `Object.assign()` might be a better option.

**Alternatives**

Other alternatives for merging objects include:

* **Object.merge()**: Some libraries, like Lodash, provide an `Object.merge()` function that merges two objects.
* **Array.prototype.reduce()**: You can use the `reduce()` method on an array of key-value pairs to merge two objects.
* **For...of loop**: You can use a for-of loop with the `entries()` method on an object to iterate over its properties and merge them into a new object.

However, these alternatives might not be as concise or readable as using the spread operator or `Object.assign()`.

Related benchmarks:

JavaScript spread operator vs Object.assign performance, non mutating (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):