Tutorial # 05: JavaScript Conditional Statements – Complete Beginner Guide

In the previous tutorial, you learned how to compare values and combine conditions using operators. Now we will use them to make decisions. This is exactly what JavaScript Conditional Statements do: they let your program run different code depending on a condition.

What are Conditional Statements?

In real life, we take decisions all the time: “If it rains, I will take an umbrella. Otherwise, I will not.” Your code can do the same thing. In this tutorial, we will learn 4 types of JavaScript Conditional Statements:

• if statement
• if...else statement
• if...else if...else statement
• switch statement

1. The if Statement

The code inside if runs only when the condition is true. If the condition is false, JavaScript skips it.

// Syntax
// if (condition) {
//   code to run
// }

let age = 20;

if (age >= 18) {
  console.log("You can vote.");
}

console.log("Program finished.");

Output: You can vote. and then Program finished. If you change age to 15, only Program finished. will print.

2. The if…else Statement

Use else when you want a backup plan. If the condition is false, the else block runs.

let age = 15;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are too young to vote.");
}

Another example with an even or odd number:

let number = 7;

if (number % 2 === 0) {
  console.log(number + " is Even");
} else {
  console.log(number + " is Odd");
}

3. The if…else if…else Statement

When you have more than two choices, use else if. JavaScript checks conditions from top to bottom and runs only the first one that is true.

let marks = 72;

if (marks >= 90) {
  console.log("Grade A+");
} else if (marks >= 80) {
  console.log("Grade A");
} else if (marks >= 70) {
  console.log("Grade B");
} else if (marks >= 60) {
  console.log("Grade C");
} else if (marks >= 50) {
  console.log("Grade D");
} else {
  console.log("Fail");
}

Here marks is 72, so the output is Grade B. Notice that the order matters. If you put marks >= 50 first, every passing student would get Grade D.

Using Logical Operators in Conditions

You can combine conditions with && (AND) and || (OR), which you learned in the last tutorial.

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You can drive.");
} else {
  console.log("You cannot drive.");
}

let day = "Sunday";

if (day === "Saturday" || day === "Sunday") {
  console.log("It is weekend!");
} else {
  console.log("It is a working day.");
}

Nested if Statements

You can put an if inside another if. This is called nesting.

let isLoggedIn = true;
let role = "admin";

if (isLoggedIn) {
  if (role === "admin") {
    console.log("Welcome to the Admin Panel");
  } else {
    console.log("Welcome to your Dashboard");
  }
} else {
  console.log("Please login first");
}

Tip: do not nest too deeply. Two levels are fine. More than that makes your code hard to read.

4. The switch Statement

When you compare one variable against many fixed values, switch is cleaner than a long else if chain.

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  default:
    console.log("Weekend");
}

Output: Wednesday. Let us understand the parts:

• switch (day) is the value we are checking
• case is each possible match
• break stops JavaScript from running the next cases
• default runs when no case matches (like else)

What happens if you forget break?

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("Apple selected");
  case "banana":
    console.log("Banana selected");
  default:
    console.log("Unknown fruit");
}

Output: all three lines print. This is called “fall through”. JavaScript keeps running every case after the match until it finds a break. Always add break unless you want this on purpose.

Grouping cases together

let month = "March";

switch (month) {
  case "December":
  case "January":
  case "February":
    console.log("Winter");
    break;
  case "June":
  case "July":
  case "August":
    console.log("Summer");
    break;
  default:
    console.log("Other season");
}

if…else vs switch: Which One to Use?

Use if…else when	Use switch when
You check ranges (marks >= 80)	You check exact values (day = 3)
You use complex conditions (&&, ||)	You have many fixed options
You have two or three choices	You have five or more choices

Truthy and Falsy Values

JavaScript can treat any value as true or false inside an if. These values are always falsy: false, 0, "" (empty string), null, undefined, NaN. Everything else is truthy.

let userName = "";

if (userName) {
  console.log("Hello " + userName);
} else {
  console.log("Please enter your name");
}

let items = 5;

if (items) {
  console.log("Cart has items");
}

Practical Example: ATM Withdrawal

let balance = 10000;
let withdrawAmount = 4500;
let pinCorrect = true;

if (!pinCorrect) {
  console.log("Wrong PIN");
} else if (withdrawAmount <= 0) {
  console.log("Invalid amount");
} else if (withdrawAmount > balance) {
  console.log("Insufficient balance");
} else {
  balance -= withdrawAmount;
  console.log("Please take your cash: " + withdrawAmount);
  console.log("Remaining balance: " + balance);
}

Practical Example: Simple Calculator with switch

let num1 = 20;
let num2 = 5;
let operator = "*";

switch (operator) {
  case "+":
    console.log(num1 + num2);
    break;
  case "-":
    console.log(num1 - num2);
    break;
  case "*":
    console.log(num1 * num2);
    break;
  case "/":
    console.log(num1 / num2);
    break;
  default:
    console.log("Invalid operator");
}

Common Mistakes to Avoid

// Mistake 1: using = instead of ===
let x = 5;
if (x = 10) {            // WRONG: this assigns 10, always true
  console.log("Wrong");
}
if (x === 10) {          // CORRECT
  console.log("Correct");
}

// Mistake 2: semicolon after if
if (x > 3); {           // WRONG: semicolon ends the if
  console.log("Always runs");
}

// Mistake 3: forgetting break in switch (see above)

Quick Recap

• if runs code only when the condition is true
• else runs when the condition is false
• else if handles more than two choices
• switch is best for matching exact values, and always needs break
• Falsy values: false, 0, "", null, undefined, NaN

Great work! Now you can make your programs take decisions using JavaScript Conditional Statements. This is a skill you will use in every real project.

Practice Exercises

1. Create a variable temperature = 35. Print “Hot” if it is above 30, otherwise print “Pleasant”.
2. Check if a number is positive, negative or zero using if...else if...else.
3. Create age and print “Child” (below 13), “Teenager” (13 to 19), “Adult” (20 to 59) or “Senior” (60 and above).
4. Use switch to print the name of a month from a number (1 to 12). Print “Invalid month” for anything else.
5. Find the largest of three numbers using if and &&.

Assignment

Build a Student Grade and Result System:

1. Create variables for 3 subject marks (out of 100).
2. Calculate the total and percentage.
3. Use if...else if...else to assign a grade: A+ (90+), A (80+), B (70+), C (60+), D (50+), F (below 50).
4. Use && to print “Passed” only if the student scored at least 33 in all three subjects, otherwise print “Failed”.
5. Use switch on the grade to print a message: A+ “Outstanding!”, A “Excellent!”, B “Good job!”, and so on.
6. Print the final report in a clean format.

Bonus Challenge

Write a Leap Year checker. A year is a leap year if it is divisible by 4 and not by 100, or if it is divisible by 400. Test it with 2024, 1900 and 2000. Expected: true, false, true.

What’s Next?

In the next tutorial, we will learn JavaScript Loops (for, while, do-while). Loops will let you repeat code without writing it again and again.

Missed the last tutorial? Go back to JavaScript Operators, or browse the full JavaScript Tutorial Series. For deeper reference, see the MDN guide to control flow.