Part : (3) Conditionals and Loops in JavaScript

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