Benchmark: ES6 Optional Chaining vs TS Optional Chaining result in javascript vs 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:

TS Optional Chaining result in javascript
((_c = (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.a) === null || _a === void 0 ? void 0 : _a.b) === null || _b === void 0 ? void 0 : _b.c) === null || _c === void 0 ? void 0 : _c.d) || 2; ((_f = (_e = (_d = badObj === null || badObj === void 0 ? void 0 : badObj.a) === null || _d === void 0 ? void 0 : _d.b) === null || _e === void 0 ? void 0 : _e.c) === null || _f === void 0 ? void 0 : _f.d) || 2;
Lodash Get
_.get(obj, "a.b.c.d", 2) _.get(badObj, "a.b.c.d", 2)
ES6 Optional Chaining
obj?.a?.b?.c?.d || 2 badObj?.a?.b?.c?.d || 2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TS Optional Chaining result in javascript
Lodash Get
ES6 Optional Chaining

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 26_2_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/143.0.7499.151 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 143 on iOS 26.2.0

View result in a separate tab

Test name	Executions per second
TS Optional Chaining result in javascript	117831976.0 Ops/sec
Lodash Get	9412717.0 Ops/sec
ES6 Optional Chaining	406535872.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares three ways to access nested properties in JavaScript objects: ES6 Optional Chaining, TypeScript Optional Chaining, and Lodash's _.get() function.

**ES6 Optional Chaining**

* Description: In ES6, the optional chaining operator (`?.`) allows you to access nested properties of an object without causing a TypeError if any of the intermediate references are null or undefined. It is used as follows: `obj?.a?.b?.c?.d`.
* Pros:
	+ Lightweight and easy to read.
	+ Does not add extra overhead, unlike other methods.
	+ Well-supported by modern browsers.
* Cons:
	+ May be less readable for developers who are not familiar with it.

**TypeScript Optional Chaining**

* Description: TypeScript also supports optional chaining with the same syntax as ES6 (`?.`). This is used in the context of JavaScript and is often used to ensure type safety at compile time. The implementation is similar to ES6 but with some additional checks.
* Pros:
	+ Provides better type checking and error messages at compile-time, making development easier.
	+ Can help prevent null reference exceptions.
* Cons:
	+ May have slightly higher overhead due to the need for TypeScript's type system.

**Lodash _.get()**

* Description: Lodash is a popular JavaScript utility library. Its _.get() function allows you to safely navigate nested object properties and returns undefined if any of the intermediate references are null or undefined. It is used as follows: `_.get(obj, "a.b.c.d", 2)`.
* Pros:
	+ Provides flexibility and safety when accessing nested objects.
	+ Can handle complex object structures.
* Cons:
	+ Requires including an additional library (Lodash), which may increase the bundle size.

**Special JS feature or syntax**

None mentioned in this benchmark, but it's worth noting that ES6 Optional Chaining was introduced to provide a safe and concise way to access nested properties without causing errors. TypeScript's support for optional chaining provides additional type safety benefits.

**Other alternatives**

* Other ways to access nested objects include using bracket notation (`obj["a"]["b"]["c"]["d"]`) or the `in` operator (`"a" in obj && "b" in obj.a && "c" in obj.a.b && "d" in obj.a.b.c`). However, these methods can be less readable and may have higher overhead compared to optional chaining.
* Some JavaScript libraries, like jQuery, provide their own way of accessing nested objects.

Related benchmarks:

ES6 Optional Chaining vs TS Optional Chaining result in javascript vs vs. Lodash _.get (version: 0)

ES6 Optional Chaining vs TS Optional Chaining result in javascript vs vs. Lodash _.get

Comparing performance of: TS Optional Chaining result in javascript vs Lodash Get vs ES6 Optional Chaining

Created: 6 years ago by: Guest

Jump to the latest result

TS Optional Chaining result in javascript

Lodash Get

ES6 Optional Chaining

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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