typescript - Difference between && and ?? in JavaScript - Stack Overflow

admin管理员组

文章数量:1178537

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

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

• javascript
• typescript
• nullish-coalescing

Share Improve this question Follow asked Dec 13, 2021 at 12:39 Ahmad HabibAhmad Habib 2,37433 gold badges1616 silver badges3333 bronze badges 3

• 2 && is the logical AND and ?? is the Nullish coalescing operator – evolutionxbox Commented Dec 13, 2021 at 12:42
• 1 Usually, people compare || and ??, not && and ??. – T.J. Crowder Commented Dec 13, 2021 at 12:42
• 3 What exactly do you not understand? – phuzi Commented Dec 13, 2021 at 12:44

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 22

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    |

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

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

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

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

本文标签： typescriptDifference between ampamp andin JavaScriptStack Overflow