optional chaining operator

The optional chaining operator (?.) is a useful tool in JavaScript that lets you safely access object properties or call methods without worrying whether they exist. It’s like a safety net for working with objects that might have missing parts.

const person = {
  name: "Alice",
  age: 30
};
 
console.log(person.name); // "Alice"
console.log(person.job); // undefined

In this example, person.name exists, so it logs Alice. But person.job doesn’t exist, so it gives us undefined.

Now, let’s say we want to access a property of an object that might not exist:

const person = {
  name: "Alice",
  age: 30
};
 
console.log(person.address.street); // This will throw an error!

This example will throw an Uncaught TypeError. Since person.address is undefined, we are not able to access the street property. This is where the optional chaining operator comes in handy. Here is an example of using the optional chaining operator

const user = {
  name: "John",
  profile: {
    email: "john@example.com",
    address: {
      street: "123 Main St",
      city: "Somewhere"
    }
  }
};
 
console.log(user.profile?.address?.street); // "123 Main St"
console.log(user.profile?.phone?.number);   // undefined

By using the optional chaining operator, we are telling JavaScript to only continue with the operation if the object (or the value before the ?.) exists and is not null or undefined.

If the value before the ?. is null or undefined, JavaScript returns undefined rather than attempting to proceed with the operation and throwing an error.

Remember, the optional chaining operator is most useful when you’re not sure if a property or method exists. It helps prevent errors and makes your code more robust.