Benchmark: JavaScript copy object spread operator vs Object.assign 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance difference between two methods to create a new object by copying data from existing objects:

1. **Spread Operator (`...`)**: This method uses the spread operator to create a new object with properties from both `firstObject` and `secondObject`. The syntax is: `{ ...firstObject, ...secondObject }`.
2. **`Object.assign()`**: This method creates a new object by copying data from two existing objects using the `Object.assign()` function. The syntax is: `Object.assign({}, firstObject, secondObject)`.

**Options compared**

The benchmark compares these two approaches:

* Spread Operator (`...`)
* `Object.assign()`

**Pros and Cons of each approach:**

1. **Spread Operator (`...`)**:
	* Pros:
		+ Concise syntax
		+ Easy to read and understand
		+ Can be used with object destructuring (e.g., `{ ...firstObject, ...secondObject } = { a: 1, b: 2 };`)
	* Cons:
		+ May not work as expected if the objects have different property names or types
		+ Not supported in older browsers (pre-2015)
2. **`Object.assign()`**:
	* Pros:
		+ Widespread support across modern browsers and Node.js versions
		+ Works with objects of any shape and structure
	* Cons:
		+ Less concise syntax compared to the spread operator
		+ Can be slower for large objects

**Library/Technology used**

There is no explicit library mentioned in this benchmark. However, it's worth noting that `Object.assign()` has been a part of the JavaScript language since ECMAScript 2015 (ES6).

**Special JS feature/syntax**

There are no special JavaScript features or syntax mentioned in this benchmark.

**Other considerations**

When deciding between these two approaches, consider the following:

* If you need to create a new object with properties from both existing objects, and readability is important, use the spread operator.
* If you need to work with older browsers or require more control over the merge process (e.g., handling null or undefined values), use `Object.assign()`.

**Alternatives**

Some other methods for creating a new object by copying data from existing objects include:

1. **`lodash.merge()`**: A popular utility library that provides a safe and efficient way to merge objects.
2. **`merge()` function in Lodash-like libraries**: Some libraries (e.g., `lodash`, `immer`) provide a `merge()` function for merging objects.
3. **Using the `for...in` loop or `Object.keys()` method**: These methods can be used to iterate over object properties and create a new object manually.

Keep in mind that these alternatives might have different performance characteristics compared to the spread operator and `Object.assign()`.

Related benchmarks:

JavaScript copy object spread operator vs Object.assign performance (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>

Fastest: N/A

Slowest: N/A

No previous run results

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