Benchmark: lodash get vs es6

HTML Preparation code:

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

Script Preparation code:

var v = undefined;
var a = null;

Tests:

lodash get
a = _.get(v, 't.u', null);
es6
a = v?.t?.u || null;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash get
es6

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
lodash get	8587613.0 Ops/sec
es6	8554219.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches to access nested properties in JavaScript: using Lodash's `get` function and the optional chaining operator (`?.`) introduced in ECMAScript 2020 (ES6).

**Script Preparation Code**

The script preparation code initializes two variables:
```javascript
var v = undefined;
var a = null;
```
`v` is set to `undefined`, which will be used as a nested object. `a` is initialized with `null`, which will store the result of accessing nested properties.

**HTML Preparation Code**

The HTML preparation code includes a script tag that loads Lodash version 4.17.5 from a CDN:
```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
```
This ensures that the Lodash `get` function is available for use in the benchmark.

**Individual Test Cases**

There are two test cases:

1. **Lodash Get**
```javascript
a = _.get(v, 't.u', null);
```
This line uses the Lodash `get` function to access the nested property `'t.u'` on the `v` object and returns `null` if it's not present.

Pros:

* Easy to use for nested property access.
* Well-tested and stable in Lodash.

Cons:

* Requires an external library (Lodash) to be loaded, which may add latency.
* May have performance overhead due to the additional function call.

2. **Optional Chaining Operator**
```javascript
a = v?.t?.u || null;
```
This line uses the optional chaining operator (`?.`) to access the nested property `'t.u'` on the `v` object and returns `null` if any of the intermediate properties are `undefined`.

Pros:

* Built-in and efficient, as it's implemented in the browser's JavaScript engine.
* Does not require an external library.

Cons:

* Only supported in modern browsers that implement ES6+ syntax (not all browsers).
* May have unexpected behavior if used incorrectly.

**Benchmark Results**

The latest benchmark results show the executions per second for both test cases on a Chrome 129 instance running on Windows. The `es6` test case performs slightly better than the `lodash get` test case, which is expected given the efficiency of the optional chaining operator in modern browsers.

**Other Alternatives**

If you need to support older browsers that don't implement ES6+ syntax or require an external library for Lodash, you can consider alternative approaches:

* **Dot notation**: Accessing nested properties using dot notation (e.g., `v.t.u`) is a common alternative to the optional chaining operator. However, it may have performance implications due to the need to resolve the property chain in a single operation.
* **Branded getters and setters**: Another approach is to use branded getters and setters to access nested properties, but this requires more boilerplate code and may have similar performance characteristics to the Lodash `get` function.

Keep in mind that these alternatives may not be as efficient or convenient as using the optional chaining operator or an external library like Lodash.

Related benchmarks:

lodash get vs es6 (version: 0)

Comparing performance of: lodash get vs es6

Created: 3 years ago by: Guest

Jump to the latest result

lodash get

es6

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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