Benchmark: JavaScript spread vs Object.assign performance vs native spread

Tests:

Using the spread operator
"use strict"; 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 _objectSpread(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; } 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; } var firstObject = { sampleData: 'Hello world' }; var secondObject = { moreData: 'foo bar' }; var finalObject = _objectSpread(_objectSpread({}, firstObject), secondObject);
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);
use...
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {...firstObject, ...secondObject}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
use...

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	5550866.5 Ops/sec
Using Object.assign	24552956.0 Ops/sec
use...	33304256.0 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 on MeasureThat.net.

The provided benchmark compares three different ways to merge two objects in JavaScript: using the spread operator, `Object.assign()`, and native spread (introduced in ECMAScript 2018). We'll break down each approach, its pros and cons, and consider other alternatives.

**Using the Spread Operator (`...`)**

```javascript
var finalObject = _objectSpread(_objectSpread({}, firstObject), secondObject);
```

The spread operator is a concise way to merge objects. It's defined in the `_objectSpread()` function, which recursively merges source objects into a target object.

Pros:

* Concise and expressive syntax.
* Works well with objects of any depth.
* Can handle arbitrary data types (not just numbers or strings).

Cons:

* May have performance overhead due to function calls and recursion.
* Not widely supported in older browsers (IE 11 and earlier).

**Using `Object.assign()`**

```javascript
const finalObject = Object.assign({}, firstObject, secondObject);
```

`Object.assign()` is a built-in method that merges one or more source objects into a target object. It's defined on the `Object.prototype`.

Pros:

* Fast and efficient, as it uses native array operations under the hood.
* Widely supported in modern browsers (including older versions of Internet Explorer).

Cons:

* Can be verbose with multiple targets.
* May not work correctly with objects that have inherited properties.

**Native Spread (ECMAScript 2018)**

```javascript
const finalObject = {...firstObject, ...secondObject};
```

Native spread is a more recent addition to JavaScript, introduced in ECMAScript 2018. It's defined on the `Object.prototype` and uses native array operations under the hood.

Pros:

* Fast and efficient, like `Object.assign()`.
* Concise syntax.
* Widely supported in modern browsers (including Chrome 122).

Cons: None significant.

Now, let's consider other alternatives to merge objects in JavaScript:

1. **Array methods**: Instead of merging two objects, you could convert them into arrays, concatenate them, and then convert the resulting array back into an object using `Object.fromEntries()`. This approach is not recommended, as it has performance overhead and may not preserve object properties.
2. **Recursive functions**: You can write a recursive function that merges two objects by checking for common keys and recursively merging their values. However, this approach has performance overhead and may not be suitable for large objects.

In conclusion, the spread operator, `Object.assign()`, and native spread are all efficient ways to merge objects in JavaScript. The choice of which one to use depends on your specific requirements, including performance concerns, syntax preference, and compatibility with older browsers.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

use...

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):