What's new in JavaScript: Optional Chaining
Tags: javascript, codenewbie, news, typescript
Published: 2019-10-28 23:42:31

---
canonical_url: https://inspiredwebdev.com/discovering-optional-chaining-in-javascript
---

> Originally published on [inspiredwebdev.com](https://inspiredwebdev.com/discovering-optional-chaining-in-javascript)

&nbsp;

As of the date of writing this article (24th October 2019), Optional Chaining is at Stage 3 of the TC39 process, meaning that you won't be able to natively use it in your browser yet.

You can read more about the stages of the TC39 process [here](https://tc39.es/process-document/).

&nbsp;

## What is Optional Chaining?

Let's take these simple `Object` that represent our Users.

```js
const user1 = {
	name: 'Alberto',
	age: 27,
	work: {
		title: 'software developer',
		location: 'Vietnam'
	}
}

const user2 = {
	name: 'Tom',
	age: 27
}

```

Let's say we want to display the job title of our user.
As we can see, `work` is an optional property of our `Object` so we would have to write something like this:

```js
let jobTitle;
if (user.work){
	jobTitle = user.work.title
}
```

or using a ternary operator:

```js
const jobTitle = user.work ? user.work.title : ''
```

Before we access the property `title` of `work` we need to check that the user actually has a `work`.

When we are dealing with simple objects it's not such a big deal but when the data we are trying to access is deeply nested, it can be a problem.

This is where the Optional Chaining `?.` operator comes to the rescue. This is how we would rewrite our code with this new operator:

```js
const jobTitle = user.work?.title
```

Done! More concise and readable.

You can read the code above as `does the user have a work property? if yes, access the title property inside of it`

```js
const user1JobTitle = user1.work?.title;
// software developer
const user2JobTtile = user2.work?.title;
// undefined
```

As soon as we hit a property that is not available on the `Object`, the operator will return `undefined`

Imagine dealing with a deeply nested object with optional properties such as these two users and their school record.

```js
const elon = {
	name: 'Elon Musk',
	education: {
		primary_school: {	/*  primary school stuff */	},
		middle_school: { /* middle school stuff */ },
		high_school: {/* high school stuff here */},
		university: {
			name: 'University of Pennsylvania',
			graduation: {
				year: 1995
			}
		}
	}
}

const mark = {
	name: 'Mark Zuckerberg',
	education: {
		primary_school: {	/*  primary school stuff */	},
		middle_school: { /* middle school stuff */ },
		high_school: {/* high school stuff here */},
		university: {
			name: 'Harvard University',
		}
	}
}
```

Not all of our Users have studied in University so that property is going to be optional and the same goes for the graduation as some have dropped out and didn't finish the study.

Now imagine wanting to access the graduation year of our two users:

```js
let graduationYear;
if(
	user.education.university && user.education.university.graduation && user.education.university.graduation.year){
		graduationYear = user.education.university.graduation.year;
}
```

And with the Optional Chaining operator:

```js
const elonGraduationYear = elon.education.university?.graduation?.year;
// 1992
const markGraduationYear = mark.education.university?.graduation?.year;
// undefined
```

This is how you access optional properties with this new operator, if you want to start using it, it's going to be part of TypeScript 3.7 which I highly recommend learning! You can read more about TypeScript 3.7 [here](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-rc/);

Alternatively, you can use [Babel](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) to start using this operator.

---

&nbsp;

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [InspiredWebDev](https://inspiredwebdev.com/) for more.

<div class="promotional_banner">
<a href="http://a-fwd.to/5gUojI8" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my e-book on <a href="http://a-fwd.to/5gUojI8" target="_blank">Amazon</a> and <a href="https://leanpub.com/thecompleteguidetomodernjavascript2019" target="_blank">Leanpub</a></span>
</div>