Part : (3) Conditionals and Loops in JavaScript
Tags: javascript, programming, webdev, beginners
Published: 2023-06-07 09:44:54

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:

```javascript
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:

```javascript
// 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:

```javascript
// 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.
}
```

```javascript
// 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:

```javascript
// 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:

```javascript
//  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.
}
```

```javascript
//  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:

```javascript
//  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:

```javascript
//  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:

```javascript
//   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:

```javascript
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:

```javascript
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](https://github.com/Clifftech123/JavaScript-From-Beginner-to-Master/tree/main/03.Conditionals-and-loops)
Goodbye for now, and happy coding! 👋

Do not forget you can connect with me on [linkedin](https://www.linkedin.com/in/isaiah-clifford-opoku-a506a51b2/)