JavaScript Conditional Statements, Break, and Continue

Lesson 3

Topic Overview

Welcome! In this lesson, we're exploring special instructions in the JavaScript language: Conditional Statements, along with the break and continue statements. As we've learned, loops allow us to execute a block of code numerous times. By combining these loops with conditional statements and incorporating the useful break and continue instructions, we achieve more robust and efficient code. Let's dive in!

The 'if' Statement

In JavaScript, the if statement triggers actions in our code based on a specific condition. Consider this straightforward example, where the if statement determines which message to print based on the value of temperature:

JavaScript
1let temperature = 15;
2if (temperature > 20) {
3    console.log("Wear light clothes."); // This message will print if the temperature is over 20.
4} else {
5    console.log("Bring a jacket."); // This message will print otherwise.
6}
7// Output: Bring a jacket.

We can evaluate multiple conditions using else if. This phrase means, "If the previous condition isn't true, then check this one":

JavaScript
1let temperature = 15;
2
3if (temperature > 30) {
4    console.log("It's hot outside!"); // This will print if the temperature is over 30.
5} else if (temperature > 20) {
6    console.log("The weather is nice."); // This will print if the temperature is between 21 and 30.
7} else {
8    console.log("It might be cold outside."); // This will print if the temperature is 20 or below.
9}
10// Output: It might be cold outside.

The 'break' Statement

We use the break statement whenever we want to exit a loop prematurely once a condition is met:

JavaScript
1const numbers = [1, 3, 7, 9, 12, 15];
2
3for (let i = 0; i < numbers.length; i++) {
4    if (numbers[i] % 2 === 0) {
5        console.log("The first even number is: " + numbers[i]); // This prints the first even number.
6        break; // This stops the loop after printing the first even number.
7    }
8    console.log("Number: " + numbers[i]);
9}
10
11// Output:
12// Number: 1
13// Number: 3
14// Number: 7
15// Number: 9
16// The first even number is: 12

The 'continue' Statement

The continue statement bypasses the rest of the loop code for the current iteration only:

JavaScript
1for (let i = 0; i < 6; i++) {
2    if (i === 3) {
3        continue; // This skips the print command for '3'.
4    }
5    console.log(i); // This prints the numbers from 0 to 5, except 3.
6}
7// Output:
8// 0
9// 1
10// 2
11// 4
12// 5

Use-case with a For Loop

By utilizing the tools we've covered so far, we can craft more flexible loops. Here's a snippet where we terminate the loop once we find "Charlie":

JavaScript
1const names = ["Alice", "Bob", "Charlie", "David", "Charlie"];
2
3for (const name of names) {
4    if (name === "Charlie") {
5        console.log("Found Charlie!"); // This prints when 'Charlie' is found.
6        break; // This stops the loop after finding 'Charlie'.
7    }
8}
9// Output:
10// Found Charlie!

Lesson Summary and Practice

Congratulations! You are now familiar with JavaScript's if statement, as well as the break and continue statements and their applications in loops. We encourage you to reinforce your learning through the upcoming practice exercises. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.