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

`&&` is the [logical AND](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) and `??` is the [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) — evolutionxbox, Dec 13 '21 at 12:42

A1exandr Belan · Answer 1 · 2022-09-07T08:51:34.847

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    |

score 5 · Answer 2 · answered Dec 13 '21 at 12:45

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

_“&& - means AND.”_ is quite an incomplete description. See [Logical operators in JavaScript — how do you use them?](/q/4535647/4642212). _“`a && b` evaluates to the first falsy operand”_ is correct. — Sebastian Simon, Dec 13 '21 at 16:03

Ran Turner · Answer 3 · 2021-12-13T12:56:30.250

2

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

edited Dec 13 '21 at 12:56

answered Dec 13 '21 at 12:44

Ran Turner

14,906
5
47
53

OP asked about `&&`, not `||`. – T.J. Crowder Dec 13 '21 at 12:44

score 0 · Answer 4 · answered Dec 13 '21 at 12:45

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

score 0 · Answer 5 · answered Dec 13 '21 at 13:03

?? 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

Difference between && and ?? in JavaScript

5 Answers5