The?. operator is like the. chaining operator, except that instead of causing an error if a reference isnullish (null orundefined), the expression short-circuits with a return value ofundefined. When used with function calls, it returnsundefined if the given function does not exist.

This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.

For example, consider an objectobj which has a nested structure. Withoutoptional chaining, looking up a deeply-nested subproperty requires validating thereferences in between, such as:

const nestedProp = obj.first && obj.first.second;

The value ofobj.first is confirmed to be non-null (andnon-undefined) before accessing the value ofobj.first.second. This prevents the error that would occur if you accessedobj.first.second directly without testingobj.first.

This is an idiomatic pattern in JavaScript, but it gets verbose when the chain is long, and it's not safe. For example, ifobj.first is aFalsy value that's notnull orundefined, such as0, it would still short-circuit and makenestedProp become0, which may not be desirable.

With the optional chaining operator (?.), however, you don't have toexplicitly test and short-circuit based on the state ofobj.first beforetrying to accessobj.first.second:

const nestedProp = obj.first?.second;

By using the?. operator instead of just., JavaScript knowsto implicitly check to be sureobj.first is notnull orundefined before attempting to accessobj.first.second. Ifobj.first isnull orundefined, the expressionautomatically short-circuits, returningundefined.

This is equivalent to the following, except that the temporary variable is in fact notcreated:

const temp = obj.first;const nestedProp =  temp === null || temp === undefined ? undefined : temp.second;

Optional chaining cannot be used on a non-declared root object, but can be used with a root object with valueundefined.

undeclaredVar?.prop; // ReferenceError: undeclaredVar is not defined

You can use optional chaining when attempting to call a method which may not exist.This can be helpful, for example, when using an API in which a method might beunavailable, either due to the age of the implementation or because of a feature whichisn't available on the user's device.

Using optional chaining with function calls causes the expression to automaticallyreturnundefined instead of throwing an exception if the method isn'tfound:

const result = someInterface.customMethod?.();

However, if there is a property with such a name which is not a function, using?. will still raise aTypeError exception "someInterface.customMethod is not a function".

eval?.() is the shortest way to enterindirect eval mode.

You can also use the optional chaining operator withbracket notation, which allows passing an expression as the property name:

const propName = "x";const nestedProp = obj?.[propName];

This is particularly useful for arrays, since array indices must be accessed with square brackets.

function printMagicIndex(arr) {  console.log(arr?.[42]);}printMagicIndex([0, 1, 2, 3, 4, 5]); // undefinedprintMagicIndex(); // undefined; if not using ?., this would throw an error: "Cannot read properties of undefined (reading '42')"

It is invalid to try to assign to the result of an optional chaining expression:

const object = {};object?.property = 1; // SyntaxError: Invalid left-hand side in assignment

Template literal tags cannot be an optional chain (seeSyntaxError: tagged template cannot be used with optional chain):

String?.raw`Hello, world!`;String.raw?.`Hello, world!`; // SyntaxError: Invalid tagged template on optional chain

The constructor ofnew expressions cannot be an optional chain (seeSyntaxError: new keyword cannot be used with an optional chain):

new Intl?.DateTimeFormat(); // SyntaxError: Invalid optional chain from new expressionnew Map?.();

When using optional chaining with expressions, if the left operand isnull orundefined, the expression will not be evaluated. For instance:

const potentiallyNullObj = null;let x = 0;const prop = potentiallyNullObj?.[x++];console.log(x); // 0 as x was not incremented

Subsequent property accesses will not be evaluated either.

const potentiallyNullObj = null;const prop = potentiallyNullObj?.a.b;// This does not throw, because evaluation has already stopped at// the first optional chain

This is equivalent to:

const potentiallyNullObj = null;const prop =  potentiallyNullObj === null || potentiallyNullObj === undefined    ? undefined    : potentiallyNullObj.a.b;

However, this short-circuiting behavior only happens along one continuous "chain" of property accesses. If yougroup one part of the chain, then subsequent property accesses will still be evaluated.

const potentiallyNullObj = null;const prop = (potentiallyNullObj?.a).b;// TypeError: Cannot read properties of undefined (reading 'b')

This is equivalent to:

const potentiallyNullObj = null;const temp = potentiallyNullObj?.a;const prop = temp.b;

Except thetemp variable isn't created.

This example looks for the value of thename property for the memberCSS in a map when there is no such member. The result is thereforeundefined.

const myMap = new Map();myMap.set("JS", { name: "Josh", desc: "I maintain things" });const nameBar = myMap.get("CSS")?.name;

If you use callbacks or fetch methods from an object with adestructuring pattern, you may have non-existent values that you cannot call asfunctions unless you have tested their existence. Using?., you can avoid this extra test:

// Code written without optional chainingfunction doSomething(onContent, onError) {  try {    // Do something with the data  } catch (err) {    // Testing if onError really exists    if (onError) {      onError(err.message);    }  }}

// Using optional chaining with function callsfunction doSomething(onContent, onError) {  try {    // Do something with the data  } catch (err) {    onError?.(err.message); // No exception if onError is undefined  }}

With nested structures, it is possible to use optional chaining multiple times:

const customer = {  name: "Carl",  details: {    age: 82,    location: "Paradise Falls", // Detailed address is unknown  },};const customerCity = customer.details?.address?.city;// This also works with optional chaining function callconst customerName = customer.name?.getName?.(); // Method does not exist, customerName is undefined

Thenullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

function printCustomerCity(customer) {  const customerCity = customer?.city ?? "Unknown city";  console.log(customerCity);}printCustomerCity({  name: "Nathan",  city: "Paris",}); // "Paris"printCustomerCity({  name: "Carl",  details: { age: 82 },}); // "Unknown city"

• Nullish coalescing operator (??)