JavaScript Logical Operators

Combine conditions and control program flow

🧠 What are Logical Operators?

Logical operators are used to combine or modify boolean values (true/false). They help you create complex conditions by combining multiple comparisons.


// Combining conditions
let age = 25;
let hasLicense = true;
let canDrive = age >= 18 && hasLicense;  // true (both conditions are true)
let isMinor = age < 18 || age > 65;      // false (neither condition is true)
                                    

Output:

canDrive = true

isMinor = false

Types of Logical Operators

&&

AND Operator

Returns true if both conditions are true

true && true // true
||

OR Operator

Returns true if at least one condition is true

true || false // true
!

NOT Operator

Reverses the boolean value

!true // false
??

Nullish Coalescing

Returns right side if left is null/undefined

null ?? "default"

🔹 AND Operator (&&)

The AND operator returns true only when both conditions are true:

// AND operator truth table
console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);  // false

// Practical examples
let age = 20;
let hasID = true;
let hasTicket = true;

// Check if person can enter concert
let canEnter = age >= 18 && hasID && hasTicket;
console.log("Can enter concert:", canEnter);  // true

// Login validation
let username = "john123";
let password = "secret456";
let isValidLogin = username.length > 0 && password.length >= 6;
console.log("Valid login:", isValidLogin);  // true

// Short-circuit evaluation
let user = { name: "Alice" };
user && console.log("User exists:", user.name);  // Runs because user exists

Console Output:

true

false

false

false

Can enter concert: true

Valid login: true

User exists: Alice

🔹 OR Operator (||)

The OR operator returns true when at least one condition is true:

// OR operator truth table
console.log(true || true);    // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);  // false

// Practical examples
let isWeekend = false;
let isHoliday = true;
let canSleepIn = isWeekend || isHoliday;
console.log("Can sleep in:", canSleepIn);  // true

// Default values (before nullish coalescing)
let userTheme = "";
let theme = userTheme || "light";  // Use "light" if userTheme is falsy
console.log("Theme:", theme);  // "light"

// Multiple conditions
let weather = "sunny";
let canGoOutside = weather === "sunny" || weather === "cloudy" || weather === "partly cloudy";
console.log("Can go outside:", canGoOutside);  // true

// Emergency contact
let primaryPhone = "";
let secondaryPhone = "555-0123";
let contactNumber = primaryPhone || secondaryPhone || "No contact available";
console.log("Contact:", contactNumber);  // "555-0123"

Console Output:

true

true

true

false

Can sleep in: true

Theme: light

Can go outside: true

Contact: 555-0123

🔹 NOT Operator (!)

The NOT operator reverses a boolean value:

// NOT operator examples
console.log(!true);       // false
console.log(!false);      // true
console.log(!!true);      // true (double negative)

// Practical examples
let isLoggedIn = false;
let showLoginForm = !isLoggedIn;
console.log("Show login form:", showLoginForm);  // true

// Checking for empty values
let username = "";
let isEmpty = !username;
console.log("Username is empty:", isEmpty);  // true

// Toggle functionality
let isVisible = true;
isVisible = !isVisible;  // Toggle the value
console.log("Is visible:", isVisible);  // false

// Checking if array is NOT empty
let items = ["apple", "banana"];
let hasItems = !items.length === 0;  // Wrong way!
let hasItemsCorrect = items.length > 0;  // Correct way
console.log("Has items (wrong):", hasItems);      // false
console.log("Has items (correct):", hasItemsCorrect);  // true

// Better way to check if array is not empty
let isNotEmpty = !(items.length === 0);
console.log("Is not empty:", isNotEmpty);  // true

Console Output:

false

true

true

Show login form: true

Username is empty: true

Is visible: false

Has items (wrong): false

Has items (correct): true

Is not empty: true

🔹 Complex Logical Expressions

Combining multiple logical operators with parentheses for clarity:

// User access control system
let userAge = 22;
let isEmployee = true;
let isManager = false;
let hasPermission = true;

// Complex condition with parentheses for clarity
let canAccessSystem = (userAge >= 18 && isEmployee) || (isManager && hasPermission);
console.log("Can access system:", canAccessSystem);  // true

// E-commerce discount logic
let itemPrice = 100;
let isMember = true;
let isFirstPurchase = false;
let cartTotal = 150;

let getDiscount = (isMember && cartTotal > 100) || (isFirstPurchase && itemPrice > 50);
console.log("Eligible for discount:", getDiscount);  // true

// Form validation
let email = "[email protected]";
let password = "password123";
let agreeToTerms = true;

let isValidForm = email.includes("@") && 
                  password.length >= 8 && 
                  agreeToTerms;
console.log("Form is valid:", isValidForm);  // true

// Game logic
let playerLevel = 15;
let hasKey = true;
let bossDefeated = false;

let canEnterNextArea = (playerLevel >= 10 && hasKey) || bossDefeated;
console.log("Can enter next area:", canEnterNextArea);  // true

Console Output:

Can access system: true

Eligible for discount: true

Form is valid: true

Can enter next area: true

🔹 Short-Circuit Evaluation

Logical operators use short-circuit evaluation for performance:

// AND short-circuit: stops at first false
let result1 = false && console.log("This won't run");
console.log("Result1:", result1);  // false

let result2 = true && console.log("This will run");
console.log("Result2:", result2);  // undefined (console.log returns undefined)

// OR short-circuit: stops at first true
let result3 = true || console.log("This won't run");
console.log("Result3:", result3);  // true

let result4 = false || console.log("This will run");
console.log("Result4:", result4);  // undefined

// Practical use: Safe property access
let user = null;
let userName = user && user.name;  // Won't error, returns null
console.log("User name:", userName);  // null

// Safe function call
let callback = null;
callback && callback();  // Won't error if callback is null

// Default assignment
let config = null;
let theme = config && config.theme || "default";
console.log("Theme:", theme);  // "default"

Console Output:

Result1: false

This will run

Result2: undefined

Result3: true

This will run

Result4: undefined

User name: null

Theme: default

🧠 Test Your Knowledge

What is the result of: true && false || true?