What is the ?. operator (optional chaining) in TypeScript

# The optional chaining ?. operator in TypeScript

The question mark dot (?.) syntax is called optional chaining in TypeScript and is like using dot notation to access a nested property of an object, but instead of causing an error if the reference is nullish, it short-circuits returning undefined.

Copied!
type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.address?.country); // 👉️ "Chile"

console.log(person.name?.first); // 👉️ undefined

We created a type where the address and name properties are optional.

The first console.log statement uses the optional chaining (?.) operator to access the address.country property on the person object.

Copied!
const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.address?.country); // 👉️ "Chile"

The address.country property exists on the person object, so its value gets logged to the console.

The second example uses the optional chaining (?.) operator to access the name.first property on the person object.

However, the property doesn't exist on the object, so the optional chaining (?.) operator returns undefined.

Copied!
const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.name?.first); // 👉️ undefined

If we didn't use the optional chaining (?.) operator, we would have gotten an error because we're trying to access a property on an undefined value.

Copied!
type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};


// ⛔️ ERROR: Cannot read properties of undefined (reading 'first')
console.log(person.name.first); // 👉️ undefined

We didn't use the optional chaining (?.) operator to short-circuit in case the name property was not set, so an error occurred.

# Optional chaining (?.) vs logical AND (&&) operator

You might have used the logical AND (&&) operator to get around this in the past.

Copied!
type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.name && person.name.first); // 👉️ undefined

We used the logical AND (&&) operator to check if accessing the name property on the person object returns a truthy value.

If it does, we try to access the first property on the name object.

# Using optional chaining to access array indexes

The optional chaining operator can also be used to access an array element at a specific index or short-circuit if the reference is null or undefined.

Copied!
type Person = {
  numbers?: {
    low?: number[];
  };
};

const person: Person = {};

console.log(person.numbers?.low?.[0]); // 👉️ undefined

The low property could be undefined, so trying to access the array element at index 0 on an undefined value would throw an error unless we use the optional chaining (?.) operator to short-circuit if the reference is undefined.

If the property is populated on the object, the optional chaining operator (?.) returns the specified value in the array.

Copied!
type Person = {
  numbers?: {
    low?: number[];
  };
};

const person: Person = {
  numbers: {
    low: [1, 2, 3],
  },
};

console.log(person.numbers?.low?.[0]); // 👉️ 1

# Using the optional chaining operator with function parameters

The optional chaining (?.) operator can also be used to call a function if its value is not equal to null or undefined.

Copied!
function logger(callback?: (msg: string) => void) {
  callback?.('hello');
}

logger(console.log); // 👉️ "hello"

Trying to call the callback parameter would cause an error if it isn't provided, so we used the optional chaining (?.) operator to check if the reference is not null or undefined before calling the function.

If the parameter is not provided, the operator would just short-circuit returning undefined instead of calling the function.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Check the Type of a Variable in TypeScript
• How to correctly check for Null in TypeScript
• Check if a Property exists in an Object in TypeScript
• Remove Null and Undefined from a Type in TypeScript