Benchmark: JavaScript spread operator vs Object.assign performance 22034

Script Preparation code:

const obj1 = { a: "a", b: "b", c: "c", d: "d", e: "e", f: "f", g: "g", h: "h", i: "i" };
const obj2 = { b: "b", j: "j", k: "k", l: "l", m: "m", n: "n", o: "o", p: "p", q: "q" };

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", b: "b", c: "c", d: "d", e: "e", f: "f", g: "g", h: "h", i: "i" };const obj2 = { b: "b", j: "j", k: "k", l: "l", m: "m", n: "n", o: "o", p: "p", q: "q" };​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 };
const finalObject = {
...obj1,
...obj2
};
Using Object.assign
const finalObject = Object.assign({}, obj1, obj2);
const finalObject = Object.assign({}, obj1, obj2);
Babel
_objectSpread2(obj1, obj2);
_objectSpread2(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: 10 months ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	3916761.2 Ops/sec
Using Object.assign	3098604.5 Ops/sec
Babel	527768.5 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

Benchmark Overview

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

Options Compared

Spread Operator (...): This is a modern JavaScript feature that allows you to expand an object into a new object using the syntax const obj1 = { ...obj2 }. It was introduced in ECMAScript 2018.
Object.assign: This is a built-in method of the Object prototype that merges two or more source objects into a target object.
Babel's _objectSpread2 function: This is a helper function provided by Babel, a popular JavaScript transpiler, to enable the spread operator feature in older browsers and environments.

Pros and Cons

Spread Operator (...)
- Pros:
  - Concise and readable syntax
  - Fast execution (typically 1-2 cycles)
- Cons:
  - Limited browser support (only works in ECMAScript 2018+ browsers)
  - May not be compatible with older JavaScript engines
Object.assign
- Pros:
  - Wide browser and engine support
  - Fast execution (typically 1-2 cycles)
- Cons:
  - Less readable syntax compared to the spread operator
Babel's _objectSpread2 function
- Pros:
  - Enables the spread operator feature in older browsers and environments
  - Wide browser and engine support
- Cons:
  - Additional overhead due to transpilation
  - May introduce performance regressions

Library Used

In this benchmark, Babel is used as a transpiler to enable the spread operator feature. The _objectSpread2 function is part of the Babel code generation.

Special JS Feature or Syntax

The spread operator (...) is a new JavaScript feature introduced in ECMAScript 2018. It allows you to expand an object into a new object using the syntax const obj1 = { ...obj2 }.

Alternatives

If the spread operator is not supported by your target browser or environment, you can use other approaches:

Manual object merge using Object.assign and iteration (e.g., Object.keys(obj1).forEach(key => obj1[key] = obj2[key]))
Using libraries like Lodash or Ramda, which provide higher-order functions for merging objects.
Transpiling your code to older JavaScript versions that support the spread operator.

In summary, the benchmark compares the performance of three approaches to merge two objects: the spread operator (...), Object.assign, and Babel's _objectSpread2 function. The choice of approach depends on the target browser or environment, as well as personal preference for syntax and readability.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

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

**Options Compared**

1. **Spread Operator (`...`)**: This is a modern JavaScript feature that allows you to expand an object into a new object using the syntax `const obj1 = { ...obj2 }`. It was introduced in ECMAScript 2018.
2. **Object.assign**: This is a built-in method of the `Object` prototype that merges two or more source objects into a target object.
3. **Babel's `_objectSpread2` function**: This is a helper function provided by Babel, a popular JavaScript transpiler, to enable the spread operator feature in older browsers and environments.

**Pros and Cons**

1. **Spread Operator (`...`)**
	* Pros:
		+ Concise and readable syntax
		+ Fast execution (typically 1-2 cycles)
	* Cons:
		+ Limited browser support (only works in ECMAScript 2018+ browsers)
		+ May not be compatible with older JavaScript engines
2. **Object.assign**
	* Pros:
		+ Wide browser and engine support
		+ Fast execution (typically 1-2 cycles)
	* Cons:
		+ Less readable syntax compared to the spread operator
3. **Babel's `_objectSpread2` function**
	* Pros:
		+ Enables the spread operator feature in older browsers and environments
		+ Wide browser and engine support
	* Cons:
		+ Additional overhead due to transpilation
		+ May introduce performance regressions

**Library Used**

In this benchmark, Babel is used as a transpiler to enable the spread operator feature. The `_objectSpread2` function is part of the Babel code generation.

**Special JS Feature or Syntax**

The spread operator (`...`) is a new JavaScript feature introduced in ECMAScript 2018. It allows you to expand an object into a new object using the syntax `const obj1 = { ...obj2 }`.

**Alternatives**

If the spread operator is not supported by your target browser or environment, you can use other approaches:

* Manual object merge using `Object.assign` and iteration (e.g., `Object.keys(obj1).forEach(key => obj1[key] = obj2[key])`)
* Using libraries like Lodash or Ramda, which provide higher-order functions for merging objects.
* Transpiling your code to older JavaScript versions that support the spread operator.

In summary, the benchmark compares the performance of three approaches to merge two objects: the spread operator (`...`), `Object.assign`, and Babel's `_objectSpread2` function. The choice of approach depends on the target browser or environment, as well as personal preference for syntax and readability.

Related benchmarks:

JavaScript spread operator vs Object.assign performance 22034 (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):