Benchmark: lodash.get vs optional chaining v2

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: 2 years ago)

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash.get	5116225.0 Ops/sec
Optional chaining (babel es2015)	10376170.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of two approaches: Lodash's `get()` method and the optional chaining operator (`?.`) from Babel, transpiled to ES5 syntax.

**Tested Approaches**

1. **Lodash's `get()` method**: This approach uses the Lodash library to dynamically access nested properties in an object.
2. **Optional Chaining Operator (`?.`)**: This is a new JavaScript feature introduced in ECMAScript 2020, which allows for safe navigation of nested properties in objects.

**Options Compared**

The benchmark compares two approaches:

1. **Lodash's `get()` method**: This approach uses the Lodash library to access nested properties.
2. **Optional Chaining Operator (`?.`)**: This approach uses a transpiled version of the operator, converted from ES6 syntax to ES5 syntax for compatibility.

**Pros and Cons**

* **Lodash's `get()` method**:
	+ Pros:
		- Widely supported library with good documentation.
		- Can handle nested properties more easily than manual approach.
	+ Cons:
		- Requires additional library dependency.
		- May introduce unnecessary overhead due to function call and object lookup.
* **Optional Chaining Operator (`?.`)**:
	+ Pros:
		- Native JavaScript feature, no additional library dependency required.
		- Can be more efficient than Lodash's `get()` method, as it eliminates the need for a separate function call.
	+ Cons:
		- Requires support for newer JavaScript features (ES6 and beyond).
		- May not work in older browsers or environments.

**Library: Optional Chaining Operator (`?.`)**

The optional chaining operator (`?.`) is a new feature introduced in ECMAScript 2020. It allows you to safely navigate nested properties in objects, avoiding null pointer exceptions. The syntax is as follows:
```javascript
obj.prop?.childProp;
```
In this context, the `?.` operator will return `undefined` if any of the intermediate properties are null or undefined.

**Special JavaScript Feature: Optional Chaining Operator (`?.`)**

The optional chaining operator (`?.`) is a new feature that allows for safe navigation of nested properties in objects. It was introduced in ECMAScript 2020 and has been widely adopted by modern browsers and environments.

**Alternatives**

If you prefer not to use the optional chaining operator, alternative approaches include:

1. **Manual property access**: Use dot notation or bracket notation to access nested properties directly.
```javascript
obj.prop.childProp;
```
2. **Other libraries**: Consider using other libraries that provide similar functionality, such as `get()` methods from other utility libraries like Moment.js or Underscore.js.

Keep in mind that the performance differences between these approaches may be negligible for simple cases, but can add up for more complex scenarios.

Related benchmarks:

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

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

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

Created: 2 years ago by: Guest

Jump to the latest result

lodash.get

Optional chaining (babel es2015)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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