JavaScript If Else

Making decisions in your code with conditional statements

🤔 What are If Else Statements?

If else statements allow your program to make decisions. They execute different code blocks based on whether conditions are true or false. 


// Basic if else example
let age = 18;
if (age >= 18) {
    console.log("You can vote!");
} else {
    console.log("Too young to vote.");
}

Output:

You can vote!

Types of If Statements

if

Simple If

Execute code if condition is true 

if (condition) {
  // code
}
if/else

If Else

Two possible paths 

if (condition) {
  // true path
} else {
  // false path
}
else if

Else If

Multiple conditions 

if (condition1) {
  // path 1
} else if (condition2) {
  // path 2
}
? :

Ternary

Shorthand if else 

condition ? value1 : value2

🔹 Basic If Statement

The simplest form executes code only when the condition is true: 

let temperature = 30;

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

let isRaining = true;
if (isRaining) {
    console.log("Don't forget your umbrella!");
}

// Without curly braces (single statement)
if (temperature > 35) console.log("Stay hydrated!");

Output:

It's hot today!

Don't forget your umbrella!

🔹 If Else Statement

Provides an alternative path when the condition is false: 

let score = 75;

if (score >= 60) {
    console.log("You passed!");
} else {
    console.log("You failed. Try again!");
}

// Another example
let time = 14; // 2 PM in 24-hour format
if (time < 12) {
    console.log("Good morning!");
} else {
    console.log("Good afternoon!");
}

Output:

You passed!

Good afternoon!

🔹 Else If Statement

Handle multiple conditions with else if: 

let grade = 85;

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

// Weather example
let weather = "sunny";
if (weather === "sunny") {
    console.log("Perfect day for a picnic!");
} else if (weather === "rainy") {
    console.log("Stay inside and read a book.");
} else if (weather === "snowy") {
    console.log("Time to build a snowman!");
} else {
    console.log("Check the weather forecast.");

Output:

Grade: B

Perfect day for a picnic!

🔹 Ternary Operator

A shorthand way to write simple if else statements: 

// Basic ternary
let age = 20;
let status = age >= 18 ? "adult" : "minor";
console.log("Status:", status);

// Nested ternary (use sparingly)
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log("Grade:", grade);

// In function calls
let number = -5;
console.log(number >= 0 ? "Positive" : "Negative");

// With variables
let isLoggedIn = true;
let message = isLoggedIn ? "Welcome back!" : "Please log in";
console.log(message);

Output:

Status: adult

Grade: B

Negative

Welcome back!

🔹 Practical Examples

Real-world applications of if else statements: 

// User authentication
let username = "john";
let password = "secret123";

if (username === "john" && password === "secret123") {
    console.log("Login successful!");
} else {
    console.log("Invalid credentials!");
}

// Shopping cart discount
let totalAmount = 150;
let discount = 0;

if (totalAmount >= 100) {
    discount = 10; // 10% discount
    console.log("You get a 10% discount!");
} else {
    console.log("Spend $" + (100 - totalAmount) + " more for discount!");
}

let finalAmount = totalAmount - (totalAmount * discount / 100);
console.log("Final amount: $" + finalAmount);

Output:

Login successful!

You get a 10% discount!

Final amount: $135

🧠 Test Your Knowledge

What will this code output: let x = 5; console.log(x > 3 ? "big" : "small");