DEV Community

Cover image for Understanding Control Structures in JavaScript : A Comprehensive Guide - MERN STACK Series
Sadanand gadwal
Sadanand gadwal

Posted on

Understanding Control Structures in JavaScript : A Comprehensive Guide - MERN STACK Series

A Deep Dive into If Statements, Switch Statements, and Loops

Introduction:
Control structures are fundamental building blocks in programming that allow developers to control the flow of execution in their code. In JavaScript, control structures such as if statements, switch statements, and loops (for, while, do-while) play a crucial role in determining the behavior of a program. In this blog post, we'll explore these control structures in depth, providing clear explanations, code examples, and real-world scenarios to help you master them.

1) If Statement: 

let num = 10;
if (num > 0) {
    console.log("Number is positive");
}
Enter fullscreen mode Exit fullscreen mode
  • In the above example, if the variable num is greater than 0, the message "Number is positive" will be logged to the console.
  • If the condition inside the if statement evaluates to false, the code block will not be executed.

Real-World Example:
Consider a shopping website where you want to apply a discount based on the total purchase amount. You can use if statements to check different conditions and apply discounts accordingly.

2) If-Else Statement: 
The if-else statement allows us to execute one block of code if the condition is true and another block if the condition is false.

let num = -5;
if (num > 0) {
    console.log("Number is positive");
} else {
    console.log("Number is not positive");
}

Enter fullscreen mode Exit fullscreen mode
  • The if statement checks if num is greater than 0.
  • If the condition is true, it executes the code block inside the curly braces.
  • If the condition is false, it moves to the next else if statement or the else block if provided.

Real-World Example:
Consider a shopping website where you want to apply a discount based on the total purchase amount. You can use if statements to check different conditions and apply discounts accordingly.

3) Switch Statements: 
Switch statements provide an efficient way to handle multiple conditions by evaluating an expression and executing the corresponding case.

let day = "Monday";
switch (day) {
    case "Monday":
        console.log("Today is Monday");
        break;
    case "Tuesday":
        console.log("Today is Tuesday");
        break;
    default:
        console.log("Unknown day");
}
Enter fullscreen mode Exit fullscreen mode
  • 1. The switch statement evaluates the value of day and compares it against each case label.
  • 2. If a match is found, the corresponding block of code is executed.
  • 3. The break statement is used to exit the switch statement after a match is found.

Real-World Example:
A grading system where you want to assign grades based on the student's score. Switch statements can be used to evaluate different score ranges and assign grades accordingly.

4) Ternary Operator (Conditional Operator):
The ternary operator is a concise way to write if-else statements in a single line
Syntax: The ternary operator has the following syntax:

condition ? expression1 : expression2
Enter fullscreen mode Exit fullscreen mode
  • If the condition evaluates to true, expression1 is executed.
  • If the condition evaluates to false, expression2 is executed.

Let's consider a simple example of using the ternary operator to determine whether a number is even or odd:

const num = 7;
const result = num % 2 === 0 ? "Even" : "Odd";
console.log(result); // Output: "Odd"
Enter fullscreen mode Exit fullscreen mode
  • In this example, the condition num % 2 === 0 checks if num is divisible by 2 without a remainder.
  • If the condition is true, "Even" is assigned to result.
  • If the condition is false, "Odd" is assigned to result.

Real-World Example: Consider a scenario where you want to display a message based on whether a user is logged in:

const isLoggedIn = true;
const message = isLoggedIn ? "Welcome, User!" : "Please log in to continue.";
console.log(message);
Enter fullscreen mode Exit fullscreen mode
  • If isLoggedIn is true, the message "Welcome, User!" will be displayed.
  • If isLoggedIn is false, the message "Please log in to continue." will be displayed.

5) Loops: 
Loops are used to execute a block of code repeatedly as long as a specified condition is true. JavaScript provides several types of loops: for, while, and do-while.

i) For Loop:
 The for loop is used to iterate over a block of code a specified number of times.

for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}
Enter fullscreen mode Exit fullscreen mode

The for loop consists of three parts: initialization, condition, and increment/decrement.
It initializes a variable i to 0, checks if i is less than 5, and increments i by 1 in each iteration.

Real-World Example:
Displaying a list of products on an e-commerce website. You can use a for loop to iterate over the products array and display each product on the webpage.

ii) While Loop: The while loop is used to execute a block of code as long as a specified condition is true.

let count = 0;
while (count < 5) {
    console.log("Count: " + count);
    count++;
}
Enter fullscreen mode Exit fullscreen mode

The while loop checks the condition before executing the code block.
It continues to execute the code block as long as the condition (count < 5) remains true.

Real-World Example:
Implementing a countdown timer on a website. You can use a while loop to decrement the timer value until it reaches zero.

iii) Do-While Loop: The do-while loop is similar to the while loop, but it executes the code block at least once before checking the condition.

let x = 1;
do {
    console.log("Number: " + x);
    x++;
} while (x <= 5);
Enter fullscreen mode Exit fullscreen mode

The do-while loop executes the code block first and then checks the condition (x <= 5).
It continues to execute the code block as long as the condition remains true.

Real-World Example:
Prompting the user to enter a valid password. You can use a do-while loop to repeatedly ask for input until the user enters a valid password.

Conclusion
Mastering control structures such as if statements, switch statements, and loops is essential for becoming proficient in JavaScript programming. By understanding how these control structures work and practicing with real-world examples, you'll be able to write more efficient and organized code. Experiment with different scenarios and explore additional features and functionalities to enhance your coding skills.

🌟 Stay Connected! 🌟

Hey there, awesome reader! 👋 Want to stay updated with my latest insights,Follow me on social media!

🐦 📸 📘 💻 🌐 💼

Sadanand Gadwal

Top comments (0)