Welcome to the 59th Easy JavaScript tutorial! Doing another JS video while I work on completing my Raspberry Pi projects. 

Today's tutorial briefly goes over the Nullish Coalescing Operator in JavaScript. So what is the Nullish Coalescing operator? If you're familiar with the logical AND (&&) and the logical OR (||) operators, this will be easy. 

Nullish Coalescing Operator was introduced in ECMAScript 2020 so it's still pretty new and may not work on all browsers. If it doesn't work for you, check your browser compatibility as well as get more info on NCO here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_Coalescing_Operator

You use the Nullish Coalescing Operator (will just call it NCO from now on) with two question marks: ??

Just like the && and || operator, there are two operands on either side. 

In the && operator, if the left hand operand is a "truthy" value, then the right hand operand will be shown. Sa what is Truthy? 

Truthy is anything that's not a falsy value. So what is a Falsy value? Falsy values are one of 8 things. You can find more info at the following link on MDN but here's a summary below (https://developer.mozilla.org/en-US/docs/Glossary/Falsy):

Value	Description
false	The keyword false
0/-0	The number zero or negative zero
0n	BigInt used as a boolean
""	Empty String
null	Absence of value
undefined	When value is not defined anywhere
NaN	Not A Number

The above 8 values are the falsy values. Everything else is Truthy. Now that we have those defintions cleared up, let's move on. 

The &&, ||, and ?? operators rely on falsy and truthy values. 

For the && operator, if the left-hand operator is truthy, then then the right hand operand is passed:

true && "me"

In the above example, me would be displayed because true is a truthy value. If you replace true" with an object, 1, array, a string, an integer, or a date (amongh other truthy values), then me will not be passed. 

For the || operator, if the left-hand value is a falsy value, then the right hand operand is passed:

false || "me"

If you replace false with any of the above falsy values, then me will be displayed. Replace it with anything else, then the left-hand operand will be shown. 

So what is NCO ?? ?

?? is very similar to || except it only passes the right-hand operand IF the left-hand is a nullish value. And the two nullish values are null and undefined. Everything else for NCO is treated as a Truthy value. So using the same example above:

false ?? "me"

What will be shown? If you guessed "false" then you are correct! Because it is not null or undefined, false will be shown. 

Why is this useful? 

Sometimes, values like 0, false, and even empty strings are actually valid values. In your code, you can use an if statement like below to pass a value of 0:

if(val == 0){
    el = 0;
} else {
    el = "nothing";
}

Or you can write this:

el = 0 ?? "nothing";

Same logic but far fewer lines and easier to read. There isn't a lot of places where you may need to use NCO but it's there if you ever need it. 

If you need to chain ?? with && or ||, you need to put parenthesis around the other two as follows:

el = (true && null) ?? "nothing";

In the above example, "nothing" will be assigned to el because true && null will return null, and null && "nothing" will return "nothing". 

Be sure to watch the video below for a few more examples and to listen to me babble for a few minutes. If you have any questions, be sure to ask!

Patreon

I do these projects to learn and teaching is a good way to learn. But if you do want to support me, head on over to Patreon and become a Patron: https://www.patreon.com/nazmus

If you've implemented this project, I'd like to see it! So please share it with me through any of my regular channels. 

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!