Benchmark: Object.assign vs direct copy

Tests:

Object.assign
const obj = {hello:"world"}; const newOne = Object.assign({}, obj);
Direct
const obj = {hello:"world"}; const newOne = {...obj};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
Direct

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36

Browser/OS: Chrome 80 on Linux

View result in a separate tab

Test name	Executions per second
Object.assign	4028175.8 Ops/sec
Direct	31352464.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 the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition**

The benchmark measures the performance of two approaches to create a shallow copy of an object in JavaScript:

1. `Object.assign()`: This method creates a new object with the specified properties, copied from the original object.
2. `{...obj}`: This syntax is called "object spread" or "spread operator." It creates a new object with the same properties as the original object.

**Options Compared**

The benchmark compares these two approaches:

* **Pro of `Object.assign()`:** It is a widely supported method in older browsers, and it provides more control over the creation process.
* **Con of `Object.assign()`:** It can lead to slower performance due to the overhead of creating a new object and copying properties.
* **Pros of `{...obj}`:** It is faster and more concise than using `Object.assign()`.
* **Cons of `{...obj}`:**

+ **Browser Support**: While widely supported in modern browsers, older versions might not be compatible.
	+ **Performance Variability**: The performance benefits may vary across different JavaScript engines.

**Library Used**

None. This benchmark only uses built-in JavaScript features.

**Special JS Features/Syntax**

Yes, the `Object.assign()` method is used, which is a built-in JavaScript function. The `{...obj}` syntax is also supported in modern browsers and JavaScript engines.

**Benchmark Preparation Code**

The script preparation code is empty, as no custom logic or setup is required for this benchmark.

**Other Alternatives**

Besides the two approaches tested here, other methods to create shallow copies of objects include:

* `Array.prototype.slice()` with `Object.assign()`: Creates a new array and then uses `Object.assign()` to copy properties from the original object.
* Using `lodash` library's `cloneDeep()`, `assign()`, or `pick()` methods: Provides more flexibility and customization options, but comes with a performance overhead due to the library.

In summary, this benchmark helps measure the performance difference between using `Object.assign()` versus the spread operator syntax for creating shallow copies of objects in JavaScript.

Related benchmarks:

Object.assign vs direct copy (version: 0)

Comparing performance of: Object.assign vs Direct

Created: 4 years ago by: Registered User

Jump to the latest result

Object.assign

Direct

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