DEV Community

Aman Kumar
Aman Kumar

Posted on

Navigating Control Flow: How Your Code Decides What to Do 🧭✨

In JavaScript, not all code needs to be executed immediately or without conditions. Using Control Flow, you can decide when and how your code should run, based on different conditions and logic. Let's break down how comparison operators, if-else statements, and other logical operators work to manage your code's flow. πŸ› οΈ


πŸ”„ What is Control Flow? πŸ€”

Control Flow is all about how your code executes based on conditions. Without conditions, your code would execute line by line. But with Control Flow, you can tell JavaScript when to run specific parts of the code and when to skip them.


πŸ”’ Comparison Operators: The Backbone of Conditions 🎯

To make decisions, we need to compare values. Here's how comparison operators work in JavaScript:

  • <, >: Less than, Greater than Example: 1 < 2 returns true
  • <=, >=: Less than or equal to, Greater than or equal to Example: 2 <= 2 returns true
  • ==: Equal to (ignores data type) Example: 2 == "2" returns true
  • !=: Not equal to Example: 3 != 2 returns true
  • ===: Strict equality (checks both value and data type) Example: 2 === "2" returns false
  • !==: Strict inequality (checks value and data type) Example: 3 !== "2" returns true

πŸ”€ If-Else: Making Decisions πŸ’‘

Basic If Condition

const isUserLoggedIn = true;
if (isUserLoggedIn) {
    console.log("You are logged in.");
}
// Output: You are logged in.
Enter fullscreen mode Exit fullscreen mode

Explanation: The block inside the if statement executes because the condition isUserLoggedIn is true.

If-Else Condition

const temperature = 53;
if (temperature < 50) {
    console.log("Less than 50");
} else {
    console.log("Greater than 50");
}
// Output: Greater than 50
Enter fullscreen mode Exit fullscreen mode

Explanation: The code checks the condition temperature < 50. Since it's false, the else block runs.


🧩 Block Scope: Keeping Things Inside the Block 🧱

Variables declared inside {} are not accessible outside their block.

const score = 200;
if (score === 200) {
    let power = "fly";
}
// console.log(`Power: ${power}`); // Error: power is not defined
Enter fullscreen mode Exit fullscreen mode

⏩ Short-Hand If-Else ✨

You can write a simple if statement without curly braces if it’s just one line.

const balance = 1000;
if (balance > 500) console.log("Balance Greater than 500");
// Output: Balance Greater than 500
Enter fullscreen mode Exit fullscreen mode

πŸ”— Logical Operators: Combining Conditions 🧠

AND (&&) Operator

All conditions need to be true for the block to run.

const userLoggedIn = true;
const debitCard = true;
if (userLoggedIn && debitCard) {
    console.log("Allow to shop.");
}
// Output: Allow to shop
Enter fullscreen mode Exit fullscreen mode

OR (||) Operator

At least one condition needs to be true for the block to run.

const loggedInWithGoogle = false;
const loggedInWithEmail = true;
if (loggedInWithEmail || loggedInWithGoogle) {
    console.log("User Logged In");
}
// Output: User Logged In
Enter fullscreen mode Exit fullscreen mode

🌟 Nullish Coalescing Operator (??): Handling null or undefined

This operator returns the right-hand value if the left-hand value is null or undefined.

let val1;
val1 = 10 ?? 15;
console.log(val1); // Output: 10

val1 = null ?? 10;
console.log(val1); // Output: 10

val1 = undefined ?? 13;
console.log(val1); // Output: 13

val1 = null ?? 10 ?? 15;
console.log(val1); // Output: 10
Enter fullscreen mode Exit fullscreen mode

🧠 Ternary Operator: One-Liner Condition πŸ†

const iceTeaPrice = 100;
iceTeaPrice <= 100 
  ? console.log("less than 100") 
  : console.log("more than 100");
// Output: less than 100
Enter fullscreen mode Exit fullscreen mode

Explanation: This one-line if-else checks whether the iceTeaPrice is less than or equal to 100.


🎯 Key Takeaways:

  1. Control Flow helps guide your code's logic based on conditions.
  2. Use comparison operators to create conditions for your if, else, and else-if statements.
  3. Logical operators let you combine multiple conditions with ease.
  4. The ternary operator offers a compact way to handle simple conditions.

Mastering control flow gives you the power to write smarter, more dynamic code! Ready to take control? πŸš€

Top comments (0)