Demystifying Nullish Coalescing & Optional Chaining operators in JavaScript

Upgrades are intended to improve existing things, whether in the physical world or the realm of computing. JavaScript, like any other technology, has undergone an upgrade that introduced two operators to enhance its functionality. The two operators have made JavaScript more sophisticated, allowing for greater precision and efficiency. Ultimately, these upgrades have helped to elevate the standard of modern software development and pave the way for even more impressive innovations in the future.

Nullish Coalescing Operator (??)

const testingNullishCoalescing = null
const myValue = testingNullishCoalescing ?? "default value"
console.log(myValue)
// OUTPUT: "default value"

The code snippet above initializes the variable "testingNullishCoalescing" to null, and then uses the Nullish Coalescing operator to determine if the variable is defined or null. Since the value of the variable is null, the right-side value is returned i.e. "default value".

Using the Nullish Coalescing operator provides a concise and effective method of checking if a variable has a null or undefined value. It returns the right-side value only if the left-side value is null or undefined, otherwise, it returns the non-null or non-undefined value. This can simplify code and improve its readability by reducing the need for conditional checks.

Before the introduction of the Nullish Coalescing operator developers often used the 'OR' (||) operator to check the same. However, it does provide the same functionality but has a caveat. The 'OR' operator returns the right-side value for all falsy values null, and undefined but also for false, 0, NaN and an empty string. The Nullish Coalescing operator on the other hand returns the right side only if the first operand is null or undefined.

Optional Chaining (?.) Operator

const employee = {
    id: 101,
    name: "Optional Chaining",
    currentStatus: "fresher",
    department: {
        id: 201042,
        name: "IT",
    }
}

// Without Optional Chaining
const getDepartment = employee.department && employee.department.id
// OUTPUT: 201042

// With Optional Chaining
const getDeptWithOptionalChainig = employee.department?.id
// OUTPUT: 201042

The given code snippet contains an employee object that has nested properties, and the developers require access to its department id. In the absence of optional chaining, developers need to include an additional check condition to ensure the existence of the department property before retrieving its value. However, with the introduction of the Optional Chaining (?.) operator, the need for these checks is eliminated. This operator simplifies the code and ensures that the department id is accessed only if the property exists within the object.

The Optional Chaining (?.) operator allows us to access the property of the object safely without worrying about it being a nullish(i.e., null or undefined). It helps to write a shorter and cleaner code that handles the nullish values without throwing an error. If any of the intermediate properties in the chain are nullish, the result will be undefined.

To summarize, I would say utilizing the built-in features offered by programming languages is a wise choice to produce code that is both concise and efficient, as opposed to composing lengthy and inefficient code. By taking advantage of the existing features, developers can save time and effort while improving the performance of their code.