Benchmark: JavaScript spread operator vs Object.assign performance - Kien Nguyen

Tests:

Using Object.assign
const finalObject = Object.assign({}, document.body);
Using the spread operator
const finalObject = {...document.body};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Using the spread operator

45.1M/s

Using Object.assign

39.2M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	45,147,248 Ops/sec
Using Object.assign	39,199,332 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarking.

**What is being tested?**

The provided JSON represents a benchmark test comparing the performance of two methods to create a shallow copy of an object: `Object.assign()` and the spread operator (`...`). The test is designed to measure which method is faster in creating a copy of the HTML body element.

**Options compared**

There are only two options being compared:

1. **Using Object.assign()**: This method creates a new object by copying all enumerable own properties from another object.
2. **Using the spread operator (`...`)**: This operator creates a new object with the same keys and values as an existing object.

**Pros and Cons of each approach**

**Object.assign()**:

Pros:

* Widely supported in modern browsers
* Can be used to create shallow copies of objects
* Allows for more control over the copy process (e.g., using the `Array.prototype.slice()` method to create a copy)

Cons:

* Can be slower than the spread operator due to the overhead of function calls and object creation
* Requires explicit code to create the copy, which can lead to errors if not used correctly

**Spread Operator (`...`)**:

Pros:

* Faster and more concise than Object.assign()
* Can create a shallow copy of objects without additional code

Cons:

* Only supported in modern browsers (Chrome 103+)
* May require additional libraries or polyfills for older browsers
* Less control over the copy process compared to Object.assign()

**Other considerations**

The spread operator is a relatively new feature introduced in ECMAScript 2018. It's faster and more concise than Object.assign() but only works in modern browsers.

If you need to support older browsers, you may want to use Object.assign() or implement a polyfill for the spread operator.

**Libraries used**

There isn't a specific library mentioned in the benchmark definition, but it's likely that the test uses a library like `jsdom` to create a mock HTML document and simulate browser behavior.

**Special JS feature or syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2018. It allows you to create a new object by copying the keys and values from an existing object using the syntax `const newObject = { ... existingObject };`.

**Benchmark preparation code**

The script preparation code for each test case is empty, which means that the benchmarking tool will generate the test cases automatically.

**Individual test cases**

There are two test cases:

1. **Using Object.assign()**: The test case creates a copy of the HTML body element using `Object.assign({}, document.body);`.
2. **Using the spread operator**: The test case creates a copy of the HTML body element using `{...document.body};`.

The benchmarking tool runs each test case multiple times and measures the average execution time per second.

**Latest benchmark result**

The latest benchmark result shows that the spread operator is faster than Object.assign() in creating a shallow copy of the HTML body element, with an average execution time of 4348657.5 executions per second compared to 2265812.25 executions per second for Object.assign().

JavaScript spread operator vs Object.assign performance - Kien Nguyen (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Using Object.assign

Using the spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Object.assign performance - Kien Nguyen (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Using Object.assign

Using the spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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