Why is this an issue?

The optional chaining operator ?. allows to access a deeply nested property, returning undefined if the property or any intermediate object is undefined.

This usually means that the expression is expected to evaluate as undefined in some cases. Therefore, using the optional chaining operator in a context where returning undefined throws an error can lead to runtime exceptions.

(event?.callback)(); // Noncompliant: when 'event' does not have 'callback' property TypeError is thrown
const { code } = event?.error; // Noncompliant: when 'event' does not have 'error' property TypeError is thrown
func(...event?.values); // Noncompliant: when 'event' does not have 'values' property TypeError is thrown

Since optional chaining represents multiple execution branches, having an error thrown in such a context can be hard to debug.

How to fix it

In order to prevent runtime errors, you should provide fallbacks for when the optional chaining operator short-circuits to undefined.

• Nullish coalescing operator ??

(event?.callback ?? defaultCallback)();

• Logical OR operator ||

(event?.callback || defaultCallback)();

• Ternary operator condition ? exprIfTrue : exprIfFalse

(event?.callback ? event?.callback : defaultCallback)();

Resources

Documentation

• MDN web docs - Optional chaining (?.)
• MDN web docs - Nullish coalescing operator (??)
• MDN web docs - Logical OR (||)
• MDN web docs - Conditional (ternary) operator