Share

Modern JavaScript (ES2020+) gave us three powerful operators that make our code shorter, safer, and cleaner which are the optional chaining, null coalescing and null coalescing assignment operators.

Usually when dealing with object properties in Javascript, we check for existence of specific property, or checking if this property not nullable, by using ternary expressions. However when properties deeply nested inside the object, we tend to do multiple checks depending on nesting level of properties.

For this (ES2020+) give us three powerful operators that make our code shorter, safer, and cleaner:

• ?. Optional Chaining

• ?? Nullish Coalescing

• ??= Nullish Coalescing Assignment

If you’ve ever written a pile of if checks or ternary operators to guard against undefined or null, these are for you.

1. Optional Chaining ?.

Problem Before

Accessing nested properties was risky:

// Throws error if user or user.address is undefined
const street = user.address.street;

You had to do:

const street = user && user.address ? user.address.street : undefined;

const street = user?.address?.street;

const arr = null;
console.log(arr?.[0]); // undefined, no crash

const obj = { greet: () => "Hi" };
console.log(obj?.greet?.()); // "Hi"
console.log(obj?.bye?.());   // undefined, no crash

const count = 0;
const total = count || 10; // 10 (oops, 0 was replaced)

const count = 0;
const total = count ?? 10; // 0 (correct)

const name = user?.profile?.name ?? "Anonymous";

if (settings.theme == null) {
  settings.theme = "light";
}

settings.theme ??= "light";

let opts = { debug: false };

opts.debug ??= true;  
console.log(opts.debug); // false (kept because not null/undefined)

opts.level ??= 1;
console.log(opts.level); // 1 (assigned because undefined)

const location = {
  District: selectedLocation && selectedLocation.selectedDistrict
    ? selectedLocation.selectedDistrict.id
    : ""
};

const location = {
  District: selectedLocation?.selectedDistrict?.id ?? ""
};

location.District ??= "Unknown";