Use Optional Chaining

In JavaScript, trying to access a property of undefined or null will throw a runtime error. To prevent this, you guard the property access by checking whether the object exists before accessing its properties.

How to Guard

if (obj && obj.x) {
 console.log(obj.x);
}

Let’s break this down:

obj && obj.x uses short-circuit evaluation:
If obj is falsy (like null or undefined), then obj.x is never evaluated.
If obj is truthy, it then checks obj.x.

This ensures that the code inside the if block is only run if obj is defined, preventing errors.

Example:

let obj = undefined;

if (obj && obj.x) {
 console.log(obj.x);
} else {
 console.log("Safe from crashing!");
}

Output:

Safe from crashing!

If we had just written:

console.log(obj.x);

It would have thrown an error because obj is undefined.

In newer JavaScript (ES2020+), there's a cleaner way:

console.log(obj?.x);

?. is the optional chaining operator.
It safely tries to access x only if obj is not null or undefined.

This is functionally similar to:

if (obj != null) {
  console.log(obj.x);
}

But much more concise.

Friendly404

ABOUT

CONTRIBUTIONS

BADGES

CONNECTIONS