Optional Chaining in JavaScript: The Introduction
Tags: javascript, webdev, tutorial, beginners
Published: 2020-06-27 22:02:04

---
title: Optional Chaining in JavaScript: The Introduction
published: true
description: 
tags: #javascript #webdev #tutorial #beginners 
cover_image: https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/10/21104843/javascript-optional-chaining.jpg
---
## What is Optional Chaining?
It's a new addition that has been added to ES2020 that allows us to check for object properties to make sure that they're not undefined or null.

## What the problem is
Before, to check if an object's property was undefined, we could do something like  this:

```js
let nameLength = db.student.name.length 
```

Now, the problem is if db, student, or name is undefined it would throw a type error so let's try it another way. 

```js
let nameLength;
if(db && db.student && db.student.name) {
  nameLength = db.student.name.length
}
```

You could also use the ternary operator 

```js
const nameLength =
  (db
    ? (db.student
      ? (db.student.name
        ? db.student.name.length
        : undefined)
      : undefined)
    : undefined);
```

Okay, the last two examples are less error-prone but it doesn't exactly help readability so let's introduce optional chaining, shall we.


## Introducing Optional Chaining
The problems have been presented so let's use the alternative to refactor the first example.

```js
let nameLength = db?.student?.name?.length
```

It is characterized by the ?. operator and if db, student, or name is undefined then it won't throw an error, instead, nameLength will just be undefined. 

## Short-circuiting

First and foremost, what is short-circuiting? 

Let's take a look at the || logical operator 

In JavaScript, it will evaluate from left to right and if it finds a truthy value then it will "short-circuit" and not even look at the second operand.

```js
true || false
```

## Short-circuiting in optional chaining

Since it evaluates from left to right, if we look at the example below

```js
let user = null;
let count = 0;

user?.increase(count++);

console.log(count);  // 0

```

The operator ?. will immediately "short-circuit" and not check the rest if the user doesn't exist.


## Using square brackets [ ]

```js 
const optionName = 'optional setting';
const optionLength = db?.student?.preferences?.[optionName].length;
```

If the option name is undefined then opitionLength will just be undefined and if it is not undefined it will return the value

## Function invocation

Similar to accessing the property with a square bracket, you can also invoke a function 

```js
const adminOption = db?.student?.validateSomeAwesomeFunction?.().option;
```

## nullish coalescing ?? operator

Optional Chaining can be used with the nullish coalescing ?? operator when you need a default value.

```js 
const object = { id: 13, names: { first: 'Natalie', last: 'Smith' }};

const bio = object?.names?.bio ?? 'Tell us about yourself';
```

As you can see, since the property bio doesn't exist on the object, we just result back to the defaulted value.


## Caveats

!["A play on of Shakespeare To Be or Not To Be"](https://miro.medium.com/max/3064/1*GHWkP3HaKL0NYQkm71CUAQ.png "")

Don't overuse optional chaining as it only allows for us to check to see if a property value is undefined/null. If we did user?.favorites and the user is not defined then it will throw an error. 

### Equality Checks 
Let's take a look at the following example 

```js 
if(foo && bar && foo.opitionOne === bar.opitionTwo) {...}

and convert it to 

if(foo?.opitionOne === bar?.opitionTwo) {...}
```

In the first case without optional chaining, the condition will not be true unless both foo and bar are truthy. However, in the second case, if foo and bar are null, it will be truthy because foo and bar will return undefined, and thus, this can lead to an unexpected equality check and bugs. 

## Operator precedence
First and foremost, what is the operator precedence? 

It determines the order in which operators(|| && ===) are evaluated much like CSS selectors(.class, #id, etc..) whichever one has higher precedence it will be evaluated first.  

One thing to note is optional chaining has higher precedence than &&. So when going in to replace the && with optional chaining for an equality check and since && has lower precedence than ?. it might introduce an unexpected outcome especially since ?. will return undefined if it's not there. 


# Conclusion
Thank you for reading and if I missed something in this post please comment down below, I'm not an expert so feedback is always appreciated. 

If you would like to buy me a coffee ☕️ that would be deeply appreciated as I am always tired 😴

<a href="https://www.buymeacoffee.com/thatgalnatalie" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 51px !important;" ></a>



![thank you](https://media.giphy.com/media/5ArJanyCfxgiY/giphy.gif "")

**cover image from https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/10/21104843/javascript-optional-chaining.jpg**