JavaScript

Logical Operators

There are 4 logical operators in JavaScript:

• || (OR)
• && (AND)
• ! (NOT)
• ?? (Nullish Coalescing)

They can be applied to values of any type with results of any type.

Truthy and Falsy

Every value in JavaScript has an inherent boolean value: truthy or falsy.

Falsy values

• null
• undefined
• Boolean: false
• Number: 0, -0, NaN
• BigInt: 0n
• String: '', "", ``

Everything else is truthy

• Boolean: true
• Any numbers, except for zeros and NaN
• Any bigint, except for zero
• Any strings, except for the empty ones
• Any symbols
• Any objects, including empty array [], empty object{}, and empty function () {}

OR ||

OR: If any operand is truthy, then it's truthy.

Return value: first truthy or last falsy when there's no truthy.

Operator || does the following:

• It evaluates operands from left to right.
• For each operand, the operand is converted into its boolean. If the boolean is true, it stops and returns the original value of the operand.
• If it reaches the end and all were false, it returns the original value of the last operand.

The classic boolean operands

true  || true   // true
true  || false  // true
false || true   // true
false || false  // false

With any data type operands

true || true    // true
true || 5       // true (first truthy)
5 || true       // 5 (first truthy)
"A" || 5        // "A" (first truthy)

true  || false  // true
false || 5      // 5 (first truthy)
5 || false      // 5 (first truthy)
"A" || 0        // "A" (first truthy)

false || false  // false
false || 0      // 0 (last falsy)
0 || false      // false (last falsy)
"" || 0         // 0 (last falsy)
0 || "" || null // null (last falsy)

Example 1: Getting the first truthy value available

Let's think about a personalized greeting alert incorporating the guest's name. Name might be inputted as first name, last name, nickname, or any combination, or none. We just want to display any 1 of them, or address the person as "Pal" if none was inputted.

let firstName;
let lastName;
let nickName = "Kitten";

alert(`Greetings, ${firstName || lastName || nickName || "Pal"}!`);
// "Greetings, Kitten!"
// If none was inputted: "Greetings, Pal!"

Example 2: Short-circuit evaluation

Short-circuit evaluation refers to how || will process the argument until first truthy value is reached, and exit with that as the return value, without ever see the rest of the argument. Then safely we can place, not just a default value, but an action/command to execute in the case no truthy value is found.

var cat = {
    name: 'Kitten',
    age: 3,
    job: 'fishercat'
}
console.log(cat.job || 'unemployed');   // fishercat
cat.job || alert ('unemployed');        // (alert is not triggered)

var cat = {
    name: 'Kitten',
    age: 3,
}
console.log(cat.job || 'unemployed');   // unemployed
cat.job || alert ('unemployed');        // alert: "unemployed"

AND &&

AND: Only if all the operands are truthy, it will be truthy.

Return value: first falsy or last truthy when there's no falsy.

Operator && does the following:

• It evaluates operands from left to right.
• For each operand, the operand is converted into its boolean. If the boolean is false, it stops and returns the original value of the operand.
• If it reaches the end and all were true, it returns the original value of the last operand.

The classic boolean operands

true  && true   // true
true  && false  // false
false && true   // false
false && false  // false

With any data type operands

true && true    // true
true && 5       // 5 (last truthy)
5 && true       // true (last truthy)
"A" && 5        // 5 (last truthy)

true  && false  // false
false && 5      // false (first falsy)
5 && false      // false (first falsy)
"A" && 0        // 0 (first falsy)

false && false  // false
false && 0      // false (first falsy)
0 && false      // 0 (first falsy)
"" && 0         // "" (first falsy)
null && 0 && "" // null (first falsy)

NOT !

Operator NOT accept a single operand, convert it to boolean if not already is, and return the inverse value.

Double NOT !! inverses the boolean value twice, returning the original boolean value of the operand. This is the same with the built-in Boolean() function.

!true;          // false
!null;          // true
!!null;         // false
Boolean(null);  // false

Precedence of NOT, AND, and OR

The order of precedences from highest to lowest:

• NOT !
• AND &&
• OR ||

Don't replace IF with AND or OR

For example, let see following codes

let x=1;

if (x > 0) alert ("X is greater than zero!");
(x > 0) && alert ("X is greater than zero!");

// Both produces alert: "X is greater than zero!"

Even though they are analogues, this can be confusing especially if the code meant to be read by others. Let's leave if for if uses and && for && uses.

?? (Nullish Coalescing)