My most used features in ES2020

Overview 📄

With ES2020 being finalised there have been some great new additions. I wanted to take a look at two of my most used ES2020 features and what makes them great. So let’s jump right in!

Nullish Coalescing ❔❔

Nullish coalescing is a logical operator that will return its right-hand statement when the left is null or undefined. Think logical || but explicitly for null or undefined values.

Consider the code below using the logical ||

const balance = 0;
const oldBalance = 200;

const newBalance = balance || oldBalance;

console.log(newBalance); // 200

Because the logical || operator checks falsey values in JavaScript (0, '', NaN, null, undefined) the statement above will log 200 instead of 0. Switching this to the nullish coalescing operator will see our falsey values treated correctly.

const balance = 0;
const oldBalance = 200;

const newBalance = balance ?? oldBalance;

console.log(newBalance); // 0

Optional Chaining ⚬❔

Optional chaining is by far one of my most used features from ES2020. This feature allows us to access properties of an object, however deeply nested, without worrying about checking if each level is accessible or not null or undefined.

Consider the below example using the optional chaining operator.

const person = {
  name: "Phil",
  occupation: {
    name: "Software Engineer",
  },
};

console.log(person.career?.name); // undefined

Here we can safely check for unavailable values rather than having additional verbose checks on a given property.

Wrapping up

There are a lot of great features of ES2020 worth checking out so be sure to give them a look: https://262.ecma-international.org/11.0/