Use the Nullish Coalescing Operator to Set Object Defaults

Yoni Weisbrod
InstructorYoni Weisbrod
Share this video with your friends

Social Share Links

Send Tweet

The nulliish coalescing operator (??) allows us to be more explicit when setting object defaults. It allows us to ensure that only values that are "nullish" (either null or undefined) cause the default value to be taken, rather than anything that evaluates to false.

It's a safer way to operate.

Please note: This feature is still making its way through the TC39 proposal process. To use it in your project today, you can enable it using Babel's Nullish Coalescing plugin.

Instructor: [00:00] We want to write some logic that takes into account whether a user that arrived from the server is an active or an inactive user.

[00:08] In our logic, we've set up a default active status to be true. For this particular user, we're going to say that if the server sends an active status, take that, and if not, take the default active status. This leaves us with a logic issue, as we can see here.

[00:28] The user status is considered to be true, even though it's actually false. This is because the OR operator will continue evaluating the right operand in any case that the left one is false.

[00:40] To rectify this, we're going to swap the OR operator with a nullish coalescing operator, which will only continue to the right operand if the left one is null or undefined. In this case, it's false, so that will be the final value.

[00:53] This operator would be equally valuable if we were working with any falsy value that was not null or undefined. For instance, if we had a number that was set to zero, or if we had a property that was just an empty string, we would encounter the same problem as a false.

[01:08] This operator will be commonly used with the optional chaining operator when we're trying to access a property from a deeply-nested object. We don't know necessarily what the value of the property will be, but we do know that if it's not present, it will be undefined.

[01:24] If we try to grab a property in the deeply-nested object, and it's a falsy value, the nullish coalescing operator will continue to do its job and make sure that only the left operand is evaluated.