Nullish Coalescing ES10/ES2020 Feature
JS2020 features image by Desire Kaleba

Nullish Coalescing ES10/ES2020 Feature

Contents

  1. ES world brief overview
  2. ES2020 features
  • Nullish Coalescing Operator

ES World Brief Overview

ECMAScript (or ES) is a scripting language specification standardized by Ecma International. It was created to standardize JavaScript to help foster multiple independent implementations. JavaScript has remained the most widely used implementation of ECMAScript since the standard was first published, with other implementations including JScript and ActionScript. ECMAScript is commonly used for client-side scripting on the World Wide Web (WWW), and it is increasingly being used for writing server applications and services using Node.js.

The ECMAScript specification is a standardized specification of a scripting language developed by Brendan Eich of Netscape; initially, it was named Mocha, later LiveScript, and finally JavaScript. You can read all its history here.

Once a feature reaches stage 4 (there are 4 stages: Proposal, Draft, Candidate, and Finished), it will be a part of the new ECMAScript release, and it’s the duty of the browser to implement that feature.


ES2020 features

As a web developer, you have the right to write cross-platform applications. At this time, some of the features have already been implemented in some browsers. For example, Google Chrome 80 added the Nullish operator. You can check if the feature is already available on which browser here.

ES2020 new features include:

In this article, we are going to discuss the nullish coalescing only to keep our focus on one by one. Upcoming articles will be covering others.

Nullish Coalescing (??)

The bullish coalescing (??) adds a new short-circuiting operator meant to handle default values. You might already know the other short-circuiting operators (&& and ||). The first one (&&) means AND i.e both conditions must be true and the second (||) OR i.e as long as one of the conditions is true, we are good to go.

Both of them (&& and ||) handle "truthy" and "falsy" values but they don't fit every scenario and this leads to bugs. Consider the following scenario:

function component(params) {
  const enable = params.enabled || true;
  // ...
}

In this example, let’s treat the enabled property as an optional boolean property that controls whether some functionality in the component is enabled. Meaning, we can explicitly set enabled to either true or false. But, because it is an optional property, we can implicitly set it to undefined by not setting it at all. If it’s undefined we want to treat it as if the component is enabled = true (its default value).

By now, you can probably spot the bug with the code example. If we explicitly set enabled = true, then the enable variable is true. If we implicitly set enabled = undefined, then the enable variable is true. And if we explicitly set enabled = false, then the enable variable is still true! Our intention was to default the value to true, but we actually forced the value instead. The fix, in this case, is to be very explicit about the values we expect:

function Component(props) {
  const enable = props.enabled !== false;
  // …
}

We see this kind of bug pop up with every falsy value. This could have very easily been an optional string (where the empty string '' is considered valid input), or an optional number (where 0 is considered a valid input). This is such a common problem that we’re now introducing the nullish coalescing operator to handle this sort of default value assignment:

function Component(props) {
  const enable = props.enabled ?? true;
  // ...
 
}

The below snippet illustrate more about nullish coalescing.

false ?? true;   //value => false

0 ?? 1;          //value => 0

'' ?? 'default'; //value => ''


null ?? [];      //value => []
undefined ?? []; //value => []

JavaScript is a continuously evolving language, a quality that has made Web Development as awesome as it is today. As you can see in the examples provided in this article, these new features are great regarding code optimization and simplicity. If you really want to use one of them, but the browser does not support it yet, you can always use Babel or other JavaScript transpilers.

That was a small briefing about Nullish coalescing ES2020 feature.

My other profiles

Sources


要查看或添加评论,请登录

Desire Kaleba的更多文章

  • 5 Best JavaScript Resources

    5 Best JavaScript Resources

    Understanding how programming works requires consistent learning and practices. without applying yourself, you can…

社区洞察

其他会员也浏览了