Benchmark: && vs optional chaining

Script Preparation code:

var job = {
  "summary": {
    "total_actions": 4,
    "finished_actions": 4
  },
  "updated_at": "2020-07-15T10:24:42.364000000Z",
  "job_id": "4b1733e7-c8e0-4fdd-a7f1-13d3ab725c92",
  "description": "Job from our export",
  "created_at": "2020-07-15T10:24:40.975000000Z",
  "status": "finished",
  "tags": {
    "export_id": [
      "8848c5d8-fd44-43c0-b7f2-1428d0f4891a" 
    ]
  }
}

Tests:

&&
if (job.tags && job.tags.export_id) { // do nothing }
optional chaining (?.)
if (job.tags?.export_id) { // do nothing }

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 runs

optional chaining (?.)

28.4M/s

16.2M/s

Fastest: optional chaining (?.) (1.8x faster)

View exact numbers

✓ optional chaining (?.): 28,416,814 ops/sec
• &&: 16,168,194 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 chaining (?.)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

optional chaining (?.)

57.5M/s

52.7M/s

View exact numbers

Test name	Executions per second
✓ optional chaining (?.)	57,538,000 Ops/sec
&&	52,663,280 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares two different ways to perform null checks in JavaScript: using the logical AND operator (`&&`) and optional chaining (`?.`).

**Script Preparation Code**

The script preparation code is a simple JSON object representing a job with various properties, including `summary`, `updated_at`, `job_id`, `description`, `created_at`, and `status`. This object is used to test the null check behavior in different scenarios.

**Html Preparation Code**

There is no HTML preparation code provided for this benchmark. This means that the benchmark will not involve any DOM manipulation or rendering, which simplifies the testing process.

**Individual Test Cases**

The two individual test cases are:

1. `&&` (using logical AND operator)
2. `.export_id` (using optional chaining)

These test cases check how the JavaScript engine handles null checks in different scenarios. The `job.tags && job.tags.export_id` expression uses the logical AND operator to check if both properties exist before proceeding. On the other hand, `job.tags?.export_id` uses optional chaining to access the `export_id` property safely.

**Pros and Cons of Each Approach**

1. **Logical AND Operator (`&&`)**:
	* Pros: Simple and straightforward approach.
	* Cons: May not be as safe or expressive as optional chaining.
	* Note: This approach can lead to a null pointer exception if either operand is null, which may not be what the developer intended.

2. **Optional Chaining (`?.`)**:
	* Pros: Safer and more expressive way to access nested properties while handling null values.
	* Cons: May introduce additional overhead due to the use of optional chaining.
	* Note: This approach provides a more explicit way to handle null checks, making it easier to read and maintain code.

**Library Usage**

There is no library usage in this benchmark. The test cases only rely on built-in JavaScript features.

**Special JS Features/Syntax**

The benchmark uses the `?.` syntax, which was introduced in ECMAScript 2020 (ES12). This syntax allows for safe navigation of nested objects and arrays.

**Other Alternatives**

For more advanced null checks or object manipulation, other alternatives might include:

* Using a library like Lodash, which provides utility functions for working with objects and arrays.
* Implementing custom null check logic using bitwise operators or other techniques.
* Using a different language or framework that offers better support for null checks or optional chaining.

In conclusion, this benchmark highlights the importance of safe and expressive null checks in JavaScript. By comparing two approaches to handling null values, developers can make informed decisions about how to write more robust and maintainable code.

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

How to better null-check

Comparing performance of: `&& vs optional chaining (?.)`

Created: 4 years ago by: Guest

Go to the latest result

&&

optional chaining (?.)

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

How to better null-check

Comparing performance of: && vs optional chaining (?.)

Created: 4 years ago by: Guest

Go to the latest result

&&

optional chaining (?.)

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 34 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: `&& vs optional chaining (?.)`