What is Optional Chaining (?.) In javaScript?

Optional chaining is a feature that simplifies accessing nested properties or calling functions on objects that may be nullish or undefined. It allows you to avoid the common "TypeError: Cannot read property 'x' of undefined" error when accessing properties deep within an object hierarchy.

Here's an example to illustrate how optional chaining works:

const user = {
  id: 1,
  name: 'John',
  address: {
    city: 'New York',
    street: '123 Main St'
  }
};

// Accessing nested property without optional chaining
const city = user.address.city; // 'New York'

// Accessing nested property with optional chaining
const city = user.address?.city; // 'New York'

// Accessing non-existent property with optional chaining
const country = user.address?.country; // undefined

In the example above, the address property is optional. With optional chaining (?.), you can safely access the city property of address even if address itself is null or undefined. If address is null or undefined, the expression will simply return undefined.

Optional chaining is especially useful when working with data from APIs or when dealing with complex object structures where certain properties may not always exist.

Note that optional chaining is supported in modern JavaScript environments, including most up-to-date browsers. However, if you're working in an older environment or need to support older browsers, you might need to transpile your code using a tool like Babel to ensure compatibility.