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}

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

use...

30.2M/s

Using Object.assign

7.2M/s

Using the spread operator

1.1M/s

Fastest: use... (28.6x faster)

View exact numbers

✓ use...: 30,207,132 ops/sec
• Using Object.assign: 7,152,542 ops/sec
• Using the spread operator: 1,055,777 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

use...

33.3M/s

Using Object.assign

24.6M/s

Using the spread operator

5.6M/s

View exact numbers

Test name	Executions per second
✓ use...	33,304,256 Ops/sec
Using Object.assign	24,552,956 Ops/sec
Using the spread operator	5,550,866 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.

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: 5 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

use...

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 5 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

use...

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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