Welcome back to the third installment of our journey to mastering JavaScript! I hope you’ve been enjoying learning about this powerful language so far. In our previous posts, we covered the fundamentals of data types, variables, operators, and expressions. Thank you for your dedication to learning with me.
In this post, we’ll dive into the exciting world of conditionals and loops in JavaScript. Let’s continue our journey towards becoming JavaScript masters.
What are Conditionals and Loops in JavaScript?
Conditionals and loops are essential building blocks of programming, and they are no different in JavaScript. In this answer, we’ll take a closer look at how to use conditionals and loops in JavaScript.
What are Conditionals?
Conditionals are statements that check if a condition is true or false. If the condition is true, the code inside the conditional statement will be executed. If the condition is false, the code inside the conditional statement will not be executed. Here’s an example:
if (condition) {
// code to be executed if condition is true
// if the condition is true, the code inside the curly braces will be executed
}
Conditional Statements in JavaScript
JavaScript provides two conditional statements: if and switch. These statements allow you to execute different actions based on different conditions. Let’s take a closer look at how they work.
The if Statement
The if statement executes a block of code if a specified condition is true. Here’s an example:
// if statement example
let age = 18;
if (age >= 18) {
console.log("You are old enough to vote.");
} else {
console.log("You are not old enough to vote yet.");
}
In this example, we have a variable age that is set to 18. The if statement checks if the value of age is greater than or equal to 18. If it is, it executes the code block inside the if statement and prints “You are old enough to vote.”. Otherwise, it executes the code block inside the else statement and prints “You are not old enough to vote yet.”
Here are some more examples of using the if statement:
// if statement with multiple conditions
let temperature = 25;
if (temperature > 30) {
console.log("It's too hot outside.");
} else if (temperature < 10) {
console.log("It's too cold outside.");
} else {
console.log("The temperature is just right.");
// output: The temperature is just right.
}
// if statement with multiple conditions
let isRaining = true;
if (isRaining) {
console.log("Remember to bring an umbrella.");
// output: Remember to bring an umbrella.
}
The switch Statement
The switch statement allows you to execute different actions based on different conditions. Here’s an example:
// Switch statement example
let day = "Monday";
switch (day) {
case "Monday":
console.log("Today is Monday.");
break;
case "Tuesday":
console.log("Today is Tuesday.");
break;
case "Wednesday":
console.log("Today is Wednesday.");
break;
default:
console.log("Today is some other day.");
}
In this example, we have a variable day that is set to “Monday”. The switch statement checks the value of day and executes the code block that matches the value. In this case, it prints “Today is Monday.”
Here are some more examples of using the switch statement:
// Switch statement with multiple cases
let color = "red";
switch (color) {
case "red":
console.log("The color is red.");
break;
case "green":
console.log("The color is green.");
break;
case "blue":
console.log("The color is blue.");
break;
default:
console.log("The color is unknown.");
// output: The color is red.
}
// Switch statement with multiple cases
let fruit = "apple";
switch (fruit) {
case "banana":
case "apple":
console.log("The fruit is either a banana or an apple.");
break;
case "orange":
console.log("The fruit is an orange.");
break;
default:
console.log("The fruit is unknown.");
// output: The fruit is either a banana or an apple.
}
Loops in JavaScript
JavaScript provides three types of loops: for, while, and do...while. Here’s how they work:
The for Loop
The for loop is used to execute a block of code a number of times. Here’s an example:
// for loop example
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
In this example, we have a variable i that is set to 0. The for loop checks if the value of i is less than 5. If it is, it executes the code block inside the for loop and prints the value of i. Then, it increments the value of i by 1 and checks the condition again. This process repeats until the value of i is no longer less than 5.
The while Loop
The while loop loops through a block of code as long as a specified condition is true. Here’s an example:
// do while loop example
let i = 0;
while (i < 5) {
console.log(i); // 0, 1, 2, 3, 4
i++;
}
In this example, we have a variable i that is set to 0. The while loop checks if the value of i is less than 5. If it is, it executes the code block inside the while loop and prints the value of i. Then, it increments the value of i by 1 and checks the condition again. This process repeats until the value of i is no longer less than 5.
The do...while Loop
The do...while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true. Here’s an example:
// do while loop example
let i = 0;
do {
console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
i++;
} while (i < 10);
In this example, we have a variable i that is set to 0. The do...while loop executes the code block inside the do...while loop and prints the value of i. Then, it increments the value of i by 1 and checks the condition. If the condition is true, the loop repeats. This process repeats until the value of i is no longer less than 10.
Conclusion and Next Steps
Thank you for reading this section! My goal is to help you become a master of JavaScript, and I hope you’ve learned a lot from it. Remember to practice what you’ve learned and keep building your skills.
We’ve reached the end of this section, but don’t worry, there’s more to come! In the next section, we’ll dive deeper into advanced topics Functions and more. Stay tuned and keep learning!
You can find all the code been used in this section in the Github
Goodbye for now, and happy coding! 👋
Do not forget you can connect with me on linkedin
