Javascript Optional Chaining

Javascript optional chaining

Created By: chatGPT

Optional chaining is a feature in JavaScript that allows you to safely access deeply nested properties of an object without having to check if each reference in the chain is valid. It returns undefined instead of throwing an error if a reference is null or undefined. This helps in avoiding runtime errors when dealing with objects that may not have certain properties. Let's see how it works.

const user = {
    name: 'John',
    address: {
        street: '123 Main St',
        city: 'Anytown'
    }
};

const city = user.address?.city; // 'Anytown'
const country = user.address?.country; // undefined

You can also use optional chaining with function calls. If the function is not defined, it will return undefined instead of throwing an error.

const user = {
    name: 'Jane',
    getAddress: () => ({
        street: '456 Elm St'
    })
};

const address = user.getAddress?.(); // { street: '456 Elm St' }
const phone = user.getPhone?.(); // undefined

Optional chaining can also be used with arrays. If you try to access an element of an array that might be undefined, you can do it safely.

const users = [{ name: 'Alice' }, { name: 'Bob' }];

const firstUser = users[0]?.name; // 'Alice'
const secondUser = users[1]?.name; // 'Bob'
const thirdUser = users[2]?.name; // undefined

By using optional chaining, you effectively reduce the amount of error checking needed throughout your code. This feature was introduced in ES2020, so make sure your JavaScript environment supports it.

if (user?.address?.street) {
    console.log(user.address.street);
} else {
    console.log('Address not available');
}