DEV Community

Cover image for Day 4: Control Structures in JavaScript
Dipak Ahirav
Dipak Ahirav

Posted on • Edited on

Day 4: Control Structures in JavaScript

#html #css #javascript #beginners

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Series Index

Part Title Link
1 Day 1: Getting Started with JavaScript Read Part 1
2 Day 2: Understanding Variables and Data Types in JavaScript Read Part 2
3 Day 3: Mastering Operators and Expressions in JavaScript Read Part 3
4 Day 4: Control Structures in JavaScript Read Part 4
5 Day 5: Understanding Functions in JavaScript Read Part 5
6 Day 6: Mastering Arrays in JavaScript 🚀 Read Part 6
7 Day 7: Understanding Objects in JavaScript 🏆 Read Part 7

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

Resources

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:

Top comments (0)