Benchmark: conditionally insert properties w/ terinary

Tests:

boring
const obj = { hello: "world" }; if (Math.random()>.5) { obj.foo = "bar"; }
AخA

const obj = {
hello: "world"
};
if (Math.random()>.5) {
obj.foo = "bar";
}

spread

const obj = {
  hello: "world",
  ...Math.random()>.5 && { foo: "bar" }
};

 
const obj = {  hello: "world",  ...Math.random()>.5 && { foo: "bar" }};

Object.assign
const obj = Object.assign({ hello: "world" }, Math.random()>.5 && { foo: "bar" });
const obj = Object.assign({
hello: "world"
}, Math.random()>.5 && {
foo: "bar"
});

Terinary

const obj = {
  hello: "world"
};
Math.random()>.5 ? obj.foo = "bar" : false

 
const obj = {  hello: "world"};Math.random()>.5 ? obj.foo = "bar" : false

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
boring
spread
Object.assign
Terinary

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0

Browser/OS: Opera 107 on Windows

View result in a separate tab

Test name	Executions per second
boring	9409034.0 Ops/sec
spread	6808347.5 Ops/sec
Object.assign	4095814.0 Ops/sec
Terinary	11231471.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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

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.
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.
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:

Using a template literal with a conditional expression: { hello: "world", foo: ${Math.random() > 0.5 ? "bar" : null} }.
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 });
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.

LLMs can make mistakes. Check important info.

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:

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: 4 years ago by: Guest

Jump to the latest result

boring