JavaScript Logical Operators

Logical operators in JavaScript are used to combine or modify boolean values to make decisions. They help control program flow by evaluating whether one or more conditions are true or false.

• They are widely used in if statements, loops, and conditions.
• Logical operators make it easier to handle multiple conditions at once.

In JavaScript, there are basically three types of logical operators.

1. Logical AND (&&) Operator

The logical AND (&&) operator checks whether both operands are true. If both are true, the result is true. If any one or both operands are false, the result is false.

// Check if both conditions are true
let age = 20;
let idProof = true;

// Logical AND checks both conditions
if (age >= 18 && idProof) {
  console.log("Allowed"); 
} else {
  console.log("Not Allowed");  
}

It works with numbers as well, treating 0 as false and any non-zero value as true. It treats false, 0, -0, "", null, undefined, NaN and document.all as false.

In JavaScript, the && operator doesn't return true or false unless explicitly working with boolean values. Instead, it returns the actual value of the last operand evaluated:

1. If the first operand (x) is falsy (like 0, null, undefined, false), it stops and returns that value.
2. If the first operand is truthy, it evaluates the second operand and returns its value.

// Logical AND with integers
let x = 5;
let y = 0;

// 5 (true) && 0 (false)
let res = x && y; 
console.log(res); 

// 5 (true) && 10 (true)
res = x && 10;
console.log(res); 

2. Logical OR (||) Operator

The logical OR (||) operator checks whether at least one of the operands is true. If either operand is true, the result is true. If both operands are false, the result is false.

// Check if at least one condition is true
let age = 16;
let hasGuardian = true;

// Logical OR checks if either condition is true
if (age >= 18 || hasGuardian) {
  console.log("Allowed");
} else {
  console.log("Not Allowed");
}

Rules for ||:

1. If the first operand is truthy, it stops and returns that value.
2. If the first operand is falsy, it evaluates the second operand and returns its value.

Truthy and Falsy Values in JavaScript

1. Falsy values: false, 0, null, undefined, NaN, and "" (empty string).
2. Truthy values: Anything not falsy.

// Logical OR (||) Operator
let i = 1;
let j = null;
let k = undefined;
let l = 0;

console.log(j || k);
console.log(i || l);

console.log(Boolean(j || k));
console.log(Boolean(i || l));

3. Logical NOT (!) Operator

The logical NOT (!) operator inverts the boolean value of its operand. If the operand is true, it returns false. If the operand is false, it returns true.

let isAllowed = true;

console.log(!isAllowed); 

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Log in!");
} else {
  console.log("Welcome back!");
}

Logical NOT Works for Non-Boolean Values

Unlike && and ||, the logical not operator always results in true or false. It consider falsy values (mentioned above with logical or) as false. And all other values as true.

let x = "Hello";
console.log(!x);
console.log(!!x);  

let y = 20;
console.log(!y);
console.log(!!y);  

4. Nullish Coalescing (??) Operator

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is either null or undefined. Otherwise, it returns the left-hand operand.

let username = null;
let defaultName = "Guest";
console.log(username ?? defaultName);

username = "Kartik";
defaultName = "Guest";
console.log(username ?? defaultName);