Benchmark: babel transpiled optional chaining vs safeGet vs optional chaining

Script Preparation code:

var state = {
  wrapped1: {
    wrapped2: {
      location: {
    	search: '',
    	id: 12
      }
    }
  },
  data: {}
};

var safeGet = function(nestedObj, paths, defaultVal) {
  if (!paths || paths.length === 0) return defaultVal
  const result = paths.slice(0).reduce((obj, path, i, arr) => {
    if (!obj) {
      arr.splice(i) // break out of the loop
      return undefined
    }
    return obj[path]
  }, nestedObj)

  if (result === undefined || result === null) {
    return defaultVal
  }

  return result
}

Tests:

safeGet
var l = safeGet(state, ['wrapped1','wrapped2','location','search'], 'hey');
Optional chaining
var l = state?.wrapped1?.wrapped2?.location?.search || 'hey'
Optional chaining (babel es2015)
var _state$wrapped, _state$wrapped$wrappe, _state$wrapped$wrappe2; var s = state === null || state === void 0 ? void 0 : (_state$wrapped = state.wrapped1) === null || _state$wrapped === void 0 ? void 0 : (_state$wrapped$wrappe = _state$wrapped.wrapped2) === null || _state$wrapped$wrappe === void 0 ? void 0 : (_state$wrapped$wrappe2 = _state$wrapped$wrappe.location) === null || _state$wrapped$wrappe2 === void 0 ? void 0 : _state$wrapped$wrappe2.search;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
safeGet
Optional chaining
Optional chaining (babel es2015)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
safeGet	3056014.2 Ops/sec
Optional chaining	17340892.0 Ops/sec
Optional chaining (babel es2015)	5942490.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three approaches for accessing nested object properties: `safeGet`, optional chaining (`?.`), and a custom implementation using the ternary operator (babel ES2015).

**Test Cases**

There are three test cases:

1. **safeGet**: This approach uses a recursive function to traverse the object tree and retrieve the value. The function takes an object, an array of path segments, and a default value as input.
2. **Optional Chaining (`?.`)**: This approach uses the optional chaining operator (`?.`) to access nested properties. It's a shorthand way of writing `obj.prop1.prop2.prop3` instead of `obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3`.
3. **Custom Implementation (babel ES2015)**: This approach uses a more verbose syntax, where each property is accessed individually using the ternary operator. The goal is to see how much slower this implementation is compared to the other two.

**Pros and Cons of Each Approach**

* **safeGet**:
	+ Pros: flexible, can handle arbitrary path lengths, and provides a default value.
	+ Cons: recursive function can be slow for large objects, and might lead to stack overflow errors.
* **Optional Chaining (`?.`)**:
	+ Pros: concise, readable, and efficient for simple cases. It also avoids the need for explicit null checks.
	+ Cons: might not work as expected in older browsers or with non-standard implementations.
* **Custom Implementation (babel ES2015)**:
	+ Pros: more control over the execution flow, potentially faster due to less function calls.
	+ Cons: verbose syntax can lead to code bloat and is less readable.

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it's likely that the `safeGet` function uses a library like Lodash or Ramda for its utility functions.

**Special JS Features/Syntax**

The benchmark uses optional chaining (`?.`) and the custom implementation (babel ES2015) use more advanced syntax features. The `.??` operator is not part of the standard JavaScript language but was introduced in ECMAScript 2020 as a new feature.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* **Template literals**: Instead of using `safeGet`, you could use template literals to build the path string dynamically.
* **`in` operator**: You can also use the `in` operator to check if a property exists before trying to access it. This approach is more concise than the ternary operator-based implementation.

These alternatives might not be as efficient or readable as the original approaches, but they can provide an interesting comparison and help you understand the trade-offs involved in different coding styles.

Related benchmarks:

babel transpiled optional chaining vs safeGet vs optional chaining (version: 0)

Comparing performance of: safeGet vs Optional chaining vs Optional chaining (babel es2015)

Created: 2 years ago by: Guest

Jump to the latest result

safeGet

Optional chaining

Optional chaining (babel es2015)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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