Benchmark: Object.assign vs spread operator vs mutation

Tests:

Object.assign
var params = { b:"hello", c: true, d:7 }; var other = Object.assign({ a: 2 }, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var other = { a: 2, ...params };
Mutation
var params = { b:"hello", c: true, d:7 }; params.a = 2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
Mutation

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark is designed to compare the performance of three different approaches for object assignment in JavaScript: `Object.assign()`, the spread operator (`...`), and mutating the object directly.

**Approach Comparison**

1. **Object.assign()**: This method creates a new object by copying all enumerable own properties from one or more source objects into a new object.
	* Pros:
		+ Explicitly creates a new object, which can be beneficial for performance-critical code paths.
		+ Can handle complex cases like nested objects and arrays.
	* Cons:
		+ May incur overhead due to the creation of a new object.
2. **Spread Operator (`...`)**: This method uses the spread operator to create a new object by spreading the properties of an existing object.
	* Pros:
		+ More concise and readable than `Object.assign()`.
		+ Often faster due to its simplicity.
	* Cons:
		+ May not handle complex cases like nested objects and arrays correctly.
3. **Mutation**: This approach modifies the original object directly by assigning new values to its properties.
	* Pros:
		+ Typically fastest, as it only involves assigning new values to existing properties.
	* Cons:
		+ Can be less readable and maintainable due to side effects.

**Library and Special JS Features**

None of the test cases use any external libraries or special JavaScript features beyond what is built into the browser. The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2018 (ES2020).

**Benchmark Preparation Code**

The provided benchmark preparation code is empty, which means that MeasureThat.net generates the necessary code for each test case.

**Other Alternatives**

Besides these three approaches, there are other ways to assign values to an object in JavaScript:

* Using `Object.create()`: This method creates a new object by creating a new instance of an existing prototype.
* Using `Object.assign()` with an array: Some older browsers support using an array as the first argument to `Object.assign()`, which can create a new object.

However, these alternatives are not included in this benchmark.

**Benchmark Result Interpretation**

The latest benchmark result shows that:

* The "Mutation" approach is the fastest, likely due to its simplicity and lack of overhead.
* The "spread operator" approach is slightly slower than the "mutation" approach but still faster than `Object.assign()`.
* The "Object.assign()" approach is the slowest, possibly due to its creation of a new object.

Keep in mind that these results may vary depending on the specific use case and browser version.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3602.2 Safari/537.36

Browser/OS: Chrome 72 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	1749752.2 Ops/sec
spread operator	892134.0 Ops/sec
Mutation	117614064.0 Ops/sec

Related benchmarks:

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

Comparing performance of: Object.assign vs spread operator vs Mutation

Created: 6 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

Mutation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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