Day 4: Control Structures in JavaScript

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

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:

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:

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:

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:

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:

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:

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

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

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

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:

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
• 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
• Email: [e-mail]
• Instagram: devdivewithdipak
• YouTube: devDive with Dipak
• LinkedIn: Dipak Ahirav