Benchmark: lodash.get vs optional chaining(babel) vs optional chaining(es2020) vs Without Optional chaining

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: {}
};

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;
Optional chaining (es2020)
var c = state?.wrapped1?.wrapped2?.location?.search
Without Optional chaining
var d = state || state.wrapped1 || state.wrapped1.wrapped2 || state.wrapped1.wrapped2.localtion || state.wrapped1.wrapped2.localtion.search

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark compares the performance of three approaches to access nested object properties in JavaScript:

1. `lodash.get`
2. Optional chaining with Babel (ES2015) syntax
3. Optional chaining with ES2020 syntax
4. Without optional chaining

**Options Compared**

Here's a brief description of each approach:

* **`lodash.get`**: A utility function from the Lodash library that allows you to safely navigate nested objects.
* **Optional chaining with Babel (ES2015) syntax**: This uses the `?.` operator, which was introduced in ES2015. The `?` symbol is used to indicate a potential null or undefined value, and the expression only evaluates if it's truthy.
* **Optional chaining with ES2020 syntax**: Similar to the previous approach, but uses the new `?.` operator introduced in ES2020.
* **Without optional chaining**: This approach uses traditional dot notation (e.g., `state.wrapped1.wrapped2.location.search`) and doesn't take into account potential null or undefined values.

**Pros and Cons**

Here's a brief summary of each approach:

* **`lodash.get`**:
	+ Pros: Easy to use, provides a clear and safe way to navigate nested objects.
	+ Cons: Adds an external dependency (Lodash), which may not be desirable for all projects.
* **Optional chaining with Babel (ES2015) syntax**:
	+ Pros: Allows for more concise code, uses a familiar syntax pattern (`?.`).
	+ Cons: Only supports ES2015, which might limit its use in newer projects that target later versions of JavaScript.
* **Optional chaining with ES2020 syntax**:
	+ Pros: Upgrades the `?` operator to the new ES2020 version, providing improved performance and readability.
	+ Cons: Requires a newer JavaScript engine or transpiler to work (e.g., Babel 7.4.3+).
* **Without optional chaining**:
	+ Pros: Works with all modern JavaScript engines, doesn't add any external dependencies.
	+ Cons: Can lead to null pointer exceptions if the nested object properties don't exist.

**Library and Syntax**

The `lodash.get` function is part of the Lodash library, which provides a wide range of utility functions for working with JavaScript data structures. The optional chaining syntax (`?.`) was introduced in ES2015 (Babel 6.3.2+) and later improved upon in ES2020.

**Special JS Features/Syntax**

The test cases use the new `?.` operator, which is a feature of modern JavaScript syntax. This operator allows you to safely access nested object properties without throwing errors when they don't exist.

**Other Alternatives**

If you're looking for alternatives to Lodash's `get` function or optional chaining, consider:

* Using the `in` operator (`state.wrapped1 && state.wrapped1.wrapped2 && state.wrapped1.wrapped2.location.search`)
* Utilizing a library like `get-object-value` (a tiny, lightweight alternative to Lodash's `get` function)
* Implementing your own custom function for navigating nested objects

Keep in mind that the choice of approach ultimately depends on your project's specific requirements and constraints.

Related benchmarks:

lodash.get vs optional chaining(babel) vs optional chaining(es2020) vs Without Optional chaining (version: 2)

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

lodash.get

Optional chaining (babel es2015)

Optional chaining (es2020)

Without Optional chaining

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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