Conditionals

Conditionals allow your code to make decisions and execute different code based on different conditions. They’re fundamental to creating programs that respond to user input, validate data, and control program flow.

What are Conditionals?

Conditionals check whether a condition is true or false, then execute code accordingly:

const age = 18;

if (age >= 18) {
  console.log('You can vote!');
}
// Output: You can vote!

Think of conditionals like choosing a path:

IF it’s raining, take an umbrella
ELSE enjoy the sunshine

The if Statement

The most basic conditional:

const temperature = 30;

if (temperature > 25) {
  console.log('It\'s hot outside!');
}

Syntax:

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

The condition must evaluate to true or false.

Common Conditions

const score = 85;

if (score >= 90) {
  console.log('Grade: A');
}

const isLoggedIn = true;

if (isLoggedIn) {
  console.log('Welcome back!');
}

const username = 'alice';

if (username === 'alice') {
  console.log('Hi Alice!');
}

if-else Statement

Execute one block if true, another if false:

const age = 16;

if (age >= 18) {
  console.log('You can vote');
} else {
  console.log('Too young to vote');
}
// Output: Too young to vote

Syntax:

if (condition) {
  // Runs if condition is true
} else {
  // Runs if condition is false
}

Real-World Example: User Access

const isSubscribed = false;

if (isSubscribed) {
  console.log('Access granted to premium content');
} else {
  console.log('Please subscribe to access premium content');
}
// Output: Please subscribe to access premium content

else if Statement

Check multiple conditions in sequence:

const score = 75;

if (score >= 90) {
  console.log('Grade: A');
} else if (score >= 80) {
  console.log('Grade: B');
} else if (score >= 70) {
  console.log('Grade: C');
} else if (score >= 60) {
  console.log('Grade: D');
} else {
  console.log('Grade: F');
}
// Output: Grade: C

How it works:

Check first condition (score >= 90) - false, continue
Check second condition (score >= 80) - false, continue
Check third condition (score >= 70) - true, execute and stop
Skip remaining conditions

Age Categories Example

const age = 45;

if (age < 13) {
  console.log('Child');
} else if (age < 20) {
  console.log('Teenager');
} else if (age < 65) {
  console.log('Adult');
} else {
  console.log('Senior');
}
// Output: Adult

Nested if Statements

Put if statements inside other if statements:

const age = 25;
const hasLicense = true;

if (age >= 18) {
  if (hasLicense) {
    console.log('You can drive');
  } else {
    console.log('You need a license to drive');
  }
} else {
  console.log('Too young to drive');
}
// Output: You can drive

Better written with logical operators (covered in next tutorial):

if (age >= 18 && hasLicense) {
  console.log('You can drive');
} else if (age >= 18) {
  console.log('You need a license to drive');
} else {
  console.log('Too young to drive');
}

switch Statement

Alternative to multiple if-else when comparing one value against many options:

const day = 'Monday';

switch (day) {
  case 'Monday':
    console.log('Start of the work week');
    break;
  case 'Friday':
    console.log('Almost weekend!');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend!');
    break;
  default:
    console.log('Midweek day');
}
// Output: Start of the work week

Important: Use break to exit the switch. Without break, execution “falls through” to the next case.

switch Syntax

switch (expression) {
  case value1:
    // Code for value1
    break;
  case value2:
    // Code for value2
    break;
  default:
    // Code if no match
}

Fall-Through Behavior

const grade = 'B';

switch (grade) {
  case 'A':
  case 'B':
  case 'C':
    console.log('Passed!');
    break;
  case 'D':
  case 'F':
    console.log('Failed');
    break;
  default:
    console.log('Invalid grade');
}
// Output: Passed!

Multiple cases can share the same code block.

Truthy and Falsy Values

JavaScript treats certain values as true or false in conditions:

Falsy Values

These evaluate to false:

if (false) { }        // false
if (0) { }            // 0
if ('') { }           // empty string
if (null) { }         // null
if (undefined) { }    // undefined
if (NaN) { }          // NaN (Not a Number)

Truthy Values

Everything else is truthy:

