JavaScript Boolean Logic and Selection

Understanding JavaScript Boolean Logic and Conditional Selection

In this module we explore the core concepts behind Boolean expressions, logical operators, and the if statement in JavaScript. Mastery of these topics is essential for writing reliable, bug‑free code and for performing well in programming quizzes and interviews.

1. Boolean Operators: && and ||

JavaScript uses two primary logical operators to combine Boolean expressions:

• Logical AND (&&) – Returns true only if both operands are true.
• Logical OR (||) – Returns true if at least one operand is true.

Consider the following quiz question:

Given num = 8, which expression correctly checks if num is divisible by both 2 and 3?

The correct answer is:

(num % 2 == 0) && (num % 3 == 0)

Explanation:

• num % 2 == 0 evaluates to true because 8 is divisible by 2.
• num % 3 == 0 evaluates to false because 8 is not divisible by 3.
• The && operator requires both sides to be true, so the whole expression is false for num = 8.

Using || would incorrectly return true if only one condition were met, and omitting parentheses can lead to ambiguous or unintended results.

2. Variable Scope and Implicit Globals

JavaScript variables declared with let or const are block‑scoped. If you assign a value to an identifier that has not been declared, the engine creates an implicit global (in non‑strict mode) or throws a ReferenceError (in strict mode). This is a common source of bugs.

Quiz example:

What will be logged when the following code runs?

let mark = 90;
if ( mark >= 80 ) {
  grade = 'A';
}
console.log( 'Your grade is ' + grade );

The correct answer is "Your grade is A". Because the condition is true, the assignment grade = 'A' creates a global variable grade. The subsequent console.log can access it.

Contrast this with the next snippet:

let mark = 79;
if ( mark >= 80 ) {
  grade = 'A';
  console.log("congratulations");
}
console.log( 'Your grade is ' + grade );

Here the condition is false, so the block never executes. The line grade = 'A' is never run, leaving grade undeclared. When the final console.log tries to read grade, a ReferenceError is thrown. This illustrates why you should always declare variables explicitly with let, const, or var.

3. The Dangerous Semicolon After if

A stray semicolon after an if condition terminates the conditional statement early, making the following block execute unconditionally. This subtle syntax error can produce logic that appears to work but behaves incorrectly.

Quiz question:

if ( mark >= 80 ); {
  grade = 'A';
}
console.log( 'Your grade is ' + grade );

The correct answer identifies the error: The stray semicolon ends the if statement, making the block unconditional. As a result, grade = 'A' runs regardless of the condition, which may mask a failing test case.

Best practice: never place a semicolon directly after the condition parentheses. If you need an empty statement, write it on a separate line with a comment to make the intent clear.

4. Nested if Statements and the “Dangling Else” Problem

When you nest if statements without braces, JavaScript applies the dangling else rule: the else is associated with the nearest preceding if that lacks its own else. This can lead to unexpected output.

Consider this code:

let i = 1;
let j = 2;
let k = 3;
if (i > j)
  if (i > k)
    console.log("A");
  else
    console.log("B");

Because i > j is false, the outer if block is skipped entirely, and the inner if (and its else) are never evaluated. Consequently, no output is produced.

To force the else to belong to the outer if, you must use braces:

if (i > j) {
  if (i > k) {
    console.log("A");
  } else {
    console.log("B");
  }
}

Now the else is clearly tied to the inner condition, and the code behaves as intended.

5. Practical Example: Multi‑Level Conditional Logic

Let’s analyze a more realistic scenario involving three variables x, y, and z:

if (x > 2) {
  if (y > 2) {
    z = x + y;
    console.log("z is " + z);
  }
} else {
  console.log("x is " + x);
}

When x = 2 and y = 2, the outer condition x > 2 is false, so the else branch runs, printing "x is 2". The inner block never executes because its parent condition failed.

If we change the values to x = 3 and y = 3, the outer condition becomes true, the inner condition also true, and the code prints "z is 6" (since z = 3 + 3).

These examples demonstrate how the flow of execution depends on the hierarchy of conditions and why proper use of braces is crucial for readability and correctness.

6. Common Pitfalls and How to Avoid Them

• Missing variable declarations: Always declare variables with let or const. Implicit globals can cause hard‑to‑track bugs.
• Stray semicolons after if: A trailing semicolon turns the conditional into a no‑op. Use a linter or enable eslint rules like no-extra-semi to catch them.
• Ambiguous else binding: Use braces even for single‑line blocks. This eliminates the dangling‑else confusion.
• Incorrect logical operators: Remember that && requires all conditions to be true, while || needs only one. Choose the operator that matches the intended logic.
• Operator precedence: Parentheses clarify evaluation order. For complex expressions, always wrap each comparison in its own parentheses.

7. Quick Reference Cheat Sheet

• condition && condition – Both must be true.
• condition || condition – At least one must be true.
• if (expr) statement – Executes statement when expr is truthy.
• if (expr) { … } else { … } – Provides an alternative path.
• Never place a semicolon directly after the if parentheses.
• Always use braces { } for nested if statements.
• Declare variables with let or const before using them.

8. Practice Exercises

Try rewriting the following snippets to fix the errors described:

1. ```js let score = 75; if (score >= 90) { grade = 'A'; } console.log('Grade:', grade); ```
   Identify the problem and correct it.
2. ```js let a = 5; if (a > 3); { console.log('Inside block'); } ```
   Explain why the console always logs and remove the bug.
3. ```js let x = 1, y = 2; if (x > y) if (x > 0) console.log('Positive'); else console.log('Negative'); ```
   Modify the code so that the else belongs to the outer if.

After completing these exercises, you will have reinforced the concepts covered in this module.

9. SEO‑Friendly Summary

Understanding JavaScript Boolean logic, proper if syntax, and variable scope is vital for developers aiming to write clean, maintainable code. By mastering the use of &&, ||, avoiding stray semicolons, and always declaring variables, you reduce runtime errors such as ReferenceError and improve code readability. These skills are frequently tested in quizzes, technical interviews, and real‑world projects.

For further reading, explore topics like truthy and falsy values, short‑circuit evaluation, and strict mode to deepen your JavaScript expertise.