Logical operators in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of combined logical operators

What is the output of the following JavaScript code?

Javascript

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

A true

B false

C undefined

D TypeError

💡 Hint

Remember that && has higher precedence than || in JavaScript.

The expression evaluates as (a && b) || c. Since a && b is false, the result is false || true, which is true.

❓ Predict Output

intermediate

Logical NOT and OR combination

What will be logged to the console?

Javascript

const x = false;
const y = true;
console.log(!x || y);

A true

B false

C undefined

D SyntaxError

💡 Hint

The ! operator flips the boolean value.

!x is true because x is false, so true || true is true.

❓ Predict Output

advanced

Short-circuit evaluation with logical AND

What is the output of this code snippet?

Javascript

function test() {
  console.log('Function called');
  return true;
}

const result = false && test();
console.log(result);

A true

B false

C Function called\nfalse

D ReferenceError

💡 Hint

Logical AND stops evaluating if the first operand is false.

Since the first operand is false, test() is not called, so only false is logged.

❓ Predict Output

advanced

Logical OR with falsy values

What will be the output of this code?

Javascript

const val = 0 || '' || null || undefined || 'default';
console.log(val);

A 0

B null

C default

D undefined

💡 Hint

Logical OR returns the first truthy value.

All values before 'default' are falsy, so 'default' is returned.

🧠 Conceptual

expert

Understanding logical operator precedence and output

Consider the code below. What is the value of variable result after execution?

Javascript

const result = false || true && false || true;

A TypeError

B false

C undefined

D true

💡 Hint

Remember that && has higher precedence than ||, so evaluate that part first.

true && false is false, so expression becomes false || false || true, which evaluates to true.

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