JavaScript ES2020 features: Nullish Coalescing Operator (??) and Optional Chaining (?.)

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:

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:

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:

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:

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 and Nullish Coalescing MDN page.

Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on Twitter