Benchmark: JavaScript spread operator vs object update performance

Tests:

Using update
const firstObject = {} firstObject.sampleData = 'Hello world'; firstObject.moreData = 'foo bar';
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 runs

Using update

170.0M/s

Using Object.assign

39.7M/s

Fastest: Using update (4.3x faster)

View exact numbers

✓ Using update: 169,986,416 ops/sec
• Using Object.assign: 39,670,220 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 update
Using Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Using update

278.6M/s

Using Object.assign

69.3M/s

View exact numbers

Test name	Executions per second
✓ Using update	278,646,624 Ops/sec
Using Object.assign	69,314,256 Ops/sec

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

LLMs can make mistakes. Check important info.

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

The test is comparing the performance of two ways to update an object in JavaScript:

1. Using the spread operator (`...`) to merge objects, as shown in the first test case:
```javascript
const firstObject = {};
firstObject.sampleData = 'Hello world';
firstObject.moreData = 'foo bar';

// Later...
const mergedObject = { ...firstObject, moreData: 'foo bar' };
```
2. Using `Object.assign()` to merge objects, as shown in the second test case:
```javascript
const firstObject = { sampleData: 'Hello world' };
const secondObject = { moreData: 'foo bar' };

// Later...
const finalObject = Object.assign(firstObject, secondObject);
```
Now, let's discuss the pros and cons of each approach:

**Using the spread operator (`...`)**

Pros:

* It's a concise and expressive way to merge objects.
* It creates a new object with the updated properties.

Cons:

* Performance: Creating a new object using `...` can be slower than updating an existing object, especially for large objects.

In modern JavaScript engines, including V8 (used by Chrome), this is generally considered a fast operation. However, it's worth noting that the performance difference between these two approaches may not be significant in most cases.

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

Pros:

* It can modify an existing object in place, which might be faster than creating a new object.
* It's widely supported and has been part of the JavaScript standard since ECMAScript 2015 (ES6).

Cons:

* It can return `undefined` if the source object is `null` or `undefined`.
* It creates a shallow copy of the objects, which might not be suitable for all use cases.

In this benchmark, `Object.assign()` seems to have slightly worse performance than using the spread operator. However, the actual performance difference depends on various factors, such as the size of the objects and the specific JavaScript engine being used.

Other considerations:

* Both approaches assume that the target object has the same shape (i.e., it has the same set of properties). If this is not the case, using `Object.assign()` might be a better choice.
* For large objects or complex data structures, other methods like `deepCopy` or libraries like Lodash's `merge` function might be more suitable.

The benchmark uses Chrome 119 and Windows as the testing platform. The test cases are designed to simulate real-world scenarios where object updates occur.

Alternatives:

* If you need even better performance for large objects, consider using a library like Lodash or a specialized data structure like a map.
* For more complex merge operations (e.g., handling nested objects), look into libraries like Ramda or Immutable.js.

Keep in mind that the choice of method ultimately depends on your specific use case and requirements.

JavaScript spread operator vs object update performance (version: 0)

Comparing performance of: `Using update vs Using Object.assign`

Created: 5 years ago by: Guest

Go to the latest result

Using update

Using Object.assign

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 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 operator vs object update performance (version: 0)

Comparing performance of: Using update vs Using Object.assign

Created: 5 years ago by: Guest

Go to the latest result

Using update

Using Object.assign

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 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 update vs Using Object.assign`