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;

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 5 months 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

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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

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.
Using the spread operator (...): This approach uses the spread operator (...) to merge the properties of two objects into a new object.
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

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().
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.
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.

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.

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 5 months ago):