Benchmark: JavaScript spread operator vs Object.assign performance 224

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	6454847.5 Ops/sec
Using Object.assign	3509055.2 Ops/sec
Babel	881407.1 Ops/sec

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

Let's break down the benchmark and explain what is being tested.

Benchmark Definition

The benchmark definition provides three different ways to merge two objects: obj1 and obj2. The goal is to compare the performance of these three approaches.

Using the spread operator (const finalObject = {...obj2}): This approach uses the spread operator (...) to create a new object that includes all properties from obj1 and obj2.
Using Object.assign: This approach uses the Object.assign() method to merge two objects.
Babel: This is not a JavaScript feature or syntax, but rather an alternative JavaScript compiler and runtime environment.

Options Compared

The three options are compared in terms of their performance, measured by the number of executions per second (ExecutionsPerSecond).

Pros and Cons of Each Approach

Using the spread operator:
- Pros: concise and easy to read, does not require any additional libraries or dependencies.
- Cons: may be slower than other approaches due to the creation of a new object.
Using Object.assign:
- Pros: widely supported and well-documented, can handle complex merging scenarios.
- Cons: may be slower than the spread operator due to the overhead of method calls, and requires additional dependencies (e.g., lodash for deep merges).
Babel: This option is not a traditional JavaScript feature or syntax, but rather an alternative JavaScript compiler and runtime environment. It's likely being used as a control group to compare performance with modern JavaScript implementations.

Library Usage

None of the options use any external libraries beyond what is included in the benchmark definition (e.g., Object).

Special JS Feature or Syntax

There are no special JS features or syntaxes being tested in this benchmark. The focus is on comparing three different approaches to merge objects.

Alternatives

Other alternatives for merging objects include:

Lodash's merge() function: A popular utility library that provides a robust and efficient way to merge objects.
Underscore.js's _extend() function: Another popular utility library that provides a simple and concise way to merge objects.
ES6 Object spread syntax: This is not an alternative, but rather another way to use the spread operator.

It's worth noting that the benchmark results show Chrome 103 outperforming other browsers and environments in terms of performance.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark definition provides three different ways to merge two objects: `obj1` and `obj2`. The goal is to compare the performance of these three approaches.

1. **Using the spread operator (`const finalObject = {...obj2}`)**: This approach uses the spread operator (`...`) to create a new object that includes all properties from `obj1` and `obj2`.
2. **Using Object.assign**: This approach uses the `Object.assign()` method to merge two objects.
3. **Babel**: This is not a JavaScript feature or syntax, but rather an alternative JavaScript compiler and runtime environment.

**Options Compared**

The three options are compared in terms of their performance, measured by the number of executions per second (`ExecutionsPerSecond`).

**Pros and Cons of Each Approach**

1. **Using the spread operator**:
	* Pros: concise and easy to read, does not require any additional libraries or dependencies.
	* Cons: may be slower than other approaches due to the creation of a new object.
2. **Using Object.assign**:
	* Pros: widely supported and well-documented, can handle complex merging scenarios.
	* Cons: may be slower than the spread operator due to the overhead of method calls, and requires additional dependencies (e.g., `lodash` for deep merges).
3. **Babel**: This option is not a traditional JavaScript feature or syntax, but rather an alternative JavaScript compiler and runtime environment. It's likely being used as a control group to compare performance with modern JavaScript implementations.

**Library Usage**

None of the options use any external libraries beyond what is included in the benchmark definition (e.g., `Object`).

**Special JS Feature or Syntax**

There are no special JS features or syntaxes being tested in this benchmark. The focus is on comparing three different approaches to merge objects.

**Alternatives**

Other alternatives for merging objects include:

1. **Lodash's `merge()` function**: A popular utility library that provides a robust and efficient way to merge objects.
2. **Underscore.js's `_extend()` function**: Another popular utility library that provides a simple and concise way to merge objects.
3. **ES6 Object spread syntax**: This is not an alternative, but rather another way to use the spread operator.

It's worth noting that the benchmark results show Chrome 103 outperforming other browsers and environments in terms of performance.

Related benchmarks:

JavaScript spread operator vs Object.assign performance 224 (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 6 months ago):