I am trying to use Logical AND && and Nullish coalescing operator ?? operators for the conditional rendering of variables/values.
But for some reason, I am unclear about the usage of both of these operators and how they work.
Please explain the difference between both of these and when should we use any of those instead of if statement.
/* -------------------- ?? operator -------------------- */
const foo = null ?? '?? default string';
console.log(foo);
const baz = 0 ?? 10;
console.log(baz);
/* -------------------- && operator -------------------- */
const foo_1 = null && '&& default string';
console.log(foo_1);
const baz_1 = 0 && 20;
console.log(baz_1);&& - means AND.
?? - operator that simply returns the right-side expression when the left side expression is either null or undefined.
For example
if(someValue && otherValue) {
//if someValue is true AND otherValue is true
}
?? is also known as the nullish coalescing operator. It's an operator that simply returns the right-side expression when the left side expression is either null or undefined.
let foo = someValue ?? "default value";
// when someValue is null assing default (right hand) value to variable foo.
To see the difference and to determine when to use one operator or another, you can make a table like this:
| || | && | ?? |
--------------------+---------+---------+---------+
0, 'default' |'default'| 0 | 0 |
'', 'default' |'default'| '' | '' |
false, 'default' |'default'| false | false |
true, 'default' | true |'default'| true |
20, 'default' | 20 |'default'| 20 |
null, 'default' |'default'| null |'default'|
undefined, 'default' |'default'|undefined|'default'|
The Nullish Coalescing Operator ?? distinguishes between nullish values (null, undefined) where as the OR operator || or the AND operator && checks for falsy values which includes contain "" 0 false null undefined
var x = '';
console.log(x ?? "default"); // ''
console.log(true && x); // ''
var y; // undefined
console.log(y ?? "default"); // 'default'
console.log(true && y); // undefined