JavaScript: Conditionals

contain

What are Conditionals?

Conditionals let your code make decisions:

  • If the user is logged in, show their profile
  • If the form is invalid, show an error
  • If the score is high enough, show "You Win!"

if Statements

Basic if

The condition must be in parentheses. The code block runs only when the condition is true.

if (condition) {
  // code runs if condition is true
}

Example:

let age = 20;

if (age >= 18) {
  console.log("You are an adult");
}

if...else

Use else when you have exactly two paths.

let age = 15;

if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a minor");
}

if...else if...else

Conditions are checked in order. The first true condition runs and the rest are skipped.

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else if (score >= 60) {
  console.log("D");
} else {
  console.log("F");
}

Comparison Operators

Comparison Operators

Always use === (strict equality) to avoid unexpected type conversions.

Operator Meaning
=== Equal (strict)
!== Not equal (strict)
> Greater than
< Less than
>= Greater than or equal
<= Less than or equal

Strict vs Loose Equality

// Loose equality (==) - converts types
5 == "5"     // true (string converted to number)
0 == false   // true
null == undefined  // true

// Strict equality (===) - no conversion
5 === "5"    // false (different types)
0 === false  // false
null === undefined  // false

Always use === and !==

Logical Operators

AND (&&)

Both conditions must be true. Useful for checking multiple requirements at once.

let age = 25;
let hasID = true;

if (age >= 21 && hasID) {
  console.log("Can enter the bar");
}

// true && true = true
// true && false = false
// false && true = false
// false && false = false

OR (||)

At least one condition must be true. Useful when any of several conditions will work.

let isStudent = false;
let isSenior = true;

if (isStudent || isSenior) {
  console.log("Eligible for discount");
}

// true || true = true
// true || false = true
// false || true = true
// false || false = false

NOT (!)

Reverses a condition. Read !isLoggedIn as "not logged in."

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in");
}

// !true = false
// !false = true

Combining Operators

Use parentheses to group conditions for clarity.

let age = 25;
let hasLicense = true;
let hasInsurance = true;

if (age >= 18 && hasLicense && hasInsurance) {
  console.log("Can rent a car");
}

// Use parentheses for clarity
if ((age >= 18 && age <= 65) || isExempt) {
  console.log("Eligible");
}

Truthy and Falsy

Falsy Values

These six values are falsy. Everything else (including the string "false") is truthy.

false
0
"" (empty string)
null
undefined
NaN

Using Truthy/Falsy

let name = "";

if (name) {
  console.log(`Hello, ${name}`);
} else {
  console.log("No name provided");
}

// Shortcut for checking if value exists
let username = inputValue || "Guest";

Other Conditional Patterns

Ternary Operator

Shorthand for simple if/else. Use only for brief assignments, not complex logic.

// condition ? valueIfTrue : valueIfFalse

let age = 20;
let status = age >= 18 ? "adult" : "minor";

// Same as:
let status;
if (age >= 18) {
  status = "adult";
} else {
  status = "minor";
}

switch Statement

Use switch when comparing one value against multiple specific cases. Don't forget break.

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of work week");
    break;
  case "Friday":
    console.log("TGIF!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend!");
    break;
  default:
    console.log("Regular day");
}

Practical Examples

Form Validation

This checks that email exists and password meets minimum length before allowing submission.

function validateForm() {
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;

  if (!email) {
    alert("Email is required");
    return false;
  }

  if (password.length < 8) {
    alert("Password must be at least 8 characters");
    return false;
  }

  return true;
}

Toggle Visibility

classList.toggle() is cleaner because it handles both adding and removing in one call.

function toggleMenu() {
  let menu = document.querySelector('.menu');

  if (menu.classList.contains('hidden')) {
    menu.classList.remove('hidden');
  } else {
    menu.classList.add('hidden');
  }

  // Or simply:
  menu.classList.toggle('hidden');
}

Check User Input

This gives real-time visual feedback as the user types.

let input = document.querySelector('input');

input.addEventListener('input', function() {
  let value = input.value;

  if (value.length === 0) {
    input.style.borderColor = 'gray';
  } else if (value.length < 3) {
    input.style.borderColor = 'red';
  } else {
    input.style.borderColor = 'green';
  }
});

Practice

Write a function that:

  1. Takes a number as input
  2. Returns "positive", "negative", or "zero"
function checkNumber(num) {
  // Your code here
}

// Test it
console.log(checkNumber(5));   // "positive"
console.log(checkNumber(-3));  // "negative"
console.log(checkNumber(0));   // "zero"

References