What is Control Flow?
In programming, control flow means deciding which part of your code runs and when it runs. It helps your program make choices based on conditions.
In JavaScript, you can use control flow statements like if
, else if
, else
, and switch
to tell your program what to do in different situations.
Let’s learn how each one works with easy examples.
if Statement
The if
statement runs a block of code only if a specified condition is true.
Syntax:
if (condition) {
// code to run if the condition is true
}
if
is a keyword that starts the condition check.- Inside the parentheses
( )
you put a condition that evaluates totrue
orfalse
. - The code inside the curly braces
{ }
runs only if the condition istrue
. - If the condition is
false
, the code inside the{ }
is skipped.
Example:
let age = 18;
if (age >= 18) {
console.log("You are an adult!");
}
Here,
- You have a variable
age
with value18
. - The
if
checks if age is 18 or more(age >= 18)
. - Since 18 is equal to 18, the condition is true.
- So, the message "You are an adult!" is printed.
- If the age was less than 18, nothing would happen.
else Statement
The else
statement lets you run some code when the if
condition is false. It's like an otherwise option.
Syntax:
if (condition) {
// if condition is true, run this
} else {
// if condition is false, run this
}
else
is used right after anif
block.- The code inside the
else
block runs only when theif
condition isfalse
. - It acts as a "backup" or "otherwise" block when the
if
condition is not met.
Example:
let age = 16;
if (age >= 18) {
console.log("You are an adult!");
} else {
console.log("You are a minor!");
}
Here,
- The variable
age
is16
. - The
if
checks ifage
is 18 or more, but 16 is less than 18, so this condition isfalse
. - Because the
if
condition isfalse
, theelse
block runs instead. - It prints "You are a minor!".
else if Statement
When you want to check multiple conditions, you can use else if
between if
and else
.
Remember, JavaScript checks conditions from top to bottom. Once it finds one that’s true, it runs that code and skips the rest.
Syntax:
if (condition1) {
// runs if condition1 is true
} else if (condition2) {
// runs if condition1 is false and condition2 is true
} else {
// runs if none of the above conditions are true
}
Example:
let score = 75;
if (score >= 90) {
console.log("Grade A");
} else if (score >= 70) {
console.log("Grade B");
} else if (score >= 50) {
console.log("Grade C");
} else {
console.log("Grade F");
}
Here,
- The variable
score
is 75. - First,
if
checks ifscore
is 90 or more, it’s not, so it skips this block. - Then,
else if
checks ifscore
is 70 or more, and 75 is greater than 70, so this istrue
. It runs this block and prints "Grade B". - Since it found a
true
condition, it skips the rest. - If
score
was less than 50, it would run the lastelse
and print "Grade F".
You can add many else if statements, but too many can make your code hard to read.
switch Statement
When you want to check one value against many options, use switch
. It’s easier than writing lots of else if
for the same variable.
Syntax:
switch (value) {
case option1:
// runs if value === option1
break;
case option2:
// runs if value === option2
break;
default:
// runs if no case matches
}
switch
checks the value of an expression.- Each case compares the expression’s value with a possible value.
- If a match is found, the code inside that case runs.
- The
break
stops the switch from running the code in the next cases. default
runs if none of the cases match, it’s like theelse
for switch.
Example:
let fruit = "apple";
switch (fruit) {
case "banana":
console.log("Banana is yellow.");
break;
case "apple":
console.log("Apple is red.");
break;
case "orange":
console.log("Orange is orange.");
break;
default:
console.log("Unknown fruit.");
}
Here,
- The variable
fruit
holds "apple". - The
switch
checks the value offruit
against each case. - It skips "banana" because "apple" is not equal to "banana".
- When it reaches case "apple", the value matches, so it prints "Apple is red.".
- The
break
stops checking further cases. - If none of the cases matched, the default block would run and print "Unknown fruit.".
Note: The break
statement stops the code from running into the next case. Without it, JavaScript continues running the next cases (called "fall-through").