Benchmark: babel transpiled optional chaining vs safeGet

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');
babel es5
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
babel es5

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares two approaches to safely access nested object properties: `safeGet` (a custom function) and Babel transpiled ES5 code (`babel es5`). The goal is to determine which approach is faster.

**`safeGet` Function**

The `safeGet` function takes three parameters:

1. `nestedObj`: the root object
2. `paths`: an array of property names to access nested properties
3. `defaultVal`: a default value to return if any property in the path doesn't exist

The function uses the `reduce()` method to iterate through the `paths` array, accessing each property and checking if it exists. If a non-existent property is encountered, it breaks out of the loop using `arr.splice(i)`.

**Babel Transpiled ES5 Code**

The Babel transpiled code attempts to access nested properties using a similar approach:

```javascript
var _state$wrapped = state.wrapped1;
var _state$wrapped$wrappe = _state$wrapped.wrapped2;
var _state$wrapped$wrappe2 = _state$wrapped$wrappe.location;
var s = _state$wrapped$wrappe2.search;
```

This code uses a series of chained assignments to access the nested properties.

**Comparison**

The benchmark compares the performance of:

1. `safeGet` function
2. Babel transpiled ES5 code (`babel es5`)

**Pros and Cons:**

**`safeGet` Function:**

Pros:

* More concise and easier to read (using `reduce()` method)
* Allows for a clear separation between the logic and the property access

Cons:

* May incur additional overhead due to the use of `reduce()`
* Can be less efficient if the property path is very large or deep

**Babel Transpiled ES5 Code (`babel es5`):**

Pros:

* May be more efficient due to the elimination of function call overhead
* Can be optimized further by Babel's transpilation process (e.g., inlining functions, removing unnecessary semicolons)

Cons:

* Less readable and maintainable due to the chained assignments
* Requires a good understanding of ES5 syntax and property access

**Other Considerations**

1. **Null or undefined checks**: Both approaches perform null or undefined checks on each property in the path. This is an essential aspect of safely accessing nested properties.
2. **Function call overhead**: The `safeGet` function involves a function call for each iteration through the `paths` array, which may incur additional overhead.
3. **Property access**: Property access using bracket notation (e.g., `obj[property]`) can be slower than accessing properties directly on an object.

**Alternatives**

1. **Using `in` operator**: Instead of checking if a property exists using `if (!obj) { ... }`, you can use the `in` operator (`obj in obj`) to check if the property is present.
2. **Using `hasOwnProperty()`**: You can also use the `hasOwnProperty()` method to check if an object has a specific property.

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	3021921.0 Ops/sec
babel es5	5801787.0 Ops/sec

Related benchmarks:

babel transpiled optional chaining vs safeGet (version: 0)

Comparing performance of: safeget vs babel es5

Created: 2 years ago by: Guest

Jump to the latest result

safeget

babel es5

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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