JavaScript Optional Chaining “?”: How it Works with Examples

JavaScript optional chaining lets you access object values without runtime errors. It checks if a property exists before access and prevents the code from breaking.

What is JavaScript Optional Chaining?

Optional chaining is a syntax in JavaScript. It uses ?. to access nested values safely. It checks if a value exists before access and stops if it does not.

Here is the syntax:

object?.property
object?.method()
object?.[expression]

So, how it works:

• JavaScript checks the left side of ?..
• If the value is null or undefined, it stops.
• If the value exists, it continues and reads the property or calls the method.

Optional chaining saves time in null checks. It avoids long checks with &&. It makes code shorter and easier to follow.

Benefits and limitations.

• It prevents errors from undefined or null values.
• It makes code smaller and cleaner.
• It only works in modern browsers and Node.js versions.

The Differences Between Optional Chaining “?” and Logical Operators

Logical operators like || and && handle truthy and falsy values. Optional chaining only checks if a value is null or undefined.

Here is a table showing you the key differences:

Optional chaining fits property access. Logical operators fit conditions. Both have different focuses on code flow.

Examples

Access nested object value:

let user = { profile: { name: "David Alaba" } };
let username = user?.profile?.name;
console.log(username);

This code checks if user and profile properties already exist before accessing them to avoid an error if one is missing, and still returns Ali when present.

Here is the output:

David Alaba

Call method:

let book = {
  getTitle: function() {
    return "JavaScript Tutorials by FlatCoding Team";
  }
};

console.log(book?.getTitle?.());

This code runs getTitle only if it exists and skips execution if the method is not there.

Here is the output:

JavaScript Tutorials by FlatCoding Team

Optional chaining with arrays:

let data = { items: ["one", "two", "three"] };
let first = data?.items?.[0];
console.log(first);

It checks for the items property before accessing it and avoids an error if items does not exist.

Here is the result:

one

Advanced case with function call in chain:

let api = {
  response: () => ({ code: 200, body: { message: "Okay" } })
};

let message = api?.response?.().body?.message;
console.log(message);

This code calls response if it exists, and then checks if body and message exists.

This will print the result below:

Okay

Wrapping Up

You learned what optional chaining is and how it works with syntax.

Here is a quick recap:

• It uses ?. to stop at null or undefined.
• It helps you to prevent errors in nested values.
• Logical operators handle truthy or falsy checks instead.
• Use it for property access and use logical operators for condition flow.

FAQs

const user = { profile: { name: "Alex" } };
console.log(user?.profile?.name); // Alex
console.log(user?.account?.id); // undefined

const book = { details: { title: "JS Guide" } };
console.log(book?.details?.title); // JS Guide
console.log(book?.author?.name); // undefined

const tools = { log: () => "Run log" };
console.log(tools.log?.()); // Run log
console.log(tools.print?.()); // undefined

Similar Reads