Nullish 병합 및 선택적 연결 연산자

Unlike the OR operator, the nullish coalescing operator only looks for null or undefined values. If the value is a falsey value (besides null and undefined), the nullish coalescing operator will return the falsey value.

Here are the falsey values in JavaScript.

• false
• null
• undefined
• 0
• ''
• NaN

0 ?? 15; // 0
false ?? true; // false
'' ?? 'banana'; // ""

So when do you use the null coalescing operator over the OR operator? Here is a simple guideline on what to use. If you want to filter out falsey values, then you should probably use the OR operator. But if falsey values are valid default values to you, then you should probably use the nullish coalescing operator.

It is cool that you can actually chain the nullish coalescing operator, so this is completely valid.

null ?? undefined ?? 0 ?? 'nice'; // 0
null ?? '' ?? 'great'; // ''

You cannot, however, combine it with && or || operators. This will throw a Syntax error.

null || undefined ?? 'not working'

But if you wrap the || expression with a parethesis, it will work.

(null || undefined) ?? 'working';

This is my favorite new feature in ECMAScript 2020. Have you ever encountered a code like this?

const person = {
  address: {},
};

if (person.address && person.address.position && person.address.position.latitude) {
  // do something
}

Before accessing the latitude property, you first have to do a series of checks to make sure it actually exists, otherwise you will get an error Cannot read property 'latitude' of undefined . I frequently encounter code like this, and it can sometimes be pretty annoying.

Here is where optional chaining shines. We can check if the property exists by just using ?. after the property of an object. Let's refactor the code above.

if (person.address?.position?.latitude) {
  // do something
}

Now it is much shorter and cleaner. The optional chaining operator will check for us if the property exists. If the property doesn't exist it will just return undefined and not throw an error.

You can also use optional chaining with arrays and functions. Suppose you have an array of objects like this.

const persons = [
  {
    name: 'Peter',
  },
  {
    name: 'Jessica',
  },
];

If you try to access 3rd person name (which doesn't exist), it will throw an error.

persons[2].name; // Cannot read property 'name' of undefined

But if you use the optional chaining operator, it will just return undefined.

persons[2]?.name; // undefined

The same with functions (returns undefined if it doesn't exist)

persons[2]?.name.toLowerCase(); // undefined

Because the optional chaining operator returns undefined if a property doesn't exit, we could use it together with the nullish coalescing operator to set default values.

const person = {
  address: {},
};

console.log(person?.address?.position ?? 'No address defined.'); // No address defined

JavaScript has immensely improved since ECMAScript 2015 and a lot of new features are being added to the language every year. It is no longer just a language you use for simple animations in the browser 😉

We have seen how to use the nullish coalescing and optional chaining operator. In summary, you can use the nullish coalescing operator if you want your default values to include falsey values. And if you are not sure whether an object has a certain property before accessing it, you can use the optional chaining operator to avoid a long series of check and Cannot read property error.

Thanks for reading! If this has helped you, kindly please share 😎