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
returnstrue
-
<=
,>=
: Less than or equal to, Greater than or equal to Example:2 <= 2
returnstrue
-
==
: Equal to (ignores data type) Example:2 == "2"
returnstrue
-
!=
: Not equal to Example:3 != 2
returnstrue
-
===
: Strict equality (checks both value and data type) Example:2 === "2"
returnsfalse
-
!==
: Strict inequality (checks value and data type) Example:3 !== "2"
returnstrue
π If-Else: Making Decisions π‘
Basic If Condition
const isUserLoggedIn = true;
if (isUserLoggedIn) {
console.log("You are logged in.");
}
// Output: You are logged in.
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
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
β© 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
π 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
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
π 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
π§ Ternary Operator: One-Liner Condition π
const iceTeaPrice = 100;
iceTeaPrice <= 100
? console.log("less than 100")
: console.log("more than 100");
// Output: less than 100
Explanation: This one-line if-else checks whether the iceTeaPrice
is less than or equal to 100.
π― Key Takeaways:
- Control Flow helps guide your code's logic based on conditions.
- Use comparison operators to create conditions for your
if
,else
, andelse-if
statements. - Logical operators let you combine multiple conditions with ease.
- 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)