JavaScript Boolean Logic and Selection

Understanding Boolean Logic and Conditional Selection in JavaScript

In this module we explore the core concepts of Boolean logic, comparison operators, and the if…else statement in JavaScript. Mastering these fundamentals enables you to write clear, bug‑free code for decision‑making, grading systems, salary calculations, and more.

1. Checking Multiple Conditions with Logical Operators

When you need to verify that all conditions are true, use the logical AND operator (&&). If any condition can be true, use the logical OR operator (||).

• Correct expression for divisibility by both 2 and 3: num % 2 == 0 && num % 3 == 0
• Common mistake: using a single ampersand (&) which performs a bitwise operation, not a logical test.
• Another mistake: mixing || with && without parentheses, which changes the intended logic.

Remember: use && for “and”, || for “or”.

2. Variable Scope and Implicit Declaration

JavaScript variables must be declared before they are used. In the snippet below, grade is assigned inside an if block but never declared with let, const, or var. In strict mode this would throw a ReferenceError. In non‑strict mode, the variable becomes a global, and the console logs the expected value.

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

Best practice: always declare your variables explicitly to avoid accidental globals.

3. The Hidden Danger of a Trailing Semicolon

Placing a semicolon directly after the if condition ends the statement early. The following block then runs unconditionally, which is a classic logic error:

if (mark >= 80); { // <-- semicolon terminates the if
  grade = 'A';
}

Because the if has no body, the block after it is always executed, regardless of the condition. This does not cause a syntax error, but it defeats the purpose of the conditional.

4. Nested if Statements for Grading

Nested conditions allow you to refine decisions. Consider a grading system where scores are evaluated in descending order:

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

When score = 85, the first condition (score >= 90) fails, the second succeeds, and the final grade is B. The order matters: placing a broader range before a narrower one can cause overlapping and incorrect results.

5. Combining Conditions Inside Nested Blocks

Nested if statements can be used to test multiple criteria without extra logical operators. The following code prints z is 6 because both x and y satisfy the inner conditions:

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

Since x is greater than 2, the outer if runs, and the inner if also succeeds, resulting in the output z is 6.

6. The Logical NOT Operator (!)

The ! operator converts its operand to a Boolean and then negates it. It does not convert the value to a string or change its numeric sign.

• True statement: !a is true when a is false
• Example: let a = 0; console.log(!a); // true
• Common misconception: thinking !a returns the opposite numeric value. It always returns a Boolean.

7. Ordering Conditions in Range Checks

When writing functions that evaluate numeric ranges, place the highest range first to avoid overlap. In a salaryIncrement function, the condition salary >= 2000 should appear before lower ranges like salary >= 1000 && salary < 2000. This ensures each salary falls into exactly one bucket.

if (salary >= 2000) {
  // highest increment
} else if (salary >= 1000) {
  // medium increment
} else {
  // base increment
}

8. Omitting Braces in Single‑Statement if…else Constructs

JavaScript allows you to omit curly braces when the body consists of a single statement. However, the else always pairs with the nearest preceding if. This can lead to unexpected behavior if you forget the braces:

if (condition)
  doSomething();
else
  doSomethingElse();

Here, doSomethingElse() executes only when condition is false. If you add another statement without braces, the else may attach to the wrong if, causing logic errors.

Best practice: always use braces for clarity, especially in nested or multi‑line blocks.

9. Key Takeaways

• Use && for “and”, || for “or”.
• Declare variables with let, const, or var to avoid accidental globals.
• A stray semicolon after an if condition terminates the conditional, making the following block run every time.
• Order range checks from highest to lowest to prevent overlapping conditions.
• Always use braces for multi‑statement if…else blocks to maintain clear association.
• The logical NOT operator (!) returns a Boolean opposite of the operand’s truthiness.

10. Practice Exercise

Write a function gradeScore(score) that returns the correct letter grade based on the following rules:

• A for scores 90 and above
• B for scores 80‑89
• C for scores 70‑79
• D for scores below 70

Make sure to:

• Declare all variables.
• Use && where appropriate.
• Include braces for each conditional block.

function gradeScore(score) {
  let grade;
  if (score >= 90) {
    grade = 'A';
  } else if (score >= 80) {
    grade = 'B';
  } else if (score >= 70) {
    grade = 'C';
  } else {
    grade = 'D';
  }
  return grade;
}

Test your function with values like 95, 85, 75, and 65 to verify the output.