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

detail1 optional

12.1M/s

detail3 optional

11.8M/s

detail1 direct

11.6M/s

detail2 optional

6.5M/s

detail3 direct

6.4M/s

detail2 direct

4.4M/s

View exact numbers

Test name	Executions per second
✓ detail1 optional	12,111,548 Ops/sec
detail3 optional	11,777,348 Ops/sec
detail1 direct	11,609,868 Ops/sec
detail2 optional	6,474,130 Ops/sec
detail3 direct	6,398,138 Ops/sec
detail2 direct	4,420,010 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.

Direct vs optional chaining (version: 0) Benchmark.js

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

Go 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):

Direct vs optional chaining (version: 0) Benchmark.js

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

Go 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):

Related benchmarks

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