Benchmark: ES6 Optional Chaining vs. 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:

ES5 Optional Chaining
(obj.a == null ? undefined : obj.a.b == null ? undefined : obj.a.b.c == null ? undefined : obj.a.b.c.d) || 2 (badObj.a == null ? undefined : badObj.a.b == null ? undefined : badObj.a.b.c == null ? undefined : badObj.a.b.c.d) || 2
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
ES5 Optional Chaining
ES6 Optional Chaining
Lodash Get

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark measures the performance of three different approaches for accessing nested properties in JavaScript objects:

1. **ES5 Optional Chaining**: This approach uses the nullish coalescing operator (`??`) to access nested properties.
2. **ES6 Optional Chaining**: This approach uses the optional chaining operator (`?.`) to access nested properties.
3. **Lodash Get**: This approach uses a function from the Lodash library, `_.get()`, which is designed for safely accessing nested properties in objects.

**Options Compared**

The three options are compared in terms of their execution speed and performance.

**Pros and Cons**

Here's a brief summary of each approach:

* **ES5 Optional Chaining**: This approach uses a more straightforward syntax but may be slower due to the need for explicit null checks.
	+ Pros: Easy to read and understand, works with older browsers that don't support optional chaining.
	+ Cons: May be slower than other approaches.
* **ES6 Optional Chaining**: This approach provides a concise way to access nested properties while avoiding null checks.
	+ Pros: Concise syntax, avoids explicit null checks, can improve performance.
	+ Cons: Requires support for ES6 features, may not work in older browsers.
* **Lodash Get**: This approach uses a library function specifically designed for accessing nested properties in objects.
	+ Pros: Robust and well-tested, works with any JavaScript environment that supports the Lodash library.
	+ Cons: Adds an external dependency, may introduce overhead due to the use of a separate library.

**Library Used**

The benchmark uses the Lodash library, version 4.17.5, which provides the `_.get()` function for safely accessing nested properties in objects.

**Special JS Feature/Syntax**

Only ES6 Optional Chaining uses a special JavaScript feature/syntax, specifically the optional chaining operator (`?.`). This feature was introduced in ECMAScript 2017 (ES2017) and is supported by modern browsers, including Firefox 85. The other two approaches do not use this syntax.

**Alternative Approaches**

Other approaches for accessing nested properties in objects include:

* Using dot notation with explicit null checks (e.g., `obj.a && obj.a.b && obj.a.b.c`)
* Using bracket notation with explicit null checks (e.g., `obj['a'] && obj['a']['b'] && obj['a']['b']['c']`)
* Using a recursive function to traverse the object structure
* Using a library like Lo-Dash or Ramda, which provide specialized functions for accessing nested properties in objects.

However, these alternative approaches may have different trade-offs in terms of performance, conciseness, and readability compared to the three options being measured in this benchmark.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0

Browser/OS: Firefox 85 on Windows 7

View result in a separate tab

Test name	Executions per second
ES5 Optional Chaining	34254436.0 Ops/sec
ES6 Optional Chaining	31376830.0 Ops/sec
Lodash Get	1563903.4 Ops/sec

Related benchmarks:

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

Comparing performance of: ES5 Optional Chaining vs ES6 Optional Chaining vs Lodash Get

Created: 4 years ago by: Guest

Jump to the latest result

ES5 Optional Chaining

ES6 Optional Chaining

Lodash Get

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):