Benchmark: 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}}}}

Tests:

optional chain
obj?.a?.b?.c?.d
lodash get with array
_.get(obj, ['a','b','c','d'])
lodash get with string
_.get(obj, 'a.b.c.d')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
optional chain
lodash get with array
lodash get with string

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 days ago)

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
optional chain	142147200.0 Ops/sec
lodash get with array	22994704.0 Ops/sec
lodash get with string	9595625.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares three approaches to access nested properties of an object:

1. **Optional Chaining**: The `?.` operator (introduced in ECMAScript 2020) allows safe navigation through nested objects, returning `undefined` if any property is missing.
2. **Lodash's `get()` method**: A utility function from the Lodash library that allows accessing nested properties of an object using an array or a string.

**Options compared**

The benchmark compares three options:

* **Optional Chaining (`obj?.a?.b?.c?.d`)**: This approach uses the `?.` operator to safely navigate through the object.
* **Lodash's `get()` method with an array (`_.get(obj, ['a','b','c','d'])`)**: This approach uses Lodash's `get()` function to access the nested property using an array of keys.
* **Lodash's `get()` method with a string (`_.get(obj, 'a.b.c.d')`)**: This approach uses Lodash's `get()` function to access the nested property using a string representation of the key path.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Optional Chaining**
	+ Pros:
		- Safe navigation through objects
		- Concise syntax
		- Built-in support in modern browsers
	+ Cons:
		- Not supported in older browsers (pre-ECMAScript 2020)
		- May be slower due to the overhead of the `?.` operator
* **Lodash's `get()` method with an array**
	+ Pros:
		- Robust and reliable implementation
		- Works across older browsers that support Lodash
	+ Cons:
		- Requires additional dependency (Lodash)
		- More verbose syntax compared to optional chaining
* **Lodash's `get()` method with a string**
	+ Pros:
		- Works on both older and modern browsers
	+ Cons:
		- Less readable than other approaches due to the use of a string representation of the key path

**Library: Lodash**

The benchmark uses the Lodash library, which is a popular utility library for JavaScript. The `get()` method is a part of Lodash's functional programming features and provides a convenient way to access nested properties of an object.

**Special JS feature/syntax: Optional Chaining (`?.` operator)**

The benchmark leverages the optional chaining operator (`?.`) introduced in ECMAScript 2020, which allows safe navigation through nested objects. This syntax is relatively new and may not be supported by older browsers or JavaScript engines.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **Braced notation**: Accessing nested properties using the dot notation (`obj.a.b.c.d`).
* **Function calls**: Using a function to access nested properties (e.g., `obj.get('a.b.c.d')`).
* **Native `in` operator**: Using the native `in` operator to check for property existence and navigate through objects.

Keep in mind that each of these alternatives has its own pros and cons, and the best approach depends on your specific use case and requirements.

Related benchmarks:

optional chaining vs lodash get (version: 0)

Comparing performance of: optional chain vs lodash get with array vs lodash get with string

Created: 4 years ago by: Guest

Jump to the latest result

optional chain

lodash get with array

lodash get with string

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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