Skip to main content

Optional Chaining Operator

Objects the Basics: Optional Chaining

Explain what JavaScript's optional chaining operator (?.) does?​

View Answer:
Interview Response: The optional chaining operator is safe to access nested object properties, even if an intermediate property does not exist.

Technical Response: The optional chaining operator (?.) allows you to read the value of property deep inside a chain of related objects without explicitly validating each reference in the chain. If the value preceding (?.) is undefined or null, optional chaining (?.) terminates the evaluation and returns undefined.


Code Example:

let user = {}; // user has no address

alert(user?.address?.street); // undefined (no error)

let user2 = {};
alert(user2.address.street); // returns a type error

What will the optional chaining operator (?.) return if an object does not exist?​

View Answer:
Interview Response: The optional chaining operator returns undefined if the object does not exist (equals null). We will see this outcome when an object gets set to null. If the object is not defined, it results in a reference error.

Code Example:

let user = null;

alert(user?.address); // undefined
alert(user?.address.street); // undefined

alert(myUser?.address.street); // returns a reference error

When should the optional chaining (?.) operator be used?​

View Answer:
Interview Response: We should use the option chaining operator with the intent to handle object properties that are already known to be optional.

Code Example: Short Circuit results in a false response.

let user = null;
let x = 0;

user?.sayHi(x++); // no "sayHi", so the execution doesn't reach x++

alert(x); // 0, value not incremented.
note

If it is not optional, it can result in a false scenario that goes unchecked. This behavior could result in silent coding errors and become more challenging to debug.

Is optional chaining (?.) merely an operator or a syntax construct?​

View Answer:
Interview Response: Technically, it is a syntax construct, but most developers refer to it as an operator.

Technical Response: It is technically a syntactic construct. However, it generally gets referred to as an operator. It is more than simply an operator, though, and may get used with functions (?.()) and square brackets (?.[]). For instance, ?.() is used to invoke a function that may or may not exist. If we want to utilize brackets [] instead of dot to access properties, we may use the?.[] syntax (.).


Code Example: Function Call

let userAdmin = {
  admin() {
    alert('I am admin');
  },
};

let userGuest = {};

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // nothing (no such method)

Code Example: Bracket Property Check

let key = 'firstName';

let user1 = {
  firstName: 'John',
};

let user2 = null;

alert(user1?.[key]); // John
alert(user2?.[key]); // undefined

Can the optional chaining (syntax construct) operator be used to store or write values?​

View Answer:
Interview Response: You can use the optional chaining operator (?.) for safe reading and deleting, but not writing. The optional chaining operator (?.) has no use on the left side of an assignment.

Code Example:

let user = null;

user?.name = "John"; // Error, does not work
// because it evaluates to undefined = "John"