Benchmark: lodash.get vs optional chaining vs safeGet

HTML Preparation code:

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

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:

lodash.get
var l = _.get(state, ['wrapped1','wrapped2','location','search']);
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;
safeGet
var l = safeGet(state, ['wrapped1','wrapped2','location','search']);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash.get
Optional chaining (babel es2015)
safeGet

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
lodash.get	3807926.5 Ops/sec
Optional chaining (babel es2015)	5677968.0 Ops/sec
safeGet	3128650.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, compared, and their pros/cons.

**Benchmark Overview**

The benchmark compares three approaches to access nested properties in an object:

1. **Lodash.get**: A utility function from the Lodash library that provides a way to safely navigate nested objects.
2. **Optional Chaining (Babel ES2015)**: A built-in JavaScript feature introduced in ECMAScript 2019 that allows safe navigation of nested objects using the `?.` operator.
3. **safeGet**: A custom function implemented by the test user, which provides similar functionality to Lodash.get.

**What is tested**

The benchmark tests how fast each approach can access a specific nested property (`location.search`) in an object (`state`).

**Options compared**

* Lodash.get
* Optional Chaining (Babel ES2015)
* safeGet

**Pros and Cons of each approach:**

1. **Lodash.get**: Pros:
	* Well-established library with a wide range of features.
	* Provides robust error handling.
Cons:
	* Adds external dependency (Lodash).
	* May have overhead due to the extra function call.
2. **Optional Chaining (Babel ES2015)**: Pros:
	* Native JavaScript feature, eliminating additional dependencies.
	* Efficient and concise way to access nested properties.
Cons:
	* Only works in modern browsers that support ES2019+ features.
	* May not be familiar to developers without prior experience with this syntax.
3. **safeGet**: Pros:
	* Custom implementation can provide fine-grained control over error handling.
Cons:
	* Requires manual implementation, which may add development overhead.

**Library and purpose**

The Lodash library provides a range of utility functions for working with objects, arrays, and other data structures. In this case, `lodash.get` is used to safely navigate nested objects.

**Special JS feature or syntax**

The benchmark uses Optional Chaining (Babel ES2015), which introduces the `?.` operator that allows safe navigation of nested objects without directly accessing potentially null or undefined values. This syntax was introduced in ECMAScript 2019 and is supported by modern browsers.

**Alternative approaches**

Other alternatives to access nested properties include:

* Brute Force approach: Use a loop to iterate over each property path.
* Array-based approach: Use an array of property names to access the nested object.
* Custom implementation using `in` operator or `hasOwnProperty()` method.

However, these alternative approaches may not be as efficient or elegant as Lodash.get, Optional Chaining (Babel ES2015), or safeGet.

Related benchmarks:

lodash.get vs optional chaining vs safeGet (version: 0)

Compare lodash.get to babel transpiled ?. (optional chaining) operator

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

Created: 2 years ago by: Guest

Jump to the latest result

lodash.get

Optional chaining (babel es2015)

safeGet

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):