if (true) { }         // true
if (1) { }            // any non-zero number
if ('hello') { }      // any non-empty string
if ([]) { }           // arrays (even empty)
if ({}) { }           // objects (even empty)

Practical Example

const username = '';

if (username) {
  console.log('Welcome, ' + username);
} else {
  console.log('Please enter a username');
}
// Output: Please enter a username

Common Patterns

1. Input Validation

const email = 'user@example.com';

if (email.includes('@')) {
  console.log('Valid email format');
} else {
  console.log('Invalid email - missing @');
}

2. Boundary Checking

const quantity = 150;
const maxStock = 100;

if (quantity > maxStock) {
  console.log('Error: Not enough stock');
} else {
  console.log('Order processed');
}
// Output: Error: Not enough stock

3. Default Values

const userAge = null;
const defaultAge = 18;

const age = userAge ? userAge : defaultAge;
console.log(age); // 18

const choice = 2;

switch (choice) {
  case 1:
    console.log('Starting new game...');
    break;
  case 2:
    console.log('Loading saved game...');
    break;
  case 3:
    console.log('Opening settings...');
    break;
  case 4:
    console.log('Exiting...');
    break;
  default:
    console.log('Invalid choice');
}
// Output: Loading saved game...

5. Status Messages

const statusCode = 404;

if (statusCode === 200) {
  console.log('Success');
} else if (statusCode === 404) {
  console.log('Not Found');
} else if (statusCode === 500) {
  console.log('Server Error');
} else {
  console.log('Unknown Status');
}
// Output: Not Found

Ternary Operator (Shorthand)

For simple if-else, use ternary operator:

const age = 20;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // Yes

Syntax: condition ? valueIfTrue : valueIfFalse

Equivalent to:

let canVote;
if (age >= 18) {
  canVote = 'Yes';
} else {
  canVote = 'No';
}

Best Practices

✅ DO:

Use === for comparisons (strict equality)
Use clear, descriptive conditions
Keep conditions simple and readable
Use switch for many specific values
Always use break in switch cases (unless intentional fall-through)

// Good
if (age >= 18) {
  grantAccess();
}

// Good
switch (userRole) {
  case 'admin':
    showAdminPanel();
    break;
  case 'user':
    showUserPanel();
    break;
}

❌ DON’T:

Use == (loose equality) - can cause unexpected results
Write overly complex nested conditions
Forget break in switch statements
Compare with truthy/falsy when you need exact values

// Bad - loose equality
if (age == '18') { } // true even if age is string '18'

// Bad - too complex
if (age > 18 && age < 65 && hasLicense && !isSuspended && hasInsurance) {
  // Hard to read
}

// Better - break into smaller checks or use helper function
const canDrive = age > 18 && age < 65 && hasLicense && !isSuspended && hasInsurance;
if (canDrive) {
  // Clear intent
}

Common Mistakes

1. Assignment vs Comparison

// Wrong - assigns 18 to age (always true)
if (age = 18) {
  console.log('Age is 18');
}

// Correct - compares age to 18
if (age === 18) {
  console.log('Age is 18');
}

2. Missing break in switch

// Wrong - falls through
switch (day) {
  case 'Monday':
    console.log('Monday');
    // Missing break!
  case 'Tuesday':
    console.log('Tuesday');
    break;
}

// If day is 'Monday', both cases execute!

3. Checking for Zero

const count = 0;

// Wrong - 0 is falsy
if (count) {
  console.log('Has items');
}

// Correct - explicit comparison
if (count > 0) {
  console.log('Has items');
}

Summary

Statement	Use Case	Example
`if`	Single condition	`if (age >= 18) { }`
`if-else`	Two outcomes	`if (x > 0) { } else { }`
`else if`	Multiple conditions	`if (a) { } else if (b) { } else { }`
`switch`	Many specific values	`switch (day) { case 'Mon': ... }`
Ternary	Simple if-else (one line)	`age >= 18 ? 'adult' : 'minor'`

Falsy values: false, 0, '', null, undefined, NaN
Everything else: Truthy

Next Article: Comparison Operators

javascript-today