Benchmark: JavaScript shallow copy spread operator vs Object.assign performance

Tests:

Using the spread operator
const objectToCopy = { sampleString1: 'Hello world', sampleNumber1: 123456789, sampleArray1: ['hello', 'world', 'how', 'are', 'you'], sampleString2: 'Hello world', sampleNumber2: 123456789, sampleArray2: ['hello', 'world', 'how', 'are', 'you'], sampleString3: 'Hello world', sampleNumber3: 123456789, sampleArray3: ['hello', 'world', 'how', 'are', 'you'], sampleString4: 'Hello world', sampleNumber4: 123456789, sampleArray4: ['hello', 'world', 'how', 'are', 'you'], sampleString5: 'Hello world', sampleNumber5: 123456789, sampleArray5: ['hello', 'world', 'how', 'are', 'you'], sampleString6: 'Hello world', sampleNumber6: 123456789, sampleArray6: ['hello', 'world', 'how', 'are', 'you'], sampleString7: 'Hello world', sampleNumber7: 123456789, sampleArray7: ['hello', 'world', 'how', 'are', 'you'], sampleString8: 'Hello world', sampleNumber8: 123456789, sampleArray8: ['hello', 'world', 'how', 'are', 'you'], sampleString9: 'Hello world', sampleNumber9: 123456789, sampleArray9: ['hello', 'world', 'how', 'are', 'you'], sampleString10: 'Hello world', sampleNumber10: 123456789, sampleArray10: ['hello', 'world', 'how', 'are', 'you'], } const finalObject = { ...objectToCopy, };
Using Object.assign
const objectToCopy = { sampleString1: 'Hello world', sampleNumber1: 123456789, sampleArray1: ['hello', 'world', 'how', 'are', 'you'], sampleString2: 'Hello world', sampleNumber2: 123456789, sampleArray2: ['hello', 'world', 'how', 'are', 'you'], sampleString3: 'Hello world', sampleNumber3: 123456789, sampleArray3: ['hello', 'world', 'how', 'are', 'you'], sampleString4: 'Hello world', sampleNumber4: 123456789, sampleArray4: ['hello', 'world', 'how', 'are', 'you'], sampleString5: 'Hello world', sampleNumber5: 123456789, sampleArray5: ['hello', 'world', 'how', 'are', 'you'], sampleString6: 'Hello world', sampleNumber6: 123456789, sampleArray6: ['hello', 'world', 'how', 'are', 'you'], sampleString7: 'Hello world', sampleNumber7: 123456789, sampleArray7: ['hello', 'world', 'how', 'are', 'you'], sampleString8: 'Hello world', sampleNumber8: 123456789, sampleArray8: ['hello', 'world', 'how', 'are', 'you'], sampleString9: 'Hello world', sampleNumber9: 123456789, sampleArray9: ['hello', 'world', 'how', 'are', 'you'], sampleString10: 'Hello world', sampleNumber10: 123456789, sampleArray10: ['hello', 'world', 'how', 'are', 'you'], } const finalObject = Object.assign({}, objectToCopy);

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Using the spread operator

14.0M/s

Using Object.assign

790K/s

Fastest: Using the spread operator (17.8x faster)

View exact numbers

✓ Using the spread operator: 14,034,405 ops/sec
• Using Object.assign: 789,629 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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Using the spread operator

18.4M/s

Using Object.assign

1.2M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	18,359,720 Ops/sec
Using Object.assign	1,176,159 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, "JavaScript shallow copy spread operator vs Object.assign performance," tests the performance difference between two methods to create a shallow copy of an object: the spread operator (`...`) and `Object.assign()`. The benchmark defines 11 objects with different data types (strings, numbers, arrays) to create a sample scenario.

**Options Compared**

Two options are compared:

1. **Using the Spread Operator (`...`)**: This method uses the spread operator to create a new object by copying all properties from the original object.
2. **Using `Object.assign()`**: This method uses the `Object.assign()` function to copy all properties from the original object to a new object.

**Pros and Cons**

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

Pros:

* Concise and readable syntax
* Creates a new object with the same data types as the original object

Cons:

* Performance overhead due to string concatenation and property iteration
* May not work as expected for complex objects or arrays

In general, the spread operator is a convenient and readable way to create shallow copies, but it may introduce performance overhead.

### Using `Object.assign()` (with an Empty Object)

Pros:

* Efficient and fast, especially when using an empty object (`{}`) as the target
* Works well for complex objects and arrays

Cons:

* Less readable syntax compared to the spread operator
* May not work correctly if the target object is not a plain object or has non-enumerable properties

In general, `Object.assign()` with an empty object is a fast and efficient way to create shallow copies, especially when working with complex objects.

**Other Considerations**

* **Array Copy**: When copying arrays, the spread operator creates a new array with references to the original elements. This can lead to unexpected behavior if the original array is modified later. `Object.assign()` would copy the array values, creating a new array.
* **Non-Enumerable Properties**: If the original object has non-enumerable properties (e.g., due to setting `var obj = { foo: 'bar' }; Object.defineProperty(obj, 'nonEnu', { value: 'baz' });`), `Object.assign()` may not copy them correctly. The spread operator might also fail for these cases.

**Alternatives**

If you're concerned about performance or need more control over the copying process:

* Use a custom implementation that iterates over properties and values, like this:
```javascript
function shallowCopy(obj) {
  const result = {};
  Object.keys(obj).forEach(key => {
    result[key] = obj[key];
  });
  return result;
}
```
This approach provides more control but also incurs a performance overhead due to property iteration.

* Consider using `JSON.parse(JSON.stringify(obj))` for simple object copying, although this method is not recommended due to its limitations and potential issues with circular references or non-enumerable properties.

JavaScript shallow copy spread operator vs Object.assign performance (version: 0) Benchmark.js

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

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 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 shallow copy spread operator vs Object.assign performance (version: 0) Benchmark.js

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

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 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`