The ?. Operator in TypeScript: How It Works and What It's Actually Called

Introduction: The Question That Haunts Beginners

Have you ever written code in TypeScript and gotten an error like Cannot read property 'name' of undefined? A familiar pain, right? Especially when working with data coming from a server or deeply nested objects. It's in moments like these that the question arises: "Is there an operator in TypeScript that allows you to safely access properties without fear of everything crashing?"

On Stack Overflow, this question has gathered thousands of views. And the answer is yes, such an operator exists. Moreover, it exists in JavaScript (starting from ES2020), and in TypeScript it works "out of the box." It's called optional chaining, and it looks like the familiar ?.. In this article, we will not only tell you how to use it but also look under the hood: how the TypeScript compiler transforms this elegant syntax into safe JavaScript code.

What Is the ?. Operator Called in TypeScript?

Let's start with the main point. In the developer community, this operator is called by different names:

\n
• Optional chaining — the official name in the ECMAScript specification.
\n
• Safe navigation operator — borrowed from other languages like C# and Swift.
\n
• Null-conditional operator — found in Microsoft documentation.
\n

But the essence is the same: ?. allows you to access an object's property, and if the object is null or undefined, instead of an error, we simply get undefined. This is not magic, but simply syntactic sugar that makes code cleaner and safer.

Basic Syntax

The syntax is extremely simple. Instead of writing:

if (user && user.profile && user.profile.name) {\n    console.log(user.profile.name);\n}

You write:

console.log(user?.profile?.name);

If user is undefined, the entire chain is interrupted, and undefined is printed to the console. No errors, no extra checks. Beautiful!

How It Works Under the Hood: TypeScript Compilation to JavaScript

TypeScript is a superset of JavaScript. It doesn't execute code directly but compiles it into regular JS. So let's see what our elegant user?.profile?.name turns into after compilation.

Example: Simple Optional Chaining

Original TypeScript code:

const name = user?.profile?.name;

After compilation (targeting ES5):

var name = user === null || user === void 0 ? void 0 : user.profile === null || user.profile === void 0 ? void 0 : user.profile.name;

What's happening here? The compiler generates a ternary operator that checks each nesting level for null or undefined. If the value is null or undefined, it returns void 0 (this is just a reliable way to get undefined on older engines). If not, it proceeds. Essentially, this is the same "manual" code we used to write, but now it's generated by the machine.

Example: Optional Chaining with Function Calls

The ?. operator works not only with properties but also with function calls. Suppose we have a method getAddress that might be missing:

const address = user?.getAddress?.();

After compilation:

var address = user === null || user === void 0 ? void 0 : (typeof user.getAddress === "function" ? user.getAddress() : void 0);

Notice: the compiler doesn't just check for null, but also verifies that getAddress is a function before calling it. If it's not a function, it returns undef