Benchmark: JavaScript spread operator vs Object.assign performance 22476

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 = { c: "a", ...obj1, ...obj2 };
Using Object.assign
const finalObject = Object.assign({ c: "a" }, obj1, obj2);
Babel
_objectSpread2({ c: "a" }, 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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its options in detail.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to merge two objects: `Object.assign`, the spread operator (`...`), and Babel's `_objectSpread2` function.

**Approaches Compared**

1. **Using Object.assign**: This approach uses the built-in `Object.assign()` method to create a new object by merging the properties of two existing objects.
2. **Using the spread operator (`...`)**: This approach uses the spread operator (`...`) to merge the properties of two objects into a new object.
3. **Babel's `_objectSpread2` function**: This is a custom implementation of the spread operator, written in JavaScript and compiled by Babel.

**Pros and Cons of Each Approach**

1. **Object.assign**:
	* Pros: widely supported, easy to use, and optimized for performance.
	* Cons: can be slower than other approaches due to its overhead from `JSON.parse()` and `JSON.stringify()`.
2. **Spread Operator (`...`)**:
	* Pros: fast, concise, and widely adopted in modern JavaScript development.
	* Cons: not supported by older browsers or environments, and may require additional setup for certain use cases.
3. **Babel's `_objectSpread2` function**:
	* Pros: optimized for performance and supported by Babel transpilation, making it suitable for production use.
	* Cons: requires additional setup with Babel, and its performance may vary depending on the specific configuration.

**Other Considerations**

* The benchmark results are based on a Windows 10 desktop environment with Firefox 130 as the browser.
* The test case uses two objects (`obj1` and `obj2`) with different properties to simulate real-world usage scenarios.
* The benchmark measures the number of executions per second, which indicates the performance speed.

**Library Used**

The `_objectSpread2` function is a custom implementation by Babel. It's not a traditional library in the sense that it's part of the Babel compiler and transpilation process.

**Special JS Feature or Syntax**

None mentioned explicitly. However, the spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2015 (ES6), which might require support for newer browsers or environments.

Latest run results:

Run details: (Test run date: 14 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	17217832.0 Ops/sec
Using Object.assign	28609574.0 Ops/sec
Babel	2821409.0 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Babel

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):