Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
spread vs ??
(version: 0)
Comparing performance of:
?? vs spread
Created:
one year ago
by:
Guest
Jump to the latest result
Tests:
??
function translateByLodash (a) { const b = { id: a.id ?? {}, foo: a.foo ?? {} } return b; }
spread
function translateBySpread (a) { const b = { ...(a.id ? { id: a.id } : {}), ...(a.foo ? { foo: a.foo} : {}) } return b; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
??
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Browser/OS:
Chrome 124 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
??
178948784.0 Ops/sec
spread
199691712.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its components. **Benchmark Overview** The benchmark compares two approaches to create an object with default values: using the null-coalescing operator (`??`) and using the spread operator (`...`). The test cases are designed to measure the performance difference between these two methods. **Options Compared** The two options being compared are: 1. **Null-Coalescing Operator (`??`)**: This operator returns the first operand if it's not null or undefined, and the second operand otherwise. 2. **Spread Operator (`...`)**: This operator is used to create a new object by spreading the properties of an existing object. **Pros and Cons** * **Null-Coalescing Operator (`??`)**: + Pros: - Simple and easy to read - Can be used to provide default values for function arguments or object properties + Cons: - May introduce unnecessary computations if the operands are not null or undefined - May lead to unexpected behavior if not used carefully * **Spread Operator (`...`)**: + Pros: - More efficient than using multiple `if` statements or ternary operators - Can be used to create a new object by spreading properties from an existing object + Cons: - May require more memory if the spread operator is used with large objects - Can lead to confusing code if not used carefully **Library and Special JS Features** In this benchmark, there are no specific libraries or special JavaScript features being tested. However, it's worth noting that both options rely on modern JavaScript syntax and may not work in older browsers or environments. **Benchmark Preparation Code** The preparation code for each test case is empty, which means that the test cases start from scratch with no pre-defined values or objects. **Test Cases** There are two test cases: 1. `translateByLodash`: This test case uses the null-coalescing operator (`??`) to create an object with default values. 2. `translateBySpread`: This test case uses the spread operator (`...`) to create a new object by spreading properties from an existing object. **Benchmark Results** The latest benchmark result shows that the `spread` option is faster, with approximately 210 million executions per second compared to around 180 million for the null-coalescing operator. However, please note that these results may vary depending on the specific browser and environment being used. **Alternatives** If you're interested in exploring alternative approaches, here are a few options: * **Object Shorthand**: In modern JavaScript, object shorthand can be used to create objects with default values using the syntax `{ id: a.id || {} }`. * **Optional Chaining**: Optional chaining (`?.`) is another operator that allows you to access properties on an object without throwing errors if they don't exist. This operator could potentially be used as an alternative to the null-coalescing operator. * **Custom Functions**: You can create custom functions to handle default values for objects, which might offer better performance or readability than the options being compared in this benchmark. Keep in mind that these alternatives may require more code and are not necessarily more efficient than the original options.
Related benchmarks:
toFixed -> Number vs Math.round
toFixed() vs Math.round().toString()
parseFloat(toFixed) vs Math.round()
toFixed vs Math.round() with numbers222
toFixed vs Math.round vs |(bitwise or)
Comments
Confirm delete:
Do you really want to delete benchmark?