Benchmark: Direct vs optional chaining

Script Preparation code:

var detail1 = null
var detail2 = {prop1: 'asdf', prop2: null}
var detail3 = {prop1: null, prop2: 'asdf'}

Tests:

detail1 direct
let y = detail1 && detail1.prop1 && detail1.prop2
detail1 optional
let y = detail1?.prop1 && detail1?.prop2
detail2 direct
let y = detail2 && detail2.prop1 && detail2.prop2
detail2 optional
let y = detail2?.prop1 && detail2?.prop2
detail3 direct
let y = detail3 && detail3.prop1 && detail3.prop2
detail3 optional
let y = detail3?.prop1 && detail3?.prop2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
detail1 direct
detail1 optional
detail2 direct
detail2 optional
detail3 direct
detail3 optional

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
detail1 direct	11609868.0 Ops/sec
detail1 optional	12111548.0 Ops/sec
detail2 direct	4420009.5 Ops/sec
detail2 optional	6474129.5 Ops/sec
detail3 direct	6398137.5 Ops/sec
detail3 optional	11777348.0 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 provided benchmark and explain what's being tested, compared options, pros and cons, library usage, special JS features or syntax, and alternative approaches.

**Benchmark Overview**

The benchmark compares the execution performance of two different ways to access properties in an object: direct property access (`detail1.prop1`) versus optional chaining (`detail1?.prop1`).

**Options Compared**

There are four test cases:

1. `detail1 direct`: Directly accessing `detail1.prop1`
2. `detail1 optional`: Using optional chaining (`detail1?.prop1`)
3. `detail2 direct`: Directly accessing `detail2.prop1`
4. `detail2 optional`: Using optional chaining (`detail2?.prop1`)

**Pros and Cons**

**Direct Property Access (1, 3)**

* Pros:
	+ Faster execution time (due to fewer function calls)
	+ Easier to read and understand for some developers
* Cons:
	+ May lead to null pointer exceptions if the property does not exist
	+ Less flexible than optional chaining

**Optional Chaining (2, 4)**

* Pros:
	+ Reduces the risk of null pointer exceptions
	+ More flexible than direct property access
* Cons:
	+ May be slower execution time due to additional function calls
	+ Can lead to more complex code if not used carefully

**Library Usage**

None in this benchmark. However, it's worth noting that optional chaining was introduced in ECMAScript 2020 (ES10) and is now a standard feature in modern browsers.

**Special JS Feature or Syntax**

Optional chaining (`?.`) is a new syntax introduced in ECMAScript 2020 (ES10). It allows you to access properties of an object without directly accessing them, reducing the risk of null pointer exceptions. This feature was not widely supported until recent browser updates.

**Alternative Approaches**

Other approaches to avoid null pointer exceptions include:

* Using `||` or `??` operator with a default value (e.g., `detail1.prop1 || 'default value'`)
* Using a try-catch block to catch null pointer exceptions
* Verifying the existence of the property before accessing it using `in` operator or `hasOwnProperty()` method

These alternatives may have different performance characteristics and code readability, depending on the specific use case.

Related benchmarks:

Direct vs optional chaining (version: 0)

Comparing performance of: detail1 direct vs detail1 optional vs detail2 direct vs detail2 optional vs detail3 direct vs detail3 optional

Created: 2 years ago by: Guest

Jump to the latest result

detail1 direct

detail1 optional

detail2 direct

detail2 optional

detail3 direct

detail3 optional

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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