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')

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

optional chain

32.6M/s

lodash get with array

8.5M/s

lodash get with string

5.9M/s

Fastest: optional chain (5.6x faster)

View exact numbers

✓ optional chain: 32,559,458 ops/sec
• lodash get with array: 8,454,808 ops/sec
• lodash get with string: 5,855,256 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

optional chain

119.0M/s

lodash get with array

8.8M/s

lodash get with string

4.3M/s

View exact numbers

Test name	Executions per second
✓ optional chain	118,963,912 Ops/sec
lodash get with array	8,819,181 Ops/sec
lodash get with string	4,307,169 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

optional chaining vs lodash get (version: 0)

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

Created: 6 years ago by: Guest

Go to the latest result

optional chain

lodash get with array

lodash get with string

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

optional chaining vs lodash get (version: 0)

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

Created: 6 years ago by: Guest

Go to the latest result

optional chain

lodash get with array

lodash get with string

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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