Logical operators in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if both conditions are true.

Javascript

if (a > 5 [1] b < 10) {
  console.log('Both conditions are true');
}

Drag options to blanks, or click blank then click option'

A&

B||

C&&

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using || instead of && will check if either condition is true.

Using & is a bitwise operator, not logical.

Using ! negates a condition, not combines two.

The logical AND operator (&&) checks if both conditions are true.

2fill in blank

medium

Complete the code to check if at least one condition is true.

Javascript

if (x === 0 [1] y === 0) {
  console.log('At least one is zero');
}

Drag options to blanks, or click blank then click option'

A&

B||

C!

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using && requires both conditions to be true, not one.

Using & is a bitwise operator, not logical.

Using ! negates a condition, not combines two.

The logical OR operator (||) checks if at least one condition is true.

3fill in blank

hard

Fix the error in the condition to correctly negate the expression.

Javascript

if (! (a === 10 [1] b === 20)) {
  console.log('Condition is false');
}

Drag options to blanks, or click blank then click option'

A||

B!

C&&

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using && inside negation changes the logic incorrectly.

Using & is a bitwise operator, not logical.

Using ! inside the parentheses is redundant.

The negation applies to the OR condition, so || is correct inside the parentheses.

4fill in blank

hard

Fill both blanks to create a condition that checks if number is between 5 and 15 inclusive.

Javascript

if (number [1] 5 [2] number [3] 15) {
  console.log('Number is between 5 and 15');
}

Drag options to blanks, or click blank then click option'

A>=

B<

C&&

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using || instead of && will allow numbers outside the range.

Using > instead of >= excludes 5.

Using <= instead of < includes 15, which may be incorrect.

The condition uses >= 5 AND < 15 to check the range.

5fill in blank

hard

Fill all three blanks to create a condition that logs if a string is empty or null.

Javascript

if (str [1] null [2] str [3] '') {
  console.log('String is empty or null');
}

Drag options to blanks, or click blank then click option'

A===

B||

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using && will require both conditions to be true, which is impossible.

Using == instead of === can cause unexpected type coercion.

Using & is a bitwise operator, not logical.

The condition checks if str is null OR equals empty string using === and ||.

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