Benchmark: ES6 Optional Chaining vs. Lodash _.get

HTML Preparation code:

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

Script Preparation code:

var obj = {a: {b: {c: {d: 1}}}}
var badObj = {}

Tests:

ES6 Optional Chaining
obj?.a?.b?.c?.d || 2 badObj?.a?.b?.c?.d || 2
Lodash Get
_.get(obj, "a.b.c.d", 2) _.get(badObj, "a.b.c.d", 2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Optional Chaining
Lodash Get

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Optional Chaining	224554272.0 Ops/sec
Lodash Get	9010457.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

The provided JSON represents two benchmark definitions:

1. **ES6 Optional Chaining**: This test compares the performance of ES6's optional chaining operator (`?.`) with the `||` operator in a series of nested property accesses on an object `obj`. The test also includes a "bad" version of `obj` that is not guaranteed to exist, used to push the limits of the interpreter.
2. **Lodash Get**: This test uses the Lodash library's `_get()` function to access nested properties in two different objects: `obj` and `badObj`. The goal is to determine which method is faster.

Now, let's explore the options being compared:

**ES6 Optional Chaining vs. Lodash _.get**

Both approaches use a combination of property accesses to navigate through an object. However, they differ significantly in how they handle the possibility of non-existent properties:

* **ES6 Optional Chaining (`?.`)**: This operator returns `undefined` if any of the accessed properties are null or undefined, preventing potential errors and making it easier to write safer code.
* **Lodash _.get()**: This function takes an optional default value as a second argument. If the object does not have the specified property, it will return the default value instead of throwing an error.

**Pros and Cons**

1. **ES6 Optional Chaining (`?.`)**:
	* Pros: Safer code, fewer errors, better readability.
	* Cons: May incur additional overhead due to the optional operator's behavior.
2. **Lodash _.get()**:
	* Pros: Allows for more control over error handling, can be useful in certain edge cases.
	* Cons: Introduces additional dependencies (Lodash), may not provide better performance.

The test result shows that Chrome 83 executed the ES6 Optional Chaining (`?.`) version approximately 63% faster than the Lodash Get version. However, this might depend on various factors such as the JavaScript engine implementation, hardware, and compiler optimizations.

**Other Alternatives**

For handling property accesses with optional chaining, some other alternatives include:

1. **JSON5's Optional Property Access**: This is a similar concept to ES6 Optional Chaining but uses a different syntax.
2. **Polyfill-based implementations**: For older browsers that do not support ES6 features, you can use polyfills like [ES6-Promise](https://github.com/kevill/es6-promise) or [lodash-optional-chaining](https://github.com/lodash-es/optional-chaining).
3. **Custom implementation**: Depending on your specific requirements and performance needs, you might consider implementing a custom solution using bitwise operations or other techniques.

In conclusion, both ES6 Optional Chaining (`?.`) and Lodash _.get() have their pros and cons. While the former provides safer code and better readability, it may incur additional overhead. The latter offers more control over error handling but introduces dependencies and potential performance trade-offs.

Related benchmarks:

ES6 Optional Chaining vs. Lodash _.get (version: 0)

Comparing performance of: ES6 Optional Chaining vs Lodash Get

Created: 6 years ago by: Guest

Jump to the latest result

ES6 Optional Chaining

Lodash Get

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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