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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of **optional chaining** (`?.`) with **ternary operators** (`condition ? trueValue : falseValue`) for accessing nested object properties in JavaScript.

Let's break down each approach:

**1. Optional Chaining:**

*   **Definition:** `foo?.bar?.baz?.qux` reads as "if `foo` exists, then check if `bar` exists within `foo`, and so on until `qux` is found. If any of these properties are missing (undefined or null), the entire expression returns `undefined` without throwing an error."
*   **Pros:** Concise, readable syntax, avoids potential errors from accessing non-existent properties.

**2. Ternary Operator:**

*   **Definition:** `foo && foo.bar && foo.bar.baz && foo.bar.baz.qux ? foo.bar.baz.qux : void 0;`  checks if each property exists in the chain (`&&`). If all exist, it returns the value of `qux`. Otherwise, it returns `void 0` (effectively null).
*   **Pros:** Can be more efficient in some cases (especially when accessing multiple properties) than optional chaining due to early exit conditions.

**Cons & Considerations:**

*   **Optional Chaining:** Less performant in situations where the majority of the chain is expected to exist, leading to unnecessary checks.

*   **Ternary Operator:** Can be more verbose and harder to read compared to optional chaining, especially for longer chains.

**Alternatives:**

*   **Destructuring assignment:** Useful for extracting specific properties from objects:
    ```javascript
    const { bar: { baz: { qux } } = foo; 
    ```
*   **Lodash/Underscore libraries:** Offer methods like `get()` or `at()` that handle nested property access safely.

The benchmark results show that **optional chaining is faster in this particular scenario**. However, performance can vary depending on the structure of your objects and the frequency with which you access properties.

Remember to choose the approach that best balances readability, maintainability, and performance for your specific use case.

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 gemma2:9b, generated one year ago):