Benchmark: JavaScript spread operator vs Object.assign performance 22

Script Preparation code:

const obj1 = { a: "a" };
const obj2 = { b: "b" };

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

window.obj1 = obj1;
window.obj2 = obj2;
window._objectSpread2 = _objectSpread2;

Tests:

Using the spread operator
const finalObject = { ...obj1, ...obj2 };
Using Object.assign
const finalObject = Object.assign({}, obj1, obj2);
Babel
_objectSpread2(obj1, obj2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	42229236.0 Ops/sec
Using Object.assign	35228268.0 Ops/sec
Babel	9224046.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 JSON and explain what is tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark measures the performance of three methods to merge two objects: the spread operator (`...`), `Object.assign`, and a custom implementation using Babel's `_objectSpread2`.

**Options Compared**

1. **Spread Operator (`...`)**: This method uses the rest-spread syntax to create a new object by merging the properties of two objects.
```javascript
const finalObject = { ...obj1, ...obj2 };
```
Pros:

* Simple and concise syntax.
* Native support in modern JavaScript engines.

Cons:

* May not work as expected with complex object structures or nested arrays.
* Can be slower than other methods due to the overhead of creating a new object and copying properties.

2. **Object.assign**: This method uses the `assign` function from the Object prototype to merge two objects.
```javascript
const finalObject = Object.assign({}, obj1, obj2);
```
Pros:

* Widely supported and well-established method.
* Can handle complex object structures and nested arrays.

Cons:

* May not work as expected with undefined or null values in source objects.
* Can be slower than the spread operator due to the overhead of creating a new object and copying properties.

3. **Custom Implementation using Babel's `_objectSpread2`**: This method uses a custom function provided by Babel to merge two objects.
```javascript
_objectSpread2(obj1, obj2);
```
Pros:

* Optimized for performance compared to other methods.
* Handles complex object structures and nested arrays.

Cons:

* Requires Babel to be configured and enabled.
* May not work as expected with undefined or null values in source objects.

**Library: `_objectSpread2`**

Babel's `_objectSpread2` function is a custom implementation for merging objects. It provides an optimized solution for performance-critical code paths. However, it requires Babel to be configured and enabled.

**Special JavaScript Features/Syntax**

The benchmark uses the rest-spread syntax (`...`) and object spread properties (`Object.assign`). These features are widely supported in modern JavaScript engines, but may not work as expected with older browsers or environments.

**Other Considerations**

* The benchmark measures the performance of each method using a single input set. In a real-world scenario, you would want to consider multiple input sets and variations to get a more comprehensive picture of performance.
* The benchmark uses Chrome 120 as the test browser. You may want to test on other browsers or devices to ensure compatibility.

**Alternatives**

Other alternatives for merging objects include:

1. `merge` function from Lodash: A popular utility library that provides an `merge` function for combining objects.
2. `Object.concat`: An older method for merging objects that concatenates arrays instead of using the spread operator.
3. Other custom implementations or libraries, such as `immutables` or `merge-objects`.

Keep in mind that each alternative has its own trade-offs and use cases, and the best approach will depend on your specific requirements and constraints.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Babel

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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