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.
Ternary Operator in JavaScript
The ternary operator is a shorthand for the if...else statement. It is used to execute different actions based on different conditions. Here's an example:
let age = 18;
let isAdult = age >= 18 ? "Yes" : "No";
console.log(isAdult); // Yes
In this example, we have a variable age that is set to 18. The ternary operator checks if the value of age is greater than or equal to 18. If it is, it sets the value of isAdult to "Yes". Otherwise, it sets the value of isAdult to "No".
Here's another example:
let VoteAge = 17;
let canVote = VoteAge < 18 ? " you cannot vote " : " You can vote ";
console.log(canVote); // You cannot vote
In this example, we have a variable VoteAge that is set to 17. The ternary operator checks if the value of VoteAge is less than 18. If it is, it sets the value of canVote to " you cannot vote ". Otherwise, it sets the value of canVote to " You can vote ".
The ternary operator is a useful tool for writing concise and readable code. However, it's important to use it judiciously and not overuse it, as it can make your code harder to read and understand.
I hope this helps you understand how to use the ternary operator in JavaScript. Happy coding!
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
Top comments (3)
Great overview of these fundamental concepts.
There's one more conditional - the ternary statement. It's syntax is
condition ? true-logic : false-logic
e.g.
It's great for when you need an immutable value based on some condition, e.g.
Hi Anthony Fung . Thank you for your contribution . This is really helpful and happy to add it to the section. I will be adding it to the section soon. Thank you once again
Glad I could help.