Benchmark: Optional chaining vs ternary

Script Preparation code:

var foo = {
  bar: {
    baz: {
      qux: null
    }
  }
};

var bar = {
  tender: null
};

Tests:

Optional Chaining
const qux = foo?.bar?.baz?.qux; const xuq = bar?.foo?.baz?.qux;
Ternary
const qux = foo && foo.bar && foo.bar.baz && foo.bar.baz.qux ? foo.bar.baz.qux : void 0; const xuq = bar && bar.foo && bar.foo.baz && bar.foo.baz.qux ? bar.foo.baz.qux : void 0;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Optional Chaining
Ternary

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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into what this benchmark is testing.

**Benchmark Overview**

This benchmark compares the performance of two approaches to accessing nested properties in an object: Optional Chaining and Ternary Operator.

**Test Case 1: Optional Chaining**

The first test case uses the Optional Chaining feature, denoted by the `?.` operator. This feature allows you to access nested properties without throwing a ReferenceError if any of the intermediate properties are null or undefined. The benchmark code is:
```javascript
const qux = foo?.bar?.baz?.qux;
const xuq = bar?.foo?.baz?.qux;
```
**Test Case 2: Ternary Operator**

The second test case uses a traditional ternary operator to achieve the same result as Optional Chaining. The benchmark code is:
```javascript
const qux = foo && foo.bar && foo.bar.baz && foo.bar.baz.qux ? foo.bar.baz.qux : void 0;
const xuq = bar && bar.foo && bar.foo.baz && bar.foo.baz.qux ? bar.foo.baz.qux : void 0;
```
**What's being compared?**

The benchmark is comparing the execution speed (measured in executions per second) of these two approaches on a desktop computer running Chrome 98.

**Pros and Cons of each approach:**

1. **Optional Chaining (?.)**:
	* Pros: More concise code, easier to read, and avoids null/undefined checks.
	* Cons: May throw ReferenceError if any intermediate property is missing, not supported in older browsers.
2. **Ternary Operator**:
	* Pros: Supported in all modern browsers, can be used to avoid ReferenceError by explicitly checking for null or undefined values.
	* Cons: More verbose code, harder to read.

**Other considerations:**

1. While the benchmark is running on a desktop computer, it's essential to note that Optional Chaining may behave differently on older browsers, mobile devices, or in specific environments where JavaScript execution might be different.
2. The performance difference between these two approaches is relatively small (around 3x faster for Optional Chaining), but the simplicity and readability of code are more significant concerns than mere execution speed.

In summary, this benchmark highlights the trade-off between conciseness, readability, and support for modern JavaScript features versus traditional coding practices. As a developer, you can choose to prioritize one aspect over the other based on your specific needs and target environments.

Related benchmarks:

Optional chaining vs ternary (version: 0)

Comparing performance of: Optional Chaining vs Ternary

Created: 4 years ago by: Guest

Jump to the latest result

Optional Chaining

Ternary

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):