Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
conditionally insert properties w/ terinary
(version: 0)
https://www.reddit.com/r/javascript/comments/mrzrty/the_shortest_way_to_conditionally_insert/
Comparing performance of:
boring vs spread vs Object.assign vs Terinary
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
boring
const obj = { hello: "world" }; if (Math.random()>.5) { obj.foo = "bar"; }
spread
const obj = { hello: "world", ...Math.random()>.5 && { foo: "bar" } };
Object.assign
const obj = Object.assign({ hello: "world" }, Math.random()>.5 && { foo: "bar" });
Terinary
const obj = { hello: "world" }; Math.random()>.5 ? obj.foo = "bar" : false
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
boring
spread
Object.assign
Terinary
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
13 hours ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0
Browser/OS:
Chrome 148 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
boring
103672168.0 Ops/sec
spread
42743488.0 Ops/sec
Object.assign
33700044.0 Ops/sec
Terinary
104587800.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. The provided benchmark measures the performance of three different approaches to conditionally insert properties into an object: the ternary operator, spread syntax, and `Object.assign()`. **Benchmark Definitions** 1. **Ternary Operator**: This approach uses a single expression with two conditions to set a property on the object. The syntax is: `obj.foo = "bar"` if `(Math.random() > 0.5)`. The purpose of this benchmark is to test the performance of assigning properties dynamically. 2. **Spread Syntax**: This approach uses the spread operator (`...`) to create a new object with conditionally included properties. The syntax is: `{ ...Math.random() > .5 && { foo: "bar" } }`. The purpose of this benchmark is to test the performance of using the spread operator for dynamic property creation. 3. **Object.assign()**: This approach uses the `Object.assign()` method to merge two objects, conditionally including properties. The syntax is: `Object.assign({ hello: "world" }, Math.random() > .5 && { foo: "bar" })`. The purpose of this benchmark is to test the performance of using `Object.assign()` for dynamic property assignment. **Comparison** | Approach | Description | | --- | --- | | Ternary Operator | Simple, direct assignment with a single expression. Pros: easy to read, concise. Cons: might be slower due to parsing overhead. | | Spread Syntax | More expressive and flexible than ternary operator. Pros: readable, maintainable code. Cons: may introduce additional overhead due to object creation. | | Object.assign() | Powerful method for merging objects, but can have performance implications if not optimized correctly. Pros: versatile, powerful. Cons: might be slower due to method invocation overhead. | **Library Usage** None of the benchmark definitions use a library explicitly. **Special JS Features or Syntax** * None mentioned in this explanation. * Note that MeasureThat.net does support testing specific JavaScript features and syntax using its `--experimental-features` option, but it's not enabled by default. **Other Alternatives** If you're interested in comparing performance of other approaches for conditionally inserting properties into an object, here are a few alternatives: 1. Using a template literal with a conditional expression: `{ hello: "world", foo: ${Math.random() > 0.5 ? "bar" : null} }`. 2. Using the `?` operator (introduced in ECMAScript 2020): `const obj = { hello: "world" }; const foo = Math.random() > 0.5 ? "bar" : undefined; Object.defineProperty(obj, "foo", { value: foo }); 3. Using a loop to dynamically set properties on an object. Keep in mind that each alternative has its own trade-offs and potential performance implications, which may or may not be relevant depending on the specific use case.
Related benchmarks:
falsey vs false
if vs AND
!! vs default if statement
systematic vs conditional assignements
systematic vs conditional assignements with explicit condition
Comments
Confirm delete:
Do you really want to delete benchmark?