Short-Circuiting and Logical Operators in JavaScript: &&, ||, ??

Short-circuiting is a concept in logical operations in many programming languages, including JavaScript where the evaluation stops as soon as the outcome is determined. such as the “AND operator” and “OR operator”. This feature only looks at the first value to decide what to return without even looking at the second value.
It is particularly useful for optimizing code and preventing unnecessary computations.

The && operator: if the first value is true, it immediately returns “the second value”, and if the first value is falsy it will immediately return “the falsy value”.

// falsy values: 0, '', undefined, null
console.log(true && 'Something'); // Something
console.log(false && 'Something'); // false
console.log(0 && 'Something'); // 0
11

The || operator: if the first value is true, it immediately returns “true”, and if the first value is falsy it will immediately return “the second value”.

// falsy values: 0, '', undefined, null
console.log(true || 'Something'); // true
console.log(false || 'Something'); // Something
console.log(0 || 'Something'); // Something

But there can be a problem with the returned value since if the first value is 0 but it’s not actually false, it’s just falsy! Then we would need to get the actual value of 0, not the second value.
Another example:

const count1 = undefined;
const count2 = 0;
console.log(count1 || 'No data'); // No data
console.log(count2 || 'No data'); // No data

Here, the second console log should show 0 as the total number, not undefined. To fix this, we should give the condition some flexibility with falsy values other than null and undefined. That’s where we use the Nullish coalescing operator. This operator returns the falsy value if it’s anything other than undefined or null. So, for the values of 0 and empty strings, it will return the actual value of them.

const count1 = undefined;
const count2 = 0;
const count3 = 5;
console.log(count1 ?? 'No data'); // No data
console.log(count2 ?? 'No data'); // 0

Optional chaining operator: this can be very useful when dealing with objects that may have missing properties or when you want to safely access deeply nested properties without running into null or undefined errors.

const data = {
 value1: undefined, // or it could be { nested: undefined }
 value2: { nested: 3 },
 value3: { nested: 5 }
};
function getMultiplicationResult(obj1, obj2) {
 const val1 = obj1?.nested ?? 0;
 const val2 = obj2?.nested ?? 0;
 return val1 * val2;
}
const result = getMultiplicationResult(data.value1, data.value2); // 0 * 3 = 0
const result = getMultiplicationResult(data.value2, data.value3); // 3 * 5 = 15

Here, we used ? (Optional Chaining) to safely access the nested property of the objects obj1 and obj2.
And used ?? (Nullish Coalescing) to provide a default value of 0 if nested is null or undefined.
So, if data.value1 is undefined or if data.value1.nested is undefined, val1 will be set to 0.