Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript spread operator vs Object.assign (new object) performance
(version: 0)
Comparing performance of:
Using the spread operator vs Using Object.assign
Created:
4 years ago
by:
Registered User
Go to the latest result
Tests:
Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
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 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0
Browser/OS:
Firefox 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=513120" width="100%" height="500px"></iframe>
Using Object.assign
23.2M/s
Using the spread operator
12.5M/s
View exact numbers
Test name
Executions per second
✓
Using Object.assign
23,247,536 Ops/sec
Using the spread operator
12,485,343 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this JavaScript benchmark. **Benchmark Definition** The benchmark compares two approaches to merge objects in JavaScript: 1. **Spread Operator (`...`)**: This approach uses the spread operator to create a new object that includes all properties from both `firstObject` and `secondObject`. The syntax is `{ ...firstObject, ...secondObject }`. 2. **`Object.assign()`**: This approach uses the `Object.assign()` method to merge two objects into one. In this case, we're using it with an empty object (`{}`) as the target object, like so: `const finalObject = Object.assign({}, firstObject, secondObject);`. **Options Compared** The benchmark is comparing these two approaches: * **Spread Operator (using `{ ... }`)**: This approach creates a new object by copying all properties from both `firstObject` and `secondObject`. It's often considered more readable and easier to understand than `Object.assign()`. * **`Object.assign()`**: This approach merges two objects into one, overwriting any duplicate keys. While it works well in many cases, it can be less intuitive for some developers. **Pros and Cons** **Spread Operator (using `{ ... }`)** Pros: * More readable and easier to understand * Creates a new object with all properties from both sources * Less likely to overwrite existing properties accidentally Cons: * Can be slower than `Object.assign()` due to the overhead of creating a new object * Not supported in older browsers (e.g., Internet Explorer) **`Object.assign()`** Pros: * Faster than spread operator, since it only copies existing keys * Supported by most modern browsers Cons: * Less readable and less intuitive for some developers * Can overwrite existing properties if they have the same key name **Library Used: None** This benchmark doesn't use any external libraries. **Special JS Feature or Syntax: None** There are no special JavaScript features or syntax used in this benchmark. The test cases only focus on comparing two basic approaches to merge objects. **Other Alternatives** If you're interested in exploring other alternatives, here are a few options: * **`Object.assign()` with an object spread operator**: You can use the new `object Spread Operator` feature (introduced in ECMAScript 2018) to create a new object with all properties from both sources: `{ ...firstObject, ...secondObject }`. This approach is similar to the spread operator but uses the new syntax. * **`JSON.merge()`**: This is an older method for merging objects that's been replaced by `Object.assign()` in modern JavaScript. It's not widely supported and should be avoided. Overall, this benchmark provides a useful comparison between two common approaches to merge objects in JavaScript, helping developers understand the trade-offs between readability, performance, and browser support.
Related benchmarks
object assign vs object spread on growing objects
JavaScript spread operator vs Object.assign performance (single addition)
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Comments
Confirm delete:
Do you really want to delete benchmark?