JavaScript if else Statement with Examples - Complete Guide

Conditional Statements

A conditional statement refers to a piece of code that does the things based on some condition. When we write code, we will often need to use these conditional statements. There are besically four types of conditional statements-

The if statements.
The if-else statements.
The if-else-if statements.
The switch case statements.

The if Statements

The if statement is used to execute a block of code only if the specified condition is true.

syntax

if(condition) {
	statement;
}

example

if(7 > 5) {
	console.log('True');
}

The if-else Statements

syntax

if(condition) {
	statement 1;
} else {
	statement 2;
}

example

if(5 > 7) {
	console.log('True');
} else {
	console.log('False');
}

The if-else-if Statements

The if-else-if statement is used to execute a block of code only if the specified condition is true from the several condition.

syntax

if(condition) {
	statement 1;
} else if {
	statement 2;
} else {
	statement 3;
}

example

if(5 > 7) {
	console.log('Greater');
} else if (5 == 7) {
	console.log('Equals');
} else {
	console.log('Smaller');
}

The switch case Statements

The switch case statement evaluates an expression, and then matching its value to a case clause, once match case is found, it executes statements associated with that case.

syntax

switch(expression) {
	case value 1:
	    statement;
		break;
		
	case value 2:
	    statement;
		break;
		
	default:
	    statement;
}

example

let value = 2;

switch (value) {
	case 1:
	    console.log('Too small');
		break;
	case 2:
	    console.log('Exactly!');
		break;
	case 3:
	    console.log('Too large');
		break;
	default:
	    console.log('Unknown');
}

Ternary Operator - Shorthand if-else

The ternary operator is a concise one-liner alternative to if-else for simple conditions.

Ternary Operator

// Syntax: condition ? valueIfTrue : valueIfFalse
const age = 20;
const status = age >= 18 ? 'Adult' : 'Minor';
console.log(status); // Adult

// Nested ternary (use sparingly - can reduce readability)
const score = 75;
const grade = score >= 90 ? 'A'
            : score >= 80 ? 'B'
            : score >= 70 ? 'C'
            : 'F';
console.log(grade); // C

// Ternary in JSX / template literals
const isLoggedIn = true;
const message = `Welcome, ${isLoggedIn ? 'User' : 'Guest'}!`;
console.log(message); // Welcome, User!

Practical Example - Grade Calculator

Grade Calculator

function getGrade(score) {
  if (score < 0 || score > 100) {
    return 'Invalid score';
  } else if (score >= 90) {
    return 'A - Excellent';
  } else if (score >= 80) {
    return 'B - Good';
  } else if (score >= 70) {
    return 'C - Average';
  } else if (score >= 60) {
    return 'D - Below Average';
  } else {
    return 'F - Fail';
  }
}

console.log(getGrade(95));  // A - Excellent
console.log(getGrade(72));  // C - Average
console.log(getGrade(45));  // F - Fail

// Same logic with switch on grade band
function getDayName(day) {
  switch (day) {
    case 1: return 'Monday';
    case 2: return 'Tuesday';
    case 3: return 'Wednesday';
    case 4: return 'Thursday';
    case 5: return 'Friday';
    case 6: return 'Saturday';
    case 7: return 'Sunday';
    default: return 'Invalid day';
  }
}
console.log(getDayName(5)); // Friday

Key Takeaways

Use if-else for range-based conditions (score >= 90) and switch for exact value matching.
Always include a default case in switch statements to handle unexpected values.
The break statement in switch prevents fall-through to the next case.
The ternary operator (condition ? a : b) is great for simple assignments but avoid nesting it deeply.
JavaScript uses truthy/falsy evaluation - 0, "", null, undefined, NaN, and false are all falsy.
Short-circuit evaluation with && and || can replace simple if statements.