Benchmark: Check JS spread operator vs Object.assign performance

Tests:

Object.assign
const a = { 'a': '1', 'b1': '2', 'b2': '2', 'b3': '2', 'b4': '2', 'b5': '2', } const b = { 'a': '2', 'c': '3', } const c = { 'a': '3', } const finalObject = Object.assign({}, {a, b,c });
Spread
const a = { 'a': '1', 'b1': '2', 'b2': '2', 'b3': '2', 'b4': '2', 'b5': '2', } const b = { 'a': '2', 'c': '3', } const c = { 'a': '3', } const finalObject = { ...a, ...b, ...c };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Linux

View result in a separate tab

Test name	Executions per second
Object.assign	8149225.5 Ops/sec
Spread	15210973.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches: using `Object.assign()` and using the spread operator (`...`) in JavaScript. The test creates three objects, `a`, `b`, and `c`, with overlapping properties. It then attempts to merge these objects into a single object, `finalObject`.

**Options Being Compared**

There are two options being compared:

1. **`Object.assign()`**: This method takes multiple sources and merges them into a new object. In the test case, it is used as follows: `const finalObject = Object.assign({}, {a, b, c});`.
2. **Spread Operator (`...`)**: This operator allows an object to be expanded into another object. In the test case, it is used as follows: `const finalObject = {...a, ...b, ...c};`.

**Pros and Cons**

*   **`Object.assign()`**:
    *   Pros: Can handle multiple sources, supports deep merging.
    *   Cons: Can be slower for large objects due to the overhead of creating new arrays and objects.
    *   Also requires the first argument to be an object (the target object), which can add complexity if not handled correctly.
*   **Spread Operator (`...`)**:
    *   Pros: Faster, more concise, and easier to read. Supports nested objects without requiring explicit merging logic.
    *   Cons: Only supports shallow merging of objects with overlapping keys.

**Library/Functionality Used**

None are explicitly mentioned in the provided code.

**Special JS Features/Syntax**

There is no special JavaScript feature or syntax being used in this benchmark, just standard ES6+ syntax.

**Other Alternatives**

If `Object.assign()` and spread operator were not available:

*   You could use the `lodash.merge()` function from the Lodash library.
*   Alternatively, you can write your own custom function to merge objects.

Related benchmarks:

Check JS spread operator vs Object.assign performance (version: 0)

Comparing performance of: Object.assign vs Spread

Created: one year ago by: Guest

Jump to the latest result

Object.assign

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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