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

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);
Using mutation
let firstObject = { sampleData: 'Hello world' } firstObject['moreData'] = 'foo bar'; const finalObject = firstObject;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using mutation

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of three different approaches for creating an object with merged data: using the spread operator (`...`), `Object.assign`, and mutation (direct assignment).

**Options Compared**

1. **Using the Spread Operator**: This approach uses the spread operator (`...`) to merge two objects into a new object.
2. **Using Object.assign**: This approach uses the `Object.assign()` method to merge two objects into a new object.
3. **Mutation**: This approach directly assigns properties from one object to another, without creating a new object.

**Pros and Cons**

* **Using the Spread Operator**:
	+ Pros: concise syntax, easy to read and write.
	+ Cons: may not work in older browsers that don't support spread operator, can be slower due to function call overhead.
* **Using Object.assign**:
	+ Pros: widely supported across browsers, can be faster than spread operator due to method call optimization.
	+ Cons: less readable syntax compared to spread operator, may require more lines of code.
* **Mutation**:
	+ Pros: fast and lightweight, no additional function calls required.
	+ Cons: less readable and maintainable, can lead to bugs if not done carefully.

**Library**

The `Object.assign()` method is a built-in JavaScript library that is widely supported across browsers. It allows you to merge multiple objects into a single object, overwriting any existing properties with the same key.

**Special JS Features or Syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2018 (ES2018) and later versions. It allows you to expand an array or object into a new object, making it easier to merge data.

**Benchmark Result Interpretation**

The latest benchmark result shows the execution per second for each approach:

* **Mutation**: 623631424 executions per second
* **Using the spread operator**: 43871344 executions per second
* **Using Object.assign**: 13334525 executions per second

This suggests that mutation is the fastest approach, followed by using the spread operator, and then `Object.assign`.

**Other Alternatives**

If you don't want to use the spread operator or `Object.assign`, you can also consider other alternatives:

1. **Loose Equal Operator (`==`)**: This method is less readable and may lead to bugs due to type coercion.
2. **Constructor Function**: You can create a constructor function for an object and then call it with the desired properties, but this approach is less efficient than mutation.
3. **Array-like Objects**: You can use array-like objects like `Array.prototype.slice()` or `Object.keys()` to merge data, but these approaches are more complex and may not be as readable.

In general, the spread operator and `Object.assign` are good choices for merging objects due to their readability and maintainability. Mutation is a fast alternative, but it requires careful consideration of potential bugs and edge cases.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	43871344.0 Ops/sec
Using Object.assign	13334525.0 Ops/sec
Using mutation	623631424.0 Ops/sec

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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