Benchmark: lodash.get vs 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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash.get	12413802.0 Ops/sec
Optional chaining (babel es2015)	66020924.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 definition and test cases.

**Benchmark Definition**

The benchmark is designed to compare two approaches for accessing nested properties in an object:

1. **Lodash `.get()` method**: This is a utility function from the Lodash library that allows you to dynamically access nested properties in an object.
2. **Optional Chaining Operator (?.) with Babel Transpilation**: This is a syntax feature introduced in ECMAScript 2020, which allows you to safely navigate nested properties without throwing errors when a property is missing.

**Script Preparation Code**

The script preparation code defines the `state` object with nested properties:
```javascript
var state = {
  wrapped1: {
    wrapped2: {
      location: {
        search: '',
        id: 12
      }
    }
  },
  data: {}
};
```
This object represents a complex nested structure, which is used as the input for the benchmark.

**Html Preparation Code**

The HTML preparation code includes a reference to the Lodash library:
```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
```
This script loads the Lodash library, which is used by the `lodash.get()` method.

**Test Cases**

There are two test cases:

1. **Lodash `.get()` method**: This test case uses the `_.get()` method to access the `location.search` property in the `state` object.
```javascript
var l = _.get(state, ['wrapped1', 'wrapped2', 'location', 'search']);
```
This approach requires the Lodash library to be loaded and imported.

2. **Optional Chaining Operator (?.) with Babel Transpilation**: This test case uses the optional chaining operator (`?.`) to access the `location.search` property in the `state` object.
```javascript
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;
```
This approach requires Babel to transpile the optional chaining operator syntax.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Lodash `.get()` method**:
	+ Pros: Easy to use, well-established library.
	+ Cons: Requires loading an additional library (Lodash), may be overkill for simple use cases.
* **Optional Chaining Operator (?.) with Babel Transpilation**:
	+ Pros: Modern syntax, concise, and expressive.
	+ Cons: Requires Babel transpilation, may not be supported in older browsers or environments.

**Library Used**

The Lodash library is used to implement the `_.get()` method. Lodash provides a utility function that allows you to dynamically access nested properties in an object.

**Special JS Feature/Syntax**

The optional chaining operator (`?.`) is a new syntax feature introduced in ECMAScript 2020, which allows you to safely navigate nested properties without throwing errors when a property is missing.

**Alternatives**

Other alternatives for accessing nested properties in an object include:

* Using bracket notation (`state.wrapped1.wrapped2.location.search`)
* Using the `in` operator (`'wrapped1' in state && 'wrapped2' in state.wrapped1 && 'location' in state.wrapped1.wrapped2 && 'search' in state.wrapped1.wrapped2.location`)
* Using a recursive function to traverse the nested object
* Using a library like jQuery or React to handle nested data structures

Note that these alternatives may have different performance characteristics, readability, and maintainability compared to the Lodash `.get()` method and optional chaining operator.

Related benchmarks:

lodash.get vs optional chaining (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

lodash.get

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