Benchmark: JavaScript spread operator vs Object.assign performance fixed 2222

Script Preparation code:

var firstObject = {
    "id": "2d10ffad-678b-4f9b-9d7e-1fd57879928d",
    "name": "Gon Freecss",
    "age": 100,
    "wallet": {
      "CNY": {
        "balance": 94306.78,
        "exchangeRate": 4.45
      },
      "USD": {
        "balance": 106.84,
        "exchangeRate": 29.96
      },
      "NTD": {
        "balance": 89171098.51,
        "exchangeRate": 1
      }
    }
  }
var secondObject = {
    "id": "b8eb86c2-1386-4b91-a87f-a3b16f6ebca5",
    "name": "Killua Zoldyck",
    "age": 96,
    "wallet2": {
      "CNY2": {
        "balance2": 59390.08,
        "exchangeRate2": 4.45
      },
      "USD2": {
        "balance2": 446.76,
        "exchangeRate2": 29.96
      },
      "NTD2": {
        "balance2": 49592399.77,
        "exchangeRate2": 1
      }
    }
  }

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 13; SM-A236E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 111 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	468039.5 Ops/sec
Using Object.assign	870152.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark and its options.

**Benchmark Definition**

The benchmark is designed to compare the performance of two ways to merge two objects in JavaScript: using the spread operator (`...`) and `Object.assign`. The test cases are:

1. Using the spread operator (`const finalObject = {...firstObject, ...secondObject};`)
2. Using `Object.assign` (`const finalObject = Object.assign({}, firstObject, secondObject);`)

**Options Compared**

The two options being compared are:

1. **Using the Spread Operator (Destructuring)**: This method uses the spread operator to merge the properties of two objects into a new object.
2. **Using `Object.assign`**: This method uses the `Object.assign` function to merge the properties of two objects into a new object.

**Pros and Cons**

**Using the Spread Operator (Destructuring):**

Pros:

* More concise and readable code
* Can be used with modern browsers that support the spread operator
* Faster execution time due to the compiler's ability to optimize it

Cons:

* May not work as expected in older browsers or versions of JavaScript
* Can lead to unexpected behavior if not used carefully (e.g., when merging objects with arrays)

**Using `Object.assign`:**

Pros:

* Works consistently across all browsers and versions of JavaScript
* Can be used with legacy browsers that don't support the spread operator

Cons:

* More verbose code
* May require additional steps to achieve the desired result (e.g., using the `concat` method)
* Can lead to slower execution time due to the overhead of function calls

**Library/Functionality Used**

In this benchmark, no libraries or functions are explicitly mentioned. However, it's worth noting that `Object.assign` is a built-in JavaScript function.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark. Both options rely on standard JavaScript syntax and do not use any advanced or experimental features.

**Other Alternatives**

If you're looking for alternatives to the spread operator, you can consider using `lodash.merge` or other utility libraries that provide a more robust way of merging objects. For `Object.assign`, you can use the `concat` method or other workarounds to achieve the desired result.

In summary, this benchmark provides a straightforward comparison between two common ways to merge objects in JavaScript: using the spread operator and `Object.assign`. The results can help developers understand which approach is faster and more suitable for their specific use cases.

Related benchmarks:

JavaScript spread operator vs Object.assign performance fixed 2222 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

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