The nullish coalescing operator is a short-circuiting operator you can use to provide an alternative for a left-hand side operand by writing ??. You might already have used && or || before. So how is this different? Let's take the following examples:
const a = '' || 'unknown' // results in 'a' being 'unknown'
const b = 0 || 'unknown' // results in 'b' being 'unknown'
const c = false || 'unknown' // results in 'c' being 'unknown'
const d = NaN || 'unknown' // results in 'd' being 'unknown'
This is because '', 0, false and NaN are falsey values. The nullish coalescing operator however will only return the right-hand side operand if the left-hand side operand is either null or undefined.
Practical example
Let's say you want to display unknown if somebody's amount of points is not known (arbitrary React.js sample code):
const person = {
name: 'Roberta Woods',
email: 'roberta.woods@example.com',
location: 'California',
points: 0
};
return <dl>
<dt>Name</dt>
<dd>{person.name || 'unknown'}</dd>
<dt>Email</dt>
<dd>{person.email || 'unknown'}</dd>
<dt>Location</dt>
<dd>{person.location || 'unknown'}</dd>
<dt>Points</dt>
<dd>{person.points || 'unknown'}</dd>
</dl>;
In this case, points will display unknown which isn't right. We know the number of points, it's 0. Previously, a fix would have been to also check if points is 0 or a number in general and then display that. By using the nullish coalescing operator we can keep our code clean and simple:
const person = {
name: 'Roberta Woods',
email: 'roberta.woods@example.com',
location: 'California',
points: 0
};
return return <dl>
<dt>Name</dt>
<dd>{person.name || 'unknown'}</dd>
<dt>Email</dt>
<dd>{person.email || 'unknown'}</dd>
<dt>Location</dt>
<dd>{person.location || 'unknown'}</dd>
<dt>Points</dt>
<dd>{person.points ?? 'unknown'}</dd>
</dl>;
That's it! I won't bother you with a bunch of other examples. This feature is one of those additions that you will probably find helpful in a variety of code you write and need to check for values. As always, thanks for reading!
