New Features in ECMAScript 2020

Optional chaining and nullish coalescing

Lesson Script:

Introduction: Welcome to the lesson on Optional chaining and nullish coalescing. In this lesson, we will learn about two new operators in JavaScript that make working with null and undefined values more convenient. These operators are "?." and "??" respectively.

Optional Chaining: Optional chaining is a new feature in JavaScript that allows you to access properties or methods of an object without having to check if the object is null or undefined. This is done using the "?." operator.

For example, consider the following code:

let person = {
    name: "John",
    age: 30,
    address: {
        city: "New York",
        state: "NY"
    }
};

let city = person.address.city;
console.log(city); // Output: "New York"

In the above code, we are accessing the "city" property of the "address" object, which is a nested object inside the "person" object. But what if the "address" property is null or undefined? In that case, the code will throw an error.

To avoid this, we can use the optional chaining operator "?.". It allows us to access the nested property only if the parent object is not null or undefined.

let person = {
    name: "John",
    age: 30,
};

let city = person.address?.city;
console.log(city); // Output: undefined

In the above example, "address" property is not defined, so the output will be undefined, instead of throwing an error.

You can chain multiple "?." operators together to access properties of nested objects.

let person = {
    name: "John",
    age: 30,
    address: {
        city: "New York",
        state: "NY",
        country: {
            name: "United States",
            code: "US"
        }
    }
};

let countryCode = person.address?.country?.code;
console.log(countryCode); // Output: "US"

Nullish Coalescing: The nullish coalescing operator "??" is used to provide a default value for null or undefined values. It returns the left-hand side operand if it is not null or undefined, otherwise, it returns the right-hand side operand.

For example, consider the following code:

let age = 25;
let defaultAge = 18;

let finalAge = age || defaultAge;
console.log(finalAge); // Output: 25

In the above code, the "||" operator is used to provide a default value for the "age" variable. But it has a problem, if the value of "age" is 0 or false, it will also return the default value.

To avoid this, we can use the nullish coalescing operator "??".

let age = 0;
let defaultAge = 18;

let finalAge = age ?? defaultAge;
console.log(finalAge); // Output: 0

In the above example, the "age" variable is 0, so the finalAge will be 0, not 18.

Conclusion: In this lesson, we have learned about two new operators in JavaScript, Optional chaining and nullish coalescing. Optional chaining makes it convenient to access properties and methods of an object without having to check if it is null or undefined, while the nullish coalescing operator allows us to provide a default value for null or undefined values without the problem of falsey values also being considered as null or undefined. These operators can greatly simplify our code and make it more readable by removing the need for null and undefined checks. Practice using these operators in your own code to become more proficient in using them.