Use the Nullish Coalescing Operator in TypeScript
This lesson introduces the ?? operator which is known as nullish coalescing. The ?? operator produces the value on the right-hand side if (and only if) the value on the left-hand side is null or undefined, making it a useful operator for providing fallback values.
We'll contrast the ?? operator with the || logical OR operator which produces the value on the right-hand side if the value on the left-hand side is any falsy value (such as null, undefined, false, "", 0, …).
Additional Reading
Instructor: [0:00] In the previous lesson, we looked at the optional chaining operator and how to use it in TypeScript. In this lesson, I want to talk about the nullish coalescing operator, which is written as two question marks. It's oftentimes used in conjunction with optional chaining.
[0:15] Before we jump into the nullish coalescing operator, I want to motivate why it's useful. We can parse in the indentation level when we call the serializeJSON() function. In this case, I'm parsing the indentation level two. If we don't specify the indent property, the default indentation level is zero, and we can verify this by running this program.
[0:37] In the output, we can see that the JSON is not indented at all, so the indentation level is zero. Now, let's say that we wanted the default indentation level to be two rather than zero. If we don't parse an indent property, we should use the value two.
[0:54] We can do this by using the logical OR operator and parsing two as the right operand. If we run the program again, we can now see that the resulting JSON is indented with two spaces. Of course, we can also still specify a different indentation. If I come back down here and I specify an indentation level of four, and if I run this one more time, we can see that the output is indented with four spaces.
[1:21] Let's see what happens when I set the indent property to zero. We would expect the resulting JSON to not be indented at all. However, this is not what's happening. We still get an indentation level of two. This is because of how we're using the OR operator here.
[1:38] The logical OR operator has a left operand and a right operand. It evaluates to the right operand if, and only if the left operand is falsy. If we have the expression null or two, the resulting value is two because null is a falsy value, so the operator produces the right operand. Similarly, if we have the expression undefined or two, we also get the value two because undefined is also a falsy value.
[2:07] However, we shouldn't forget that the number zero is also considered a falsy value. If we have the expression zero or two, the result is two, because the left operand is a falsy value. This applies to other falsy values as well, for example, the values false, Not-a-Number or the empty string.
[2:29] In all cases, the logical OR operator produces the right operand because the left-hand side is falsy. This is where it gets tricky sometimes if you're trying to mix nullable values with a logical OR operator. We want to provide a fallback value, but we only want to provide it for null and undefined, not for any other falsy values.
[2:49] This is where we should be using the nullish coalescing operator instead. The nullish coalescing operator is written as two question marks. It also takes two operands. It produces the value on the right-hand side if the value on the left-hand is null or undefined. Differently, we only fallback to the right-hand side if we have a nullish value on the left-hand side.
[3:13] Nullish in this case means null or undefined. That's why it's called nullish coalescing. Here is where the operator comes in useful. If we have a falsy value on the left-hand side that is not null or undefined, we keep the left-hand side, so we can write, 0'2. That expression will evaluate to the value of zero. This is exactly the behavior that we want in our serialized JSON function.
[3:40] For the sake of completeness, let's go through the other examples we've seen before. We also tried the values false, not a number, and the empty string. You can see that in all cases, even though these are falsy values, we keep the left-hand side when using the nullish coalescing operator.
[4:00] Let's jump back into our example. Let's fix our code. Let's see if this works. We can see that we get the JSON serialized string with no indentation because we passed the value of zero. Let's now set the indentation level to four. Let's give this another run. That's looking fine as well. Finally, if we don't specify any indentation level, we now use the fallback value of two.
[4:33] You'll oftentimes see the nullish coalescing operator used in conjunction with the optional chaining operator. Optional chaining can produce the value undefined. Nullish coalescing is a great way to provide a fallback value. Be careful when using the logical OR operator. It might not have the behavior that you want.
[4:52] In a lot of cases, the nullish coalescing operator should be preferred over the logical OR operator. To know which one you should be using, ask yourself whether you want to provide a fallback value for falsy values or for nullish values only.