Day 4: Control Structures in JavaScript
Tags: javascript, beginners, html, css
Published: 2024-06-06 02:57:42

#### Introduction
Welcome to Day 4 of your JavaScript journey! Yesterday, we covered operators and expressions. Today, we'll explore control structures, which are essential for controlling the flow of your programs. We'll dive into conditionals and loops, enabling you to make decisions and repeat actions in your code.

please subscribe to my [YouTube channel](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
) to support my channel and get more web development tutorials.

#### Conditional Statements

Conditional statements allow you to execute different blocks of code based on certain conditions.

**1. `if` Statement**

The `if` statement executes a block of code if a specified condition is true.

**Example:**
```javascript
let age = 18;
if (age >= 18) {
  console.log("You are an adult.");
}
// Output: You are an adult.
```

**2. `if...else` Statement**

The `if...else` statement executes one block of code if a condition is true, and another block if the condition is false.

**Example:**
```javascript
let age = 16;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}
// Output: You are a minor.
```

**3. `else if` Statement**

The `else if` statement allows you to test multiple conditions.

**Example:**
```javascript
let score = 85;
if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}
// Output: Grade: B
```

**4. `switch` Statement**

The `switch` statement evaluates an expression and executes code based on the matching case.

**Example:**
```javascript
let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}
// Output: Wednesday
```

#### Loops

Loops allow you to execute a block of code repeatedly.

**1. `for` Loop**

The `for` loop repeats a block of code a specified number of times.

**Example:**
```javascript
for (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}
// Output: 
// Iteration: 0
// Iteration: 1
// Iteration: 2
// Iteration: 3
// Iteration: 4
```

**2. `while` Loop**

The `while` loop executes a block of code as long as a specified condition is true.

**Example:**
```javascript
let i = 0;
while (i < 5) {
  console.log("Iteration:", i);
  i++;
}
// Output: 
// Iteration: 0
// Iteration: 1
// Iteration: 2
// Iteration: 3
// Iteration: 4
```

**3. `do...while` Loop**

The `do...while` loop is similar to the `while` loop, but it executes the block of code at least once before checking the condition.

**Example:**
```javascript
let i = 0;
do {
  console.log("Iteration:", i);
  i++;
} while (i < 5);
// Output: 
// Iteration: 0
// Iteration: 1
// Iteration: 2
// Iteration: 3
// Iteration: 4
```

#### Practical Examples

**Example 1: Check if a number is even or odd**
```javascript
let number = 4;
if (number % 2 === 0) {
  console.log(number + " is even.");
} else {
  console.log(number + " is odd.");
}
// Output: 4 is even.
```

**Example 2: Print all even numbers from 1 to 10 using a `for` loop**
```javascript
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i + " is even.");
  }
}
// Output: 
// 2 is even.
// 4 is even.
// 6 is even.
// 8 is even.
// 10 is even.
```

**Example 3: Sum of numbers from 1 to 5 using a `while` loop**
```javascript
let i = 1;
let sum = 0;
while (i <= 5) {
  sum += i;
  i++;
}
console.log("Sum:", sum); // Output: Sum: 15
```

#### Practice Activities

**1. Practice Code:**
   - Write conditional statements using `if`, `else if`, `else`, and `switch`.
   - Write loops using `for`, `while`, and `do...while`.

**2. Mini Project:**
   - Create a simple script that takes a number from the user and prints the multiplication table for that number.

**Example:**
```javascript
let number = parseInt(prompt("Enter a number:"));
for (let i = 1; i <= 10; i++) {
  console.log(number + " * " + i + " = " + (number * i));
}
// If the user enters 3, the output will be:
// 3 * 1 = 3
// 3 * 2 = 6
// 3 * 3 = 9
// 3 * 4 = 12
// 3 * 5 = 15
// 3 * 6 = 18
// 3 * 7 = 21
// 3 * 8 = 24
// 3 * 9 = 27
// 3 * 10 = 30
```

#### Summary

Today, we explored control structures in JavaScript. We learned how to use conditional statements (`if`, `else if`, `else`, `switch`) to make decisions in our code and loops (`for`, `while`, `do...while`) to repeat actions. Mastering these concepts is crucial for creating dynamic and interactive programs.

Stay tuned for Day 5, where we'll dive into functions in JavaScript!

#### Resources

- [Control Flow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
- [JavaScript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

Happy coding! If you have any questions or need further clarification, feel free to leave a comment below. Let's continue learning and growing together!

*Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!*

#### Follow and Subscribe:
- **Website**: [Dipak Ahirav] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)