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

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	8695453.0 Ops/sec
Using Object.assign	6784796.5 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 benchmark and explore what's being tested.

**Benchmark Definition**

The benchmark is comparing two ways to merge two JavaScript objects: using the spread operator (`...`) and `Object.assign()`. The test creates two objects, `firstObject` and `secondObject`, which have similar structures but with some differences in their properties.

**Test Cases**

There are two individual test cases:

1. **Using the spread operator**: This test case uses the spread operator to merge `firstObject` and `secondObject`. The syntax is: `const finalObject = { ...firstObject, ...secondObject };`
2. **Using Object.assign**: This test case uses the `Object.assign()` method to merge `firstObject` and `secondObject`. The syntax is: `const finalObject = Object.assign(firstObject, secondObject);`

**Options Compared**

The benchmark is comparing two options:

* Using the spread operator (`...`)
* Using `Object.assign()`

**Pros and Cons of Each Approach**

1. **Using the spread operator (`...`)**:
	* Pros:
		+ More concise syntax
		+ Can be more readable for simple merges
		+ Can be used with arrays (e.g., `[...array, ...array2]`)
	* Cons:
		+ May not be as efficient as `Object.assign()` for large datasets
		+ May cause performance issues if not implemented correctly
2. **Using Object.assign()**:
	* Pros:
		+ More efficient than the spread operator for large datasets
		+ Well-established and widely supported
	* Cons:
		+ Less concise syntax
		+ May be less readable for complex merges

**Library Used**

In this benchmark, no libraries are explicitly mentioned. However, it's likely that `Object.assign()` is using the built-in JavaScript method from the ECMAScript specification.

**Special JS Features or Syntax**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2018 (ES8). It allows for concise object merging and array creation.

**Other Alternatives**

For large dataset merges, other alternatives to `Object.assign()` include:

* Using the `merge` function from libraries like Lodash or underscore.js
* Creating a custom merge function using a loop or recursion
* Using a library like Ramda, which provides a `merge` function with optional arguments for handling different data types.

Keep in mind that these alternatives may have trade-offs in terms of performance, readability, and maintainability.

**Benchmark Results**

The latest benchmark results show the execution per second for both test cases on Chrome 128 running on a Mac OS X 10.15.7 system. The results indicate that using the spread operator is slightly faster than `Object.assign()`.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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