Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript spread operator vs Object.assign performance vs mutation
(version: 0)
Comparing performance of:
Using the spread operator vs Using Object.assign vs Using mutation
Created:
6 years ago
by:
Guest
Jump 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);
Using mutation
let firstObject = { sampleData: 'Hello world' } firstObject['moreData'] = 'foo bar'; const finalObject = firstObject;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Using the spread operator
Using Object.assign
Using mutation
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of three different approaches for creating an object with merged data: using the spread operator (`...`), `Object.assign`, and mutation (direct assignment). **Options Compared** 1. **Using the Spread Operator**: This approach uses the spread operator (`...`) to merge two objects into a new object. 2. **Using Object.assign**: This approach uses the `Object.assign()` method to merge two objects into a new object. 3. **Mutation**: This approach directly assigns properties from one object to another, without creating a new object. **Pros and Cons** * **Using the Spread Operator**: + Pros: concise syntax, easy to read and write. + Cons: may not work in older browsers that don't support spread operator, can be slower due to function call overhead. * **Using Object.assign**: + Pros: widely supported across browsers, can be faster than spread operator due to method call optimization. + Cons: less readable syntax compared to spread operator, may require more lines of code. * **Mutation**: + Pros: fast and lightweight, no additional function calls required. + Cons: less readable and maintainable, can lead to bugs if not done carefully. **Library** The `Object.assign()` method is a built-in JavaScript library that is widely supported across browsers. It allows you to merge multiple objects into a single object, overwriting any existing properties with the same key. **Special JS Features or Syntax** The spread operator (`...`) is a new feature introduced in ECMAScript 2018 (ES2018) and later versions. It allows you to expand an array or object into a new object, making it easier to merge data. **Benchmark Result Interpretation** The latest benchmark result shows the execution per second for each approach: * **Mutation**: 623631424 executions per second * **Using the spread operator**: 43871344 executions per second * **Using Object.assign**: 13334525 executions per second This suggests that mutation is the fastest approach, followed by using the spread operator, and then `Object.assign`. **Other Alternatives** If you don't want to use the spread operator or `Object.assign`, you can also consider other alternatives: 1. **Loose Equal Operator (`==`)**: This method is less readable and may lead to bugs due to type coercion. 2. **Constructor Function**: You can create a constructor function for an object and then call it with the desired properties, but this approach is less efficient than mutation. 3. **Array-like Objects**: You can use array-like objects like `Array.prototype.slice()` or `Object.keys()` to merge data, but these approaches are more complex and may not be as readable. In general, the spread operator and `Object.assign` are good choices for merging objects due to their readability and maintainability. Mutation is a fast alternative, but it requires careful consideration of potential bugs and edge cases.
Related benchmarks:
Spread vs Object.assign (modify ) vs Object.assign (new)
Object.assign mutation vs spread
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
JavaScript spread operator vs Object.assign performance test number 99
Comments
Confirm delete:
Do you really want to delete benchmark?