Benchmark: Object.assign vs Object spread vs object assign

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
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 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 11.1.0

View result in a separate tab

Test name	Executions per second
Object.assign	2489450.2 Ops/sec
spread operator	26873170.0 Ops/sec
object assign	419261088.0 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 tested in the provided benchmark.

**Benchmark Definition**

The benchmark tests three different approaches to assign values to an object:

1. `Object.assign()`: This method takes two or more objects as arguments and returns a new object that contains all the properties from each argument. It modifies the original objects by adding, updating, or creating new properties.
2. **Spread Operator (`...`)**: This operator is used to create a new object with the same keys as another object, but with the values spread out into separate key-value pairs. For example, `{ ...params, d: 2 }` creates a new object that takes all the properties from `params` and adds a new property `d` with value `2`.
3. **Object Assign (`params.d = 2; var other = params;`)**: This approach uses direct assignment to modify an existing object and then creates a new variable `other` that references the modified object.

**Options Compared**

The benchmark compares these three approaches in terms of their performance, which is measured by the number of executions per second on a specific browser and device platform.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Object.assign()**
	* Pros: Easy to use, straightforward syntax.
	* Cons: Can be slower than other approaches due to the overhead of creating a new object and merging properties.
2. **Spread Operator (`...`)**:
	* Pros: Concise syntax, can be faster than `Object.assign()` for large objects.
	* Cons: Requires understanding of spread operator syntax and may not be supported in older browsers or environments.
3. **Object Assign (`params.d = 2; var other = params;`)**:
	* Pros: May be the fastest approach due to direct assignment, but can be confusing to read and understand.
	* Cons: Less readable than other approaches, can lead to unintended side effects if not used carefully.

**Library Usage**

The benchmark does not explicitly use any external libraries, but it relies on built-in JavaScript features like `Object.assign()` and the spread operator (`...`).

**Special JS Feature/Syntax**

The benchmark uses the spread operator (`...`) syntax, which is a relatively modern feature introduced in ECMAScript 2018 (ES2018). While this syntax is widely supported, some older browsers or environments may not support it.

In summary, the benchmark provides a neutral evaluation of three different approaches to assign values to an object, highlighting their pros and cons. It also touches on the use of the spread operator (`...`) syntax, which requires understanding of modern JavaScript features.

Related benchmarks:

Object.assign vs Object spread vs object assign (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

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):