Logical operators in Javascript

Introduction

Logical operators help you make decisions by combining or changing true/false values.

Checking if a user is logged in AND has admin rights before showing a page.

Allowing access if a user is a member OR has a special invite.

Making sure a value is NOT empty before using it.

Combining multiple conditions to control program flow.

Stopping checks early if one condition is false to save time.

Syntax

Javascript

condition1 && condition2  // AND
condition1 || condition2  // OR
!condition               // NOT

AND (&&) returns true only if both conditions are true.

OR (||) returns true if at least one condition is true.

NOT (!) flips true to false and false to true.

Examples

AND returns false because one condition is false.

Javascript

const a = true && false;  // false

OR returns true because one condition is true.

Javascript

const b = true || false;  // true

NOT flips true to false.

Javascript

const c = !true;           // false

OR inside NOT: OR is true, NOT flips it to false.

Javascript

const d = !(false || true); // false

Sample Program

This program checks if a user is logged in and if they are an admin. It shows different messages based on these conditions.

Javascript

const isLoggedIn = true;
const isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log('Show admin panel');
} else if (isLoggedIn && !isAdmin) {
  console.log('Show user dashboard');
} else {
  console.log('Please log in');
}

Important Notes

Logical operators work with values that are true or false, but JavaScript also treats other values as true or false (called truthy and falsy).

Use parentheses to group conditions clearly and avoid confusion.

Short-circuiting: AND stops checking if the first is false; OR stops if the first is true.

Summary

Logical operators combine or change true/false values to help make decisions.

AND (&&) needs both true, OR (||) needs one true, NOT (!) flips true/false.

They are useful for controlling what your program does based on multiple conditions.

Practice

1. Which logical operator in JavaScript returns true only if both conditions are true?

easy

A. ! (NOT)

B. || (OR)

C. && (AND)

D. ? (Ternary)

Solution

1. Step 1: Understand AND operator behavior

   The AND operator (&&) returns true only when both conditions it connects are true.

2. Step 2: Compare with other operators

   The OR operator (||) returns true if at least one condition is true, NOT (!) flips true/false, and ? is a ternary operator, not a logical operator.

3. Final Answer:

   && (AND) -> Option C

4. Quick Check:

   AND = && [OK]

Hint: AND needs both true, so look for && [OK]

Common Mistakes:

• Confusing OR (||) with AND (&&)
• Thinking NOT (!) combines conditions
• Mixing ternary operator with logical operators

2. Which of the following is the correct syntax to negate a boolean variable isActive in JavaScript?

easy

A. not isActive

B. !isActive

C. isActive!

D. isActive.not()

Solution

1. Step 1: Recall NOT operator syntax

   In JavaScript, the NOT operator is a single exclamation mark (!) placed before the variable to flip its boolean value.

2. Step 2: Check each option

   !isActive is the correct syntax. Options A, C, and D are invalid syntax in JavaScript.

3. Final Answer:

   !isActive -> Option B

4. Quick Check:

   NOT = ! before variable [OK]

Hint: Use ! before variable to negate boolean [OK]

Common Mistakes:

• Writing not instead of !
• Placing ! after variable
• Using method calls like .not()

3. What is the output of this code?

const a = true;
const b = false;
console.log(a || b && !b);

medium

A. true

B. undefined

C. false

D. SyntaxError

Solution

1. Step 1: Evaluate NOT operator first

   !b means !false which is true.

2. Step 2: Evaluate AND operator next

   b && !b is false && true which is false.

3. Step 3: Evaluate OR operator last

   a || (result of AND) is true || false which is true.

4. Final Answer:

   true -> Option A

5. Quick Check:

   Operator precedence: ! > && > || = true [OK]

Hint: Remember ! before && before || precedence [OK]

Common Mistakes:

• Ignoring operator precedence
• Evaluating OR before AND
• Misunderstanding ! operator

4. Find the error in this code snippet:

let x = true;
if (x && !x) {
  console.log('Yes');
} else {
  console.log('No');
}

medium

A. The condition x && !x is always false

B. Missing semicolon after if statement

C. Cannot use ! operator on boolean

D. Console.log syntax is wrong

Solution

1. Step 1: Analyze the condition x && !x

   x is true, !x is false, so true && false is always false.

2. Step 2: Understand effect on code flow

   Since condition is always false, 'Yes' will never print, only 'No' will print.

3. Final Answer:

   The condition x && !x is always false -> Option A

4. Quick Check:

   Contradictory condition = always false [OK]

Hint: Check if condition can ever be true [OK]

Common Mistakes:

• Thinking !x is invalid on boolean
• Expecting 'Yes' to print
• Confusing syntax errors with logic errors

5. You want to check if a user is logged in and has admin rights before showing admin panel. Which condition correctly uses logical operators?

const loggedIn = true;
const isAdmin = false;
// Choose the correct condition to show admin panel

hard

A. if (loggedIn || isAdmin) { showAdminPanel(); }

B. if (!loggedIn || !isAdmin) { showAdminPanel(); }

C. if (!loggedIn && isAdmin) { showAdminPanel(); }

D. if (loggedIn && isAdmin) { showAdminPanel(); }

Solution

1. Step 1: Understand requirement

   Both loggedIn and isAdmin must be true to show admin panel.

2. Step 2: Check each condition

   The condition with || (OR) is true if at least one is true. The condition with !loggedIn || !isAdmin is true unless both are true. The condition with !loggedIn && isAdmin is true only if not logged in and is admin. The condition with && (AND) requires both true.

3. Final Answer:

   if (loggedIn && isAdmin) { showAdminPanel(); } -> Option D

4. Quick Check:

   Both true needed = use AND (&&) [OK]

Hint: Use && when all conditions must be true [OK]

Common Mistakes:

• Using OR (||) when both conditions are required
• Negating conditions incorrectly
• Confusing logic for access control