Benchmark: Nullish vs If - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

nullish
const myObj = {} const myFunc = (param) => param?.key ?? [] for (let i = 0; i < 1e6; i++) { myFunc(myObj) }
if
const myObj = {} const myFunc = (param) => { if (!param.key) return [] return param.key } for (let i = 0; i < 1e6; i++) { myFunc(myObj) }

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

2K/s

nullish

2K/s

View exact numbers

✓ if: 1,769 ops/sec
• nullish: 1,660 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
nullish
if

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

2K/s

nullish

2K/s

View exact numbers

Test name	Executions per second
✓ if	1,769 Ops/sec
nullish	1,576 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark titled "Nullish vs If" compares two different JavaScript approaches for handling optional values while attempting to retrieve a property (`key`) from an object (`myObj`). The focus is on evaluating the performance of these two coding patterns: using the nullish coalescing operator (`??`) versus a traditional conditional `if` statement.

### Test Cases Overview

1. **Nullish Coalescing Approach (`nullish`)**:
   ```javascript
   const myObj = {};
   const myFunc = (param) => param?.key ?? [];
   for (let i = 0; i < 1e6; i++) {
     myFunc(myObj);
   }
   ```
   - **Explanation**: This code utilizes the nullish coalescing operator (`??`), which returns the right-hand operand (an empty array `[]` in this case) when the left-hand operand (`param?.key`) is `null` or `undefined`. It also employs the optional chaining operator (`?.`), which safely accesses `key` and returns `undefined` if `param` is `null` or `undefined`.
   - **Pros**:
     - Concise syntax that enhances readability.
     - Explicitly checks for `null` or `undefined`, which can help avoid unintended falsy values (e.g., `0` or `""`).
   - **Cons**:
     - May introduce slight overhead due to additional checks performed with optional chaining, depending on the engine's optimization.

2. **Conditional If Approach (`if`)**:
   ```javascript
   const myObj = {};
   const myFunc = (param) => {
     if (!param.key) return [];
     return param.key;
   };
   for (let i = 0; i < 1e6; i++) {
     myFunc(myObj);
   }
   ```
   - **Explanation**: This implementation uses a standard `if` statement to check if `param.key` is falsy. If it is, the function returns an empty array; otherwise, it returns `param.key`.
   - **Pros**:
     - Familiar and traditional method familiar to most developers.
     - Potentially more efficient in some contexts, as it directly checks the truthiness of `param.key`.
   - **Cons**:
     - May inadvertently consider valid falsy values (like `0` or `""`) as lack of a key, which may not be the desired behavior in all use cases.
     - Slightly more verbose compared to the nullish coalescing approach.

### Performance Results

From the benchmarking results, we observe the following:

- **If Approach**: 3169.81 executions per second
- **Nullish Coalescing Approach**: 2873.15 executions per second

The `if` approach outperforms the nullish approach in this instance, suggesting that the engine optimizations favor the straightforward evaluation of conditions over the potentially more complex checks in the other method.

### Summary and Considerations

1. **Choosing Between Approaches**: When deciding which pattern to use, consider the nature of the data being processed:
   - Use the nullish coalescing operator when you want specific handling of `null` and `undefined` without affecting other falsy values.
   - Use the `if` statement if you are primarily interested in truthiness checks and are not handling potential `null` or `undefined` scenarios distinctly.

2. **Alternatives**: Other alternatives include:
   - **Default Parameter Values**: Using JavaScript's default parameter feature can offer similar outcomes in certain cases:
     ```javascript
     const myFunc = (param = {}) => param.key || [];
     ```

- **Function Overloads**: In scenarios where you have complex parameter requirements, consider creating overloaded functions or using higher-order functions to encapsulate behavior.

It's essential for developers to assess performance impacts and syntactical clarity when choosing between these approaches, depending on the specific use case at hand.

Nullish vs If (version: 1)

Comparing performance of: `nullish vs if`

Created: one year ago by: Guest

Go to the latest result

nullish

if

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Nullish vs If (version: 1)

Comparing performance of: nullish vs if

Created: one year ago by: Guest

Go to the latest result

nullish

if

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `nullish vs if`