Lesson 2 – Loops and Conditionals: Making Decisions and Repeating Yourself (Without Going Crazy) 🔄🤔

Welcome back, intrepid JavaScript adventurer! You’ve mastered variables and functions, so now it’s time to dive into the world of loops and conditionals—two magical tools that will let you make decisions and repeat tasks with ease. Think of them as the “if” and “do-it-again” spells in your JavaScript spellbook!

Conditionals – The Art of Making Decisions 🛤️

Conditionals allow you to make decisions in your code, so it can react differently depending on the situation—like choosing which pizza topping to order based on how you’re feeling.

The if Statement

The if statement is your JavaScript “decision-maker.” It checks a condition and, if it’s true, performs the specified action. Here’s how it looks in action:

let weather = "sunny";

if (weather === "sunny") {
  console.log("Time to wear sunglasses! 😎");
} else {
  console.log("Bring an umbrella! ☔️");
}

In this example:

• The if checks if weather is "sunny". If true, it prints “Time to wear sunglasses!”.
• The else kicks in if the weather isn’t sunny, reminding you to bring an umbrella.

The else if – Handling Multiple Cases

Sometimes, life isn’t just sunny or rainy; it can be cloudy or snowy too. That’s where else if comes in handy, allowing you to handle multiple cases.

let weather = "cloudy";

if (weather === "sunny") {
  console.log("It’s a sunny day! 😎");
} else if (weather === "cloudy") {
  console.log("Looks like clouds are rolling in. 🌥️");
} else {
  console.log("Hmm, better check the forecast! 🤔");
}

This example checks several conditions, giving different responses based on the weather. The else is there to catch anything unexpected—like a sudden tornado warning.

Loops – Repeating Yourself (Without Losing Your Mind) 🔁

Loops are here to save you from typing the same code over and over. They’re like setting up a coffee machine to keep refilling your cup automatically. Let’s look at the two most popular loops in JavaScript: for and while.

The for Loop

The for loop is perfect for situations when you know exactly how many times you want something to repeat. Here’s the structure:

for (let i = 0; i < 5; i++) {
  console.log("Hello, JavaScript!");
}

In this example:

• let i = 0 starts a counter at zero.
• i < 5 means the loop will continue as long as i is less than 5.
• i++ increases i by 1 each time the loop runs.

This loop will print “Hello, JavaScript!” five times. Much easier than typing it out five times manually, right?

The while Loop

The while loop is great when you don’t know exactly how many times you’ll need to repeat something—it just keeps going as long as the condition is true.

let cupsOfCoffee = 0;

while (cupsOfCoffee < 3) {
  console.log("Pour another cup ☕️");
  cupsOfCoffee++;
}

Here, as long as cupsOfCoffee is less than 3, JavaScript will keep pouring coffee. So, if you’re ready for an all-nighter, the while loop has you covered.

The break Statement – Time to Take a Breather

Sometimes, you just need to stop a loop before it’s finished—maybe you’ve had enough coffee, or maybe you’ve found what you’re looking for. That’s where break comes in handy.

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    console.log("Found it! Stopping the loop.");
    break;
  }
  console.log("Searching...");
}

This loop will print “Searching…” until i reaches 3, then it will print “Found it!” and stop.

Let’s Put It All Together! 🛠️

Let’s create a little program that uses conditionals and loops to solve a problem. How about this: a simple coffee counter that stops when it reaches your daily limit.

Task: Your Daily Coffee Tracker

1. Set a variable maxCups to your coffee limit (let’s say 5).
2. Write a for loop that counts each cup of coffee you drink.
3. Use an if statement inside the loop to check if you’ve reached your limit. If yes, print “You’ve had enough coffee!” and break the loop.

let maxCups = 5;

for (let cups = 1; cups <= maxCups; cups++) {
  console.log("Cup " + cups + " of coffee. ☕️");
  if (cups === maxCups) {
    console.log("You’ve had enough coffee!");
    break;
  }
}

When you run this code, JavaScript will count each cup and stop when you reach your max.

What’s Next?

Congratulations! You’ve just mastered conditionals and loops—two superpowers that will help you make smart decisions and automate repetitive tasks in your code. In the next lesson, we’ll dive into arrays and objects: the containers where JavaScript stores its magical treasures.

Stay tuned for Lesson 3 – Arrays and Objects: Your Data Treasure Chests!

Now go forth and loop to your heart’s content! 🕺💃

See also

• Lesson 7 – JavaScript Animations: Adding Life to Your Web Pages
• Lesson 6 – Event Delegation: Mastering Efficiency in Interaction
• Lesson 5 – Event Magic: Making Web Pages Interactive
• Lesson 4 – DOM Manipulation: Turning the Web into Your Personal Playground
• Lesson 3 – Arrays and Objects: Your Treasure Chests of Data