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;

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: one year 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 one year ago):

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: 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):