Difference between && and ?? in JavaScript

Question

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);

Answer 1

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

Answer 2

&& - 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.

Answer 3

This first statement from the docs should be self explanatory for the first two statements in your code:

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Regarding, && : The second expression after AND(&&) is only checked if the first expression is truthy, and then the second expression is returned. Otherwise the first expression is returned.

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

const baz_2 = 20 && 30;
console.log(baz_2);

Answer 4

?? returns its right-hand side operand when its left-hand side operand is null or undefined

const emptyString = ""
const nullValue = null

const valA = emptyString ?? "valA"  // ""
const valB = nullValue ?? "valB" // "ValB"

const valC = emptyString && "valC" // ""
const valD = nullValue && "valD" // null

Answer 5

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  |
     null, 'default'    |'default'|   null  |'default'|
undefined, 'default'    |'default'|undefined|'default'|
     true, 'default'    |  true   |'default'|  true   |
       20, 'default'    |   20    |'default'|   20    |