Benchmark: Optional chaining vs Lodash.get with nullish coalescing

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var obj = {a: {b: {c: {d: 1}}}}
var badObj = {}

Tests:

Optional Chaining
obj?.a?.b?.c?.d badObj?.a?.b?.c?.d ?? 2
Lodash
_.get(obj, "a.b.c.d") _.get(badObj, "a.b.c.d", 2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Optional Chaining
Lodash

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Optional Chaining	254689728.0 Ops/sec
Lodash	8923687.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two different methods of safely accessing nested properties within an object:

1. **Optional Chaining** (a feature of modern JavaScript).
2. **Lodash's `_.get` function** using a default parameter with nullish coalescing.

### What is being tested

The benchmark focuses on:
- Accessing deeply nested properties in an object (`obj`) and handling cases where the path might not exist by providing a fallback value (2 in this case) when accessing a property that yields `undefined` or `null`.

### Comparison of the two approaches

#### 1. Optional Chaining

- **Syntax**: `obj?.a?.b?.c?.d ?? 2`
- **Description**: 
  - The `?.` operator is used to access the properties of an object without throwing an error if the property does not exist. If any part of the chain is `undefined` or `null`, the expression will return `undefined`, and subsequently, the `??` operator provides a fallback value (2).
  
- **Pros**:
  - **Simplicity**: Allows for shorter and more readable syntax.
  - **Native Support**: Part of the ECMAScript language, requiring no additional libraries.
  
- **Cons**:
  - **Browser Support**: It requires modern JavaScript support, which may not be available in all environments (though most modern browsers implement it).

#### 2. Lodash `_.get`

- **Syntax**: `_.get(obj, "a.b.c.d", 2)`
- **Description**: 
  - Lodash's `_.get` function safely accesses properties using a string path and accepts a default value if the property does not exist. If the specified path does not exist, it returns the provided default value.
  
- **Pros**:
  - **Flexibility**: Can handle a variety of use cases where dynamic property access is required.
  - **Legacy Support**: Works in environments where JavaScript syntax features like optional chaining may not be supported.
  
- **Cons**:
  - **Dependency**: Requires the Lodash library to be included, which adds to the bundle size.
  - **Overhead**: May have performance impacts due to function calls compared to native JavaScript syntax.

### Benchmark Results

The given benchmark results show a significant performance difference:
- **Optional Chaining** achieved **254,689,728 executions per second**.
- **Lodash** reached **8,923,687 executions per second**.

### Considerations

1. **Performance**: From the benchmark results, optional chaining is vastly more efficient. For scenarios where performance is critical, especially in loops or frequently executed code, optional chaining is preferable.
  
2. **Readability**: The syntax for optional chaining is generally cleaner and directly incorporates default values with nullish coalescing, useful for clarity.

3. **Backward Compatibility**: For large projects needing compatibility with older environments that do not support new JavaScript features, Lodash might still be a viable option for maintaining broader support.

4. **Alternatives**: Other potentially similar approaches include:
   - **Traditional checks**: Using `if` statements to check each property level, which can be verbose.
   - **Destructuring with default values**: This can also mitigate issues with `undefined` values, but can lead to less readable code.
   - **Using TypeScript**: For developers utilizing TypeScript, types can help ensure safe property access without leading to runtime errors.

In summary, the choice between optional chaining and Lodash's `_.get` will depend on the specific project requirements, including the target environment's JavaScript support, performance considerations, and the project's codebase maintainability.

Related benchmarks:

Optional chaining vs Lodash.get with nullish coalescing (version: 1)

Forked from a previous comparison which made use of the lodash get's default parameter. The comparison wasn't fair because the vanilla JS wasn't adding a default value with nullish coalescing.

Comparing performance of: Optional Chaining vs Lodash

Created: one month ago by: Guest

Jump to the latest result

Optional Chaining

Lodash

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):