Skip to main content

Chapter 5: Choose Your Path

if, else and Simple Conditionals​

Every great adventure story involves choices – do you take the left path or the right path? In coding, conditionals like if and else allow our program to make decisions and choose different paths of execution. It's like giving your code a brain to decide what to do based on certain conditions.

🌳 The if Statement – A Fork in the Road​

An if statement in JavaScript checks a condition – something that is either true or false. If the condition is true, it executes a block of code. If it's false, it skips that block (or can execute an alternative block if we provide an else). Think of it as: "If this is true, do X, otherwise (else) do Y."

Basic structure:

if (condition) {
  // code to run if condition is true
} else {
  // code to run if condition is false
}

The else part is optional – you use it if you want to handle the "otherwise" case.

Let's use a magical example. Suppose we want to check if a wizard is old enough to get a license to apparate (teleport). In the wizarding world, maybe the age requirement is 17.

let age = 16;
if (age >= 17) {
  console.log("You are old enough to apparate.");
} else {
  console.log(
    "You're too young to apparate. Perhaps try a broomstick."
  );
}

In this code:

  • The condition is age >= 17 which checks if age is greater than or equal to 17.
  • If age >= 17 is true, it will run the first console.log.
  • If it's false, it will run the second console.log in the else block.

Given age is 16, the output will be:

You're too young to apparate. Perhaps try a broomstick.

Try changing age to 17 or 18 and see the difference. The program's path changes based on the value of age.

🦁 vs 🐍 Example – A Simple House Check​

Let's say we want to give a special message to Gryffindors, and a different message to anyone else:

let house = "Gryffindor";
if (house === "Gryffindor") {
  console.log("🦁 Brave at heart!");
} else {
  console.log("Welcome, fellow wizard!");
}
  • We use === (triple equals) to check equality. === means "is exactly equal to". Here it checks if house is exactly the string "Gryffindor".
  • If house is "Gryffindor", we print the brave message.
  • Otherwise (else), we print a general welcome.

If house were "Slytherin" or anything not exactly "Gryffindor", the else branch executes.

Note: In JavaScript, === is the strict equality operator. There is also == but it does some type conversion which can be confusing. It's a bit like subtle magic that we don't need right now. It's best to use === to avoid unexpected results.

🔀 Multiple Conditions with Booleans​

Sometimes the condition itself can be a boolean variable (which is either true or false already). For example:

let isDaytime = false;
if (isDaytime) {
  console.log("It's bright outside, let's go for a walk.");
} else {
  console.log(
    "It's dark, better stay in and read a book by candlelight."
  );
}

Here isDaytime is either true or false. We don't even need to write == true or anything; the if will check the truthiness of isDaytime. Since we set it to false, the else branch will run.

We can also combine conditions using logical operators:

  • AND: && – all conditions must be true.
  • OR: || – at least one condition is true.

For instance:

let hasWand = true;
let knowsSpell = false;
if (hasWand && knowsSpell) {
  console.log("You cast the spell successfully!");
} else {
  console.log(
    "The spell fails... you either need a wand, knowledge of the spell, or both."
  );
}

The message here will be the else case because knowsSpell is false, so hasWand && knowsSpell is false (both conditions aren't met). If we used OR (||):

if (hasWand || knowsSpell) {
  console.log("You manage to produce some magic sparkles.");
} else {
  console.log("No magic at all. You have no wand and know no spells.");
}

This would print the first message because hasWand || knowsSpell is true (having a wand is enough in this OR scenario).

🤔 Using if Without else​

You don't always need an else. If you only want to do something when a condition is true and do nothing otherwise, you can write:

let alarm = true;
if (alarm) {
  console.log("Wake up! It's time for class.");
}
// if alarm is false, nothing happens

📝 Try It: Decision Time​

Try it yourself: Write a simple decision-making code:

  • Create a variable favoriteHouse and set it to one of the Hogwarts house names.
  • Write an if/else that prints a unique message for your favorite house, and a different message for other houses.
    • For example, if favoriteHouse is "Hufflepuff", maybe print "You value dedication and patience!" in the if, and for else print "Every house has its merits." for non-Hufflepuffs.
  • Test by changing favoriteHouse value to different houses (or something not a house) to see both branches working.

🧭 Summary of if/else​

  • Use if (condition) to decide whether to run a block of code.
  • Conditions are usually comparisons (==, ===, >, <, >=, <=) or booleans.
  • else provides an alternative block if the condition is false.
  • Logical operators && (and), || (or) allow combining conditions.

These statements let your program choose its path based on data, making it interactive and dynamic.

🐛 Debugging Tips – When Spells Go Wrong​

Even the best wizards miscast spells sometimes. When your code doesn't work as expected, here's how to figure out what went wrong.

Reading Error Messages​

JavaScript tells you what went wrong and where. Here are the three most common errors you'll encounter:

  • SyntaxError – You wrote something JavaScript can't understand. It's like mispronouncing an incantation. Check for missing brackets, quotes, or semicolons.
SyntaxError: Unexpected token '}'
  • ReferenceError – You used a variable that doesn't exist. Maybe you misspelled it or forgot to declare it with let.
ReferenceError: wizardname is not defined
  • TypeError – You tried to do something a value doesn't support, like calling .push() on a number instead of an array.
TypeError: age.push is not a function

Always read the error message and the line number. The line number tells you exactly where to look!

Using console.log to Debug​

When your code runs but gives the wrong result, sprinkle console.log statements to see what's happening inside:

let points = 10;
let bonus = 5;
let total = points - bonus; // Oops, should be +
console.log("Total is: " + total); // Output: Total is: 5 (that's wrong!)

By logging values at key points, you can spot where things go off track. Once you've found and fixed the bug, remove the extra console.log lines to keep your code tidy.

Remember: Error messages are your friends, not your enemies. They're like Dumbledore giving you a hint – read them carefully and they'll guide you to the solution.

You now have the power of conditional branching, which is a key part of programming logic. Next, we'll expand on this by handling multiple possibilities with else if chains, using the iconic Sorting Hat as our inspiration. Get ready to sort some students (or values) into houses!