TypeScript | Double Question Marks (??) – What it Means

by

You probably have seen double question marks (??) while checking new code and don’t understand much what the question marks mean. Unless you have experience working with other programming languages such as C#, you might not be aware of the terminology either. In this article, I will explain what ?? means.

The double question marks (??) are also called nullish coalescing operators and they allow to use of a default value set on the right side of the operator in case the initial value from the left side of the operator is null or undefined. To make things simpler, let’s look at an example.

let random;
const color = random ?? 'red';

In our previous example, we have two variables: random and color. The random variable is undefined. Therefore, at the moment of declaring and assigning the value to the color variable, it will default to “red”.

Difference Between Logical OR (||) and Nullish Coalescing Operator (??)

If you have been working with JavaScript or TypeScript for a while, chances are you been assigning values to variables using the logical OR (||) operator. If we take our previous example and change operator to use the logical operator, it will look like the following:

let random;
const color = random || 'red';

In this case, the value of color variable would be “red”.

You might be wondering: What is the difference between the logical OR operator and the nullish coalescing operator?

The logical OR operator will use the default value if the initial expression is considered falsy. A value is considered falsy because when attempted to convert the value into a boolean, the result will be false. Some of the common falsy values in JavaScript are:

  • false
  • 0
  • null
  • undefined

If you are looking to check the complete list of falsy values, I recommend checking this falsy article.

If you attempt to convert all of these values to a boolean, you will always get a false.

console.log(Boolean(false));      // it will log: false
console.log(Boolean(0));          // it will log: false
console.log(Boolean(null));       // it will log: false
console.log(Boolean(undefined));  // it will log: false

This is slightly different from the nullish coalescing operator as the later will use the default value whenever the initial expression is null or undefined. The following example should provide more clarity between the differences of the two operators:

// examples using the logical OR operator
console.log(0 || 'default');          // it will log: default
console.log(5 || 'default');          // it will log: 5
console.log(-0 || 'default');         // it will log: default
console.log(-3 || 'default');         // it will log: -3

console.log(false || 'default');     // it will log: default
console.log(true || 'default');      // it will log: true

console.log(null || 'default');      // it will log: default
console.log(undefined || 'default'); // it will log: default

// examples using the nullish coalescing operator
console.log(0 ?? 'default');         // it will log: 0
console.log(5 ?? 'default');         // it will log: 5
console.log(-0 ?? 'default');        // it will log: -0
console.log(-3 ?? 'default');        // it will log: -3

console.log(false ?? 'default');    // it will log: false
console.log(true ?? 'default');     // it will log: true

console.log(null ?? 'default');      // it will log: default
console.log(undefined ?? 'default'); // it will log: default

The nullish coalescing operator came up as a solution for many JavaScript and TypeScript developers to prevent unwanted behavior when using the logical OR and not having a clear understanding of all the falsy values in JavaScript.

Not Created By TypeScript

TypeScript didn’t always support the nullish coalescing operator. In fact, this operator was introduced in TypeScript in version 3.7. Remenber, TypeScript compiles code into JavaScript. However, this operator was not always in JavaScript. JavaScript constantly evolves and it is defined by a set of standards defined by ECMA.

You might have heard of ECMAScript. ECMAScript is a general-purpopse scripting language that defines the standards for languages such as JavaScript. This was done with the purpose to support interoperability of web pages across different web browsers. JavaScript is an implementation of those ECMA standards.

TC39 is the technical committee of the ECMA in charge of maintaining and evolving the definition of JavaScript. TC39 proposes new implementations to the language. Only until December of 2019, the implementation of a nullish coalescing operator was proposed and published the following year. Check the list of TC39 proposals if you are interested in checking what future JavaScript features will be.

More TypeScript Tips!

There is a list of TypeScript tips you might be interested in checking out

Did you like this TypeScript tip?

Share your thoughts by replying on Twitter of Become A Better Programmer or to personal my Twitter account.