Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object Spread vs New property
(version: 0)
Comparing performance of:
spread vs new prop
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
spread
const base = {} const newBase = { ...base, prop1: 'string', prop2: 12, prop3: true }
new prop
const base = {} const newBase = base; newBase.prop1 = 'string'; newBase.prop2 = 12; newBase.prop3 = true
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread
new prop
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):
I'd be happy to help you understand the provided benchmark. **What is being tested?** The provided benchmark tests two different approaches to create an object with initial properties and additional properties: 1. **Object Spread**: This approach uses the `...` operator to spread the existing object (`base`) into a new object (`newBase`) while adding new properties (`prop1`, `prop2`, `prop3`). 2. **New Property Assignment**: This approach creates a new object (`newBase`) and assigns it the value of `base`. Then, individual properties are added to `newBase` using dot notation (`newBase.prop1 = 'string';`, etc.). **Options compared** The benchmark is comparing the performance of these two approaches: * **Object Spread**: The benefits include a more concise syntax and potentially faster execution. However, some older browsers might have issues with this operator. * **New Property Assignment**: The benefits include better browser support (older browsers) and potentially easier debugging. **Pros and Cons** * **Object Spread**: + Pros: Concise syntax, potentially faster execution + Cons: Some older browsers might not support the `...` operator * **New Property Assignment**: + Pros: Better browser support (older browsers), easier debugging + Cons: Longer syntax, potentially slower execution **Library and purpose** There is no specific library mentioned in the benchmark. However, it's worth noting that some libraries like Lodash or Ramda provide functions for object manipulation, such as `lodash.copy` or `ramda.pluck`, which might be used to achieve similar results. **Special JS feature/syntax** The benchmark uses the **rest operator (`...`)**, which is a relatively new feature introduced in ECMAScript 2018 (ES10). This operator allows for spreading an existing object into a new one while adding new properties. Some older browsers might not support this feature. **Other alternatives** If you need to create objects with initial properties and additional properties, you could use other approaches: * **Object literal**: `const newBase = { ...base, prop1: 'string', prop2: 12, prop3: true };` * **Array methods**: Using array methods like `push` or `concat` to add properties to the object. However, these alternatives are not tested in this benchmark.
Related benchmarks:
Spread vs Object.assign (modify ) vs Object.assign (new)
object assign vs object spread on growing objects
object.assign vs spread to create a copy
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?