Logical operators in Javascript - Step-by-Step Execution

Concept Flow - Logical operators

Start

↓

Evaluate Left Operand

↓

Check Operator

↓

AND

↓

Evaluate Right Operand if needed

↓

Calculate Result

↓

Return Result

↓

End

Logical operators check true/false values and combine them to produce a final true or false result.

Execution Sample

Javascript

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

This code checks if both a and b are true using AND operator and prints the result.

Execution Table

Step	Expression	Left Operand	Operator	Right Operand	Evaluation	Result
1	a && b	true	&&	false	true AND false	false
2	console.log(result)	-	-	-	-	false printed

💡 Finished evaluating logical AND; result is false because one operand is false.

Variable Tracker

Variable	Start	After Step 1	After Step 2
a	undefined	true	true
b	undefined	false	false
result	undefined	false	false

Key Moments - 3 Insights

Why does the result become false when using && if one operand is false?

Because the AND operator (&&) only returns true if both operands are true. The execution_table row 1 shows 'true AND false' evaluates to false.

Does the OR operator (||) evaluate the right operand if the left is true?

No, OR (||) stops and returns true immediately if the left operand is true. This is called short-circuiting.

What does the NOT operator (!) do to a true value?

The NOT operator (!) flips true to false and false to true. It only needs one operand and returns the opposite boolean.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of 'a && b' at step 1?

A undefined

B true

C false

D error

💡 Hint

Check the 'Result' column in execution_table row 1.

At which step is the value of 'result' assigned?

A Step 2

B Step 1

C Before Step 1

D Never assigned

💡 Hint

Look at variable_tracker for 'result' changes after Step 1.

If 'a' was false and 'b' was true, what would 'a || b' evaluate to?

A true

B false

C undefined

D error

💡 Hint

OR operator returns true if either operand is true.

Concept Snapshot

Logical operators combine true/false values.
AND (&&) returns true only if both are true.
OR (||) returns true if at least one is true.
NOT (!) flips true to false and vice versa.
They help make decisions in code.

Full Transcript

Logical operators in JavaScript let us combine true or false values to make decisions. The AND operator (&&) checks if both values are true; if one is false, the result is false. The OR operator (||) checks if at least one value is true; if so, it returns true immediately. The NOT operator (!) flips a true value to false and a false value to true. In the example, a is true and b is false. Using AND (a && b) results in false because both are not true. This is shown in the execution table where the expression 'a && b' evaluates to false. Variables a, b, and result change as the code runs, tracked in the variable tracker. Understanding these operators helps control the flow of programs by making decisions based on 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