Benchmark: conditionally insert properties

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" });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
boring
spread
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
boring	32555542.0 Ops/sec
spread	18671974.0 Ops/sec
Object.assign	27792228.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to conditionally insert properties into an object:

1. **Boring**: A simple if-else statement that checks a random value and inserts a property if it's true.
2. **Spread**: An object spread operator ( ... ) that conditionally adds a new object to the existing one.
3. **Object.assign**: The `Object.assign()` method used with an initial object and a conditional assignment.

**Options Compared**

These three approaches are compared in terms of their performance, which is measured by the number of executions per second on a specific device (Firefox Mobile 88, Android 11).

**Pros and Cons of Each Approach**

1. **Boring**:
	* Pros: Simple to understand, easy to implement.
	* Cons: May lead to unnecessary property assignments if the condition is false.
2. **Spread**:
	* Pros: Concise syntax, readable code.
	* Cons: Some older browsers might not support the object spread operator, and it may be slower due to the additional overhead of creating a new object.
3. **Object.assign**:
	* Pros: Well-established method with good browser support, flexible assignment options.
	* Cons: Can lead to unnecessary property assignments if the condition is false.

**Library/Functionality Used**

In this benchmark, there are no specific libraries used beyond the built-in JavaScript functions and methods mentioned above. However, it's worth noting that some browsers may have additional features or optimizations enabled in their implementations of these functions (e.g., Firefox has a custom implementation of `Object.assign()`).

**Special JS Features/Syntax**

None of the benchmark cases use special JavaScript features or syntax beyond what's covered by the standard language specification.

**Other Alternatives**

If you're looking for alternatives to these approaches, consider:

1. **Object.create()**: Creates an object with a given prototype and assigns properties conditionally.
2. **Array.prototype.push()**: Pushes new elements onto an array conditionally, though this approach might be less common than the others mentioned here.

For more information on measuring JavaScript performance or creating microbenchmarks, MeasureThat.net offers various resources and guides to help you get started.

Related benchmarks:

conditionally insert properties (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

Created: 5 years ago by: Guest

Jump to the latest result

boring

spread

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):