Concept 5 of 10 Beginner ⏱️ 15 min

Conditionals

Learn how to make your code make decisions with if statements and conditional logic.

Life is full of decisions: "If it's raining, take an umbrella. Otherwise, wear sunglasses." Conditionals let your code make these same kinds of decisions based on different situations.

Why We Need Conditionals

Without conditionals, code would run the same way every single time. But real programs need to respond to different situations—a game needs to know if you won or lost, a website needs to know if you're logged in or not.

🚦

Real-World Analogy

Think of a traffic light. If it's green, you go. Else if it's yellow, you slow down. Else (it's red), you stop. That's exactly how conditionals work!

The if Statement

The most basic conditional is the if statement. It runs code only when a condition is true.

let temperature = 30;

if (temperature > 25) {
  console.log("It's hot outside!");
}
// This prints because 30 > 25 is true

The structure is:

  • if — The keyword that starts the conditional
  • (condition) — A true/false expression in parentheses
  • { code } — The code block that runs if the condition is true

Adding else

What if you want to do something different when the condition is false? That's what else is for.

let age = 15;

if (age >= 18) {
  console.log("You can vote!");
} else {
  console.log("You're not old enough to vote yet.");
}
// Since 15 < 18, the else block runs

Multiple Conditions with else if

When you have more than two possibilities, use else if to check additional conditions.

let score = 85;

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: B"

Important: Order Matters!

Conditions are checked from top to bottom. Once one is true, the rest are skipped. If you checked score >= 70 first, scores of 90+ would incorrectly get a C!

Try It Yourself

Combining Conditions

You can combine multiple conditions using logical operators:

let age = 25;
let hasLicense = true;

// AND (&&) - both must be true
if (age >= 16 && hasLicense) {
  console.log("You can drive!");
}

// OR (||) - at least one must be true
if (age < 13 || age > 65) {
  console.log("You get a discount!");
}

// NOT (!) - reverses true/false
if (!hasLicense) {
  console.log("You need to get a license first.");
}

Nested Conditionals

You can put conditionals inside other conditionals for more complex decisions:

let isWeekend = true;
let isRaining = false;

if (isWeekend) {
  if (isRaining) {
    console.log("Watch a movie at home");
  } else {
    console.log("Go to the park!");
  }
} else {
  console.log("Go to work/school");
}

The Ternary Operator

For simple if/else statements, there's a shorthand called the ternary operator:

// Long way
let message;
if (age >= 18) {
  message = "Adult";
} else {
  message = "Minor";
}

// Short way using ternary operator
let message = age >= 18 ? "Adult" : "Minor";
// condition ? valueIfTrue : valueIfFalse

When to Use Ternary

  • • Simple true/false assignments
  • • Quick inline decisions
  • • When code fits on one line

When NOT to Use Ternary

  • • Complex conditions
  • • Multiple statements to execute
  • • When it hurts readability

Truthy and Falsy Values

JavaScript treats some values as "falsy" (act like false) and others as "truthy" (act like true):

// These are FALSY (treated as false):
// false, 0, "", null, undefined, NaN

if (0) {
  console.log("This won't run");
}

if ("Hello") {
  console.log("Non-empty strings are truthy!");
}

// Useful for checking if something exists:
let username = "";
if (username) {
  console.log("Welcome, " + username);
} else {
  console.log("Please enter your name");
}

Quick Quiz

Key Takeaways

  • if runs code when a condition is true
  • else runs code when the if condition is false
  • else if checks additional conditions
  • Conditions are checked in order—first true condition wins
  • Use && (AND), || (OR), ! (NOT) to combine conditions
  • The ternary operator (? :) is shorthand for simple if/else

What's Next?

Now that your code can make decisions, let's learn about loops—how to repeat code without writing it over and over again!

Finished this concept?

Mark it complete to track your progress