DEV Community

Cover image for Optional chaining (?.)
Suprabha
Suprabha

Posted on • Edited on

15 2

Optional chaining (?.)

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

Content

  1. The Problem
  2. Why Optional chaining
  3. Optional chaining not valid on the left-hand side of an assignment
  4. Relationship with the optional chaining operator (?.)
  5. Other cases: ?.(), ?.[]
  6. Use ?. with delete:
  7. Summary
  8. Reference

The problem

An object can have a very different nested structure of objects.

  • Fetching remote JSON data
  • Using configuration objects
  • Having optional properties

Working with data in JavaScript frequently involves situations where you aren’t sure that something exists. For example, imagine getting a JSON response from a weather API.

{
  "data": {
    "temperature": {
      "current": 68,
      "high": 79,
      "low": 45
    },
    "averageWindSpeed": 8
  }
}
Enter fullscreen mode Exit fullscreen mode

You can go through each level of the object to get the high temperature.

The value of response.data, response.data.temperature are confirmed to be non-null before accessing the value of response.data.temperature.current. This prevents the error that would occur if you simply accessed response.data.temperature.current directly without testing response.data && response.data.temperature

const highTemperature = response.data && response.data.temperature && response.data.temperature.current;
Enter fullscreen mode Exit fullscreen mode

With the optional chaining operator(?.) you don't have to explicitly test and short-circuit based on the state of response.data && response.data.temperature before trying to access response.data.temperature.current.

If response.data && response.data.temperature are null or undefined, the expression automatically short-circuits, returning undefined.

const highTemperature = response.data?.temperature?.current;
Enter fullscreen mode Exit fullscreen mode

By using the ?. operator instead of just ., JavaScript knows to implicitly check to be sure response.data && response.data.temperature are not null or undefined before attempting to access response.data.temperature.current

Optional chaining not valid on the left-hand side of an assignment

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
Enter fullscreen mode Exit fullscreen mode

Relationship with the optional chaining operator (?.)

The nullish coalescing operator treats undefined and null as specific values and so does the optional chaining operator (?.) which is useful to access a property of an object which may be null or undefined.

let foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase());  // "HI"
console.log(foo.someBarProp?.toUpperCase()); // undefined
Enter fullscreen mode Exit fullscreen mode

Other cases: ?.(), ?.[]

The optional chaining ?. is not an operator, but a special syntax construct, that also works with functions and square brackets.

let user1 = {
  admin() {
    alert("I am admin");
  }
}

let user2 = {};

user1.admin?.(); // I am admin
user2.admin?.();
Enter fullscreen mode Exit fullscreen mode

Use ?. with delete

delete user?.name; // delete user.name if user exists
Enter fullscreen mode Exit fullscreen mode

Few Scenario which needs to taken care of:

1. The variable before ?. must be declared

If there’s no variable user at all, then user?.anything triggers an error:

// ReferenceError: user is not defined
user?.address;
Enter fullscreen mode Exit fullscreen mode

There must be let/const/var user. The optional chaining works only for declared variables.

2. Use ?. for safe reading and deleting, but not writing

The optional chaining ?. has no use at the left side of an assignment:

// the idea of the code below is to write user.name, if user exists

user?.name = "John"; // Error, doesn't work
// because it evaluates to undefined = "John"
Enter fullscreen mode Exit fullscreen mode

Summary

The ?. syntax has three forms:

  1. obj?.prop – returns obj.prop if obj exists, otherwise undefined.
  2. obj?.[prop] – returns obj[prop] if obj exists, otherwise undefined.
  3. obj?.method() – calls obj.method() if obj exists, otherwise returns undefined.

Reference:

MDN Optional chaining

optional chaining from Javascript Info

Thanks for reading the article ❤️

I hope you get to learn something new from this article. If you have any question please reach out to me on @suprabhasupi 😋

🌟 Twitter 👩🏻‍💻 Suprabha.me 🌟 Instagram

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay