JavaScript ES2020 features: Nullish Coalescing Operator (??) and Optional Chaining (?.)
Tags: javascript, beginners, programming, tutorial
Published: 2022-01-30 17:06:06

![meme image](https://user-images.githubusercontent.com/62842327/151677828-9ad8e3c9-c077-4896-acc5-3d663994cc75.jpeg)

The two features are new in JavaScript ES2020. They are used to simplify the code and make it more readable.

I decided to write some simple examples to show how they work.

## Nullish Coalescing Operator (??)

It is an operator that returns the first value if it is not null or undefined, otherwise, it returns the second value.

A simple example:

```javascript
const defaultValue = 'hello';
const nullishValue = null || undefined;
const result = nullishValue ?? defaultValue;
console.log(result); // hello
```

This operator can be compared with the logical operator `||` (or), so what's the difference?

The logical operator `||` returns the first value if it is not falsy(e.g., '', 0, NaN, null, undefined) and not only null or undefined.

See the example below:

```javascript
const defaultValue = 'hello';
const nullishValue = null || undefined; // undefined
const result = nullishValue || defaultValue;
console.log(result); // hello

- - -

const count = 0;
const result2 = count || 1;
console.log(result2); // result is 1 and not 0

- - -

const text = '';
const result3 = text || 'default';
console.log(result3); // result is 'default' and not ''
```

This behavior may cause unexpected consequences if you consider 0, '', or NaN as valid values.

To avoid this, you can use the nullish coalescing operator `??` that was introduced above.

## Optional Chaining (?.)

The optional chaining operator `?` is used to access the properties and methods of an object. It works like the chaining operator `.` but it does not return an error when the value is nullish.

The operator works like this:

```javascript
const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};
console.log(students.student1.name); // John

console.log(students.student2.name); // TypeError: Cannot read properties of undefined (reading 'name')

// using optional chaining the error is avoided
console.log(students.student2?.name); // undefined
```

When the object is accessed, JavaScript checks if the property exists(it doesn't nullish value). If it does, it returns the value. If it doesn't, it returns undefined.

## Optional Chaining with nullish Coalescing

The Optional Chaining operator `?.` can be used with the nullish coalescing operator `??`. This combination of operators is very powerful.

Let's see an example:

```javascript
const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};

const student = students.student2?.name; // undefined

// using nullish coalescing operator `??` with optional chaining operator `?.`
const student = students.student2?.name ?? 'student not found'; // student not found
```

You can find more examples in the [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) and [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) MDN page.

Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on [Twitter](https://twitter.com/_ianfelix)