JavaScript Logical Operators

Logical operators in JavaScript are used to perform logical operations on values and return either true or false. These operators are commonly used in decision-making statements like if or while loops to control the flow of execution based on conditions.

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

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

0
10

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

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

undefined
1
false
true

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

false

let isLoggedIn = false;

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

Log in!

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

false
true
false
true

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

Guest
Kartik

Recommended Links:

• JavaScript Operators Complete reference
• JavaScript Cheat Sheet-A Basic guide to JavaScript.