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

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);
Using Object.assign mutate
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
Using Object.assign mutate

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1703686.2 Ops/sec
Using Object.assign	816187.2 Ops/sec
Using Object.assign mutate	1756162.8 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 Definition**

The benchmark tests three ways to merge two objects in JavaScript:

1. Using the spread operator (`const finalObject = { ...object, ...object2 };`)
2. Using `Object.assign()` with a single object as the target (`const finalObject = Object.assign({}, object, object2);`)
3. Using `Object.assign()` with both objects being assigned to the same target (`const finalObject = Object.assign(object, object2);`)

**What is tested?**

The benchmark tests how efficient each approach is in terms of performance and memory usage. The test measures the time it takes to execute each approach, as well as the number of executions per second.

**Options compared**

We have three options being compared:

1. **Using the spread operator**: This approach uses the syntax `{ ...object, ...object2 };` to merge two objects.
2. **Using `Object.assign()` with a single object as the target`: This approach uses the function `Object.assign(target, object, object2);` to merge two objects into a single object.
3. **Using `Object.assign()` with both objects being assigned to the same target**: This approach uses the function `Object.assign(object, object2);` to merge two objects into a single object.

**Pros and Cons of each approach**

1. **Using the spread operator**:
	* Pros: Concise syntax, easy to read and write.
	* Cons: May not be as efficient as other approaches for large objects or complex merging scenarios.
	* Additional consideration: The spread operator was introduced in ECMAScript 2018 (ES10) and is supported by most modern browsers and engines.
2. **Using `Object.assign()` with a single object as the target`:
	* Pros: Efficient, can handle large objects and complex merging scenarios.
	* Cons: Requires more lines of code compared to the spread operator, and may be less readable for some developers.
	* Additional consideration: This approach is widely supported by modern browsers and engines, but may require additional libraries or polyfills for older environments.
3. **Using `Object.assign()` with both objects being assigned to the same target`:
	* Pros: Simple syntax, easy to understand for beginners.
	* Cons: Can be slower than other approaches for large objects or complex merging scenarios, and may not be as efficient in some cases.

**Latest benchmark result**

The latest benchmark result shows that:

1. **Using `Object.assign()` with both objects being assigned to the same target` is the fastest approach, with an average of 816187 executions per second.
2. **Using the spread operator` is slightly slower than the first approach, with an average of 1756162 executions per second.
3. **Using `Object.assign()` with a single object as the target` is slower than both previous approaches, with an average of 1703686 executions per second.

Please note that these results are specific to this benchmark and may vary depending on your use case and environment.

Related benchmarks:

JavaScript shallow copy spread operator vs Object.assign vs Object.assign mutate (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using Object.assign mutate

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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