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

Script Preparation code:

window.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'],  
}
window.objectToCopy2 = { 
  xsampleString1: 'Hello world',
  xsampleNumber1: 123456789,
  xsampleArray1: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString2: 'Hello world',
  xsampleNumber2: 123456789,
  xsampleArray2: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString3: 'Hello world',
  xsampleNumber3: 123456789,
  xsampleArray3: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString4: 'Hello world',
  xsampleNumber4: 123456789,
  xsampleArray4: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString5: 'Hello world',
  xsampleNumber5: 123456789,
  xsampleArray5: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString6: 'Hello world',
  xsampleNumber6: 123456789,
  xsampleArray6: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString7: 'Hello world',
  xsampleNumber7: 123456789,
  xsampleArray7: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString8: 'Hello world',
  xsampleNumber8: 123456789,
  xsampleArray8: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString9: 'Hello world',
  xsampleNumber9: 123456789,
  xsampleArray9: ['hello', 'world', 'how', 'are', 'you'],
  xsampleString10: 'Hello world',
  xsampleNumber10: 123456789,
  xsampleArray10: ['hello', 'world', 'how', 'are', 'you'],  
}

Tests:

Using the spread operator
const object = window.objectToCopy const object2 = window.objectToCopy2 const finalObject = { ...object,...object2, };
Using Object.assign
const object = window.objectToCopy const object2 = window.objectToCopy2 const finalObject = Object.assign({}, object, object2);

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	861337.3 Ops/sec
Using Object.assign	473019.6 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 provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark is comparing the performance of two approaches to create a shallow copy of an object:

1. Using the spread operator (`const finalObject = { ...object, ...object2 };`)
2. Using `Object.assign()` (`const finalObject = Object.assign({}, object, object2);`)

**What's being tested:**

The benchmark is testing which approach creates a shallow copy of the `window.objectToCopy` and `window.objectToCopy2` objects faster.

**Options compared:**

Two options are being compared:

1. **Spread operator**: Using the spread operator (`{ ...object, ...object2 }`) to create a new object that includes all properties from both `object` and `object2`. This approach is often considered more concise and readable than using `Object.assign()`.
2. **Object.assign():** Using `Object.assign()` to create a new object by copying properties from `object` and `object2` into a new object.

**Pros and Cons of each approach:**

1. **Spread operator:**
	* Pros:
		+ Concise and readable code
		+ Creates a shallow copy, which is often sufficient for most use cases
	* Cons:
		+ Can be slower than `Object.assign()` due to the overhead of creating a new object using the spread syntax
2. **Object.assign():**
	* Pros:
		+ Generally faster than the spread operator due to optimized implementation in modern browsers
		+ Creates a shallow copy, which is often sufficient for most use cases
	* Cons:
		+ Can be less readable and more verbose compared to the spread operator

**Library/Functionality used:**

In this benchmark, `Object.assign()` is used as part of the JavaScript standard library. It's a built-in function that allows you to copy properties from one or more sources into a new object.

**Special JS feature or syntax:**

The use of the spread operator (`{ ...object, ...object2 }`) is a modern JavaScript feature introduced in ECMAScript 2018 (ES8). It allows you to create a new object by copying properties from an existing object using the `...` syntax.

**Other alternatives:**

If you need to create a deep copy of an object instead of a shallow one, you can use libraries like Lodash or a custom implementation. Additionally, if you're working with older browsers that don't support the spread operator, you may need to stick with `Object.assign()`.

Related benchmarks:

JavaScript shallow copy spread operator vs Object.assign performance 2X (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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