JavaScript Boolean Logic and Selection

Understanding JavaScript Boolean Logic and Conditional Statements

In JavaScript, making decisions is central to building interactive applications. This course breaks down the core concepts behind boolean logic, if statements, nested conditions, and switch statements. By the end of the lesson you will be able to read, write, and debug common conditional patterns with confidence.

1. Boolean Operators: && vs & vs ||

JavaScript provides three primary logical operators:

• && (AND) – Returns true only if both operands are truthy.
• || (OR) – Returns true if any operand is truthy.
• & (BITWISE AND) – Performs a bitwise operation on two numbers; it is not a logical operator.

Consider the following quiz question:

let 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)

Using & would compare the binary representation of the remainders, producing an unexpected result. The logical && ensures both conditions are evaluated as booleans.

2. Simple if Statements and Variable Scope

When a condition is true, the block that follows the if keyword runs. If the block declares or assigns a variable, that variable must exist in the surrounding scope.

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

Because grade is assigned inside the if block, it becomes a global variable (or throws a ReferenceError in strict mode). In a typical non‑strict environment the output is:

Your grade is A

Understanding where variables live helps avoid undefined or ReferenceError surprises.

3. The Semicolon Pitfall After if

One of the most common logic errors is placing a stray semicolon right after the condition:

if (mark >= 80); { grade = 'A'; }

The semicolon terminates the if statement, turning the following block into a regular code block that always executes. This is why the answer "The semicolon terminates the if, so the block always executes" is correct.

How to fix it: Remove the stray semicolon.

if (mark >= 80) { grade = 'A'; }

4. Nested if Statements

Nested conditions allow you to test multiple criteria in a hierarchy. For example, assigning a grade based on a numeric score:

let score = 70;
let grade;
if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else if (score >= 70) {
  grade = 'C';
} else {
  grade = 'F';
}

When score = 70, the third else if branch runs, assigning grade = 'C'. This demonstrates how the order of conditions matters.

5. Combining if with else and Understanding the else Clause

Consider this snippet:

let x = 2, y = 2, z = 0;
if (x > 2) {
  if (y > 2) {
    z = x + y;
    console.log('z is ' + z);
  }
} else {
  console.log('x is ' + x);
}

Because x is not greater than 2, the outer else runs, printing x is 2. No inner if is evaluated, and z remains 0.

6. Refactoring Conditional Logic: The Salary Increment Example

When you have multiple if…else branches that share similar outcomes, you can often simplify the code. The original function (not shown) likely contained several checks for salary ranges. The most efficient rewrite is:

function salaryIncrement(salary) {
  let increment = 200; // default increment
  if (salary >= 2000) {
    increment = 500;
  } else if (salary < 1000) {
    increment = 100;
  }
  return salary + increment;
}

This preserves the original logic while reducing redundancy.

7. The switch Statement and Fall‑Through Behavior

A switch evaluates an expression once and compares the result to case labels. If a matching case is found, execution continues until a break or the end of the block. If no break appears, the code “falls through” to subsequent cases.

Example 1:

let x = 3, y = 3;
switch (x + 3) {
  case 6:
    y = 1;
  default:
    y += 1;
}

Here x + 3 equals 6, so the case 6 runs, setting y = 1. Because there is no break, execution falls through to default, adding 1 to y. The final value is 2.

Example 2 – changing the case value to 7:

switch (x + 3) {
  case 7:
    y = 1;
  default:
    y += 1;
}

Now no case matches, so only the default block runs, incrementing y from 3 to 4.

8. Common Mistakes and Debugging Tips

• Mixing logical and bitwise operators: Use && for logical AND; & is for bitwise operations.
• Stray semicolons after if: They terminate the conditional, causing the block to run unconditionally.
• Missing break in switch: Leads to unintended fall‑through; add break unless you deliberately want to cascade.
• Incorrect ordering of if…else branches: Place the most specific conditions first, then broader ones.
• Variable scope confusion: Declare variables with let or const in the appropriate block to avoid accidental globals.

9. Practice Quiz Recap

Review the original quiz questions and why each correct answer is chosen:

• Divisibility check uses && for logical AND.
• Grade logging prints Your grade is A because the condition is true.
• Semicolon after if makes the block always execute.
• Nested if with score = 70 yields grade C.
• Outer else prints x is 2 when x is not greater than 2.
• Simplified salary increment keeps a default increment and adjusts only for specific ranges.
• Switch with matching case 6 results in y = 2 after fall‑through.
• Switch with no matching case (changed to 7) results in y = 4.

10. Final Thoughts

Mastering boolean logic and conditional structures is essential for any JavaScript developer. By recognizing the subtle differences between operators, respecting block scopes, and handling switch fall‑through correctly, you can write clean, bug‑free code. Practice by rewriting the examples above without looking at the solutions, then compare your results.