Control Flow in JavaScript: If, Else, and Switch Explained
The relationship between the control flow and the control structure.
INTRODUCTION :
You must be an adult if you're reading this blog, and if not you must be someone who has reached a stage to make decisions on their own. If you pay attention, most of the time when you make a decision there is some condition involved.
For example, you want to visit a book store and that book store has inbuilt cafe. In that case you can either drink iced tea and read a book there or you can just buy a book and go someplace else to drink the iced tea.
There must be number of things in your personal life which require you to make a decision based on some condition. Just like this, the world of programming also asks you to write a code which would make a decision based on the corresponding condition.
In this blog we will study about different ways of making a decision the output based on that decision and how the control flow and control structures are related.
1. What control flow means in programming :
Try to think about your whole day. You wake up, probably freshen up, have tea or breakfast, get ready, go for the work and etc., This order can can be different based on your role in the life. But, if you notice you do have some kind of order in your life, from the moment you wake up to the moment you go to sleep.
The programming language also follow this pattern of having the order in the code.
Control flow refers to the overall order in which code (i.e. instructions ) executes.
Generally, code runs sequentially (i.e. from top to bottom). A developer can alter this sequence using control flow statements based on some specific conditions or if some task needs to be repeated. This helps make the code dynamic and capable of decision making.
Some of the control flow statements are :
if statement
if - else statement
else - if ladder statement
switch statement
These statements are part of the conditional statement because these executes the code blocks based on whether the given condition is true or not.
2. The if statement :
Have you ever made a statement like, " I'll only buy this book if i've read all the books i already have!" or " I'll only go to college if my friend goes."
Similarly, programming language says, " I'll only execute this particular code block if the condition required is true."
ifstatement decides to execute a block of code if the specified condition is true.
Syntax :
if (condition) {
// code to be executed if condition is true
}
Example :
let age = 10;
if(age > 8) {
console.log("You can play this GAME!");
}
//output
You can play this GAME!
age = 7;
if(age > 8) {
console.log("You can play this GAME!");
}
//output
Prints nothing.
3. The if-else statement :
This is an upgraded version of the if statement. someone thought why waste the code block just because the condition was not true, instead of skipping the code block why not print something else if the condition is false. That's how we thought of if-else statement.
if-elsestatement decides to execute a block of code if a specified condition is true and an alternative code block if the condition is false.EITHER THIS OR THAT
Syntax :
if (condition) {
// task to be executed if condition is true
} else {
// task to be executed if condition is false
}
Example :
let age = 12;
if(age <= 10) {
console.log("You can join our CLUB!!");
} else {
console.log("Please wait for the right time :)")
}
//output
Please wait for the right time :)
age = 12;
if(age <= 10) {
console.log("You can join our CLUB!!");
} else {
console.log("Please wait for the right time :)")
}
//output :
You can join our CLUB!!
4. The else if ladder :
Have you ever booked a ticket for any movie? Probably yes, right! well you have many different screens for some special movies, such as 2D, 3D, 4DX, 2D IMAX, 3D IMAX, X-Screen, etc., Now all these screens have different pricing. You have to choose one screen depending on your budget, you can't see that movie in all the screens at the same time.
Now, you have more than 2 condition for the same situation, The else-if ladder in programming helps us make the decision if too many condition is involved to make one decision.
Syntax :
if(condition1) {
// code to be executed if true
} else if(condition2) {
// code to be executed if true
} else if(condition3) {
// code to be executed if true
} else if(condition4) {
// code to be executed if true
} else {
// code to be executed if none of the above conditions are met
Example :
let marks = 95;
if(marks <= 50) {
console.log("You need to work hard!");
} else if(marks <= 70) {
console.log("Focus a little extra on the self study session");
} else if(marks <= 85) {
console.log("You're doing good, try to participate in events too!");
} else {
console.log("Very Good, Try to do extra curriculum activities!!");
}
//output
Very Good, Try to do extra curriculum activities!!
5. The switch statement :
The switch statement is the simpler form of writing the if-else-if ladder if a single variable is involved. Each condition is written in the form of cases, as soon as one of the condition is met, we exit that complete block of conditions.
It is a selection structure that allows us to execute different action based on different conditions.
Syntax :
switch (expression) {
case val1:
// task to be executed if expression === val1
break;
case val2:
// task to be executed if expression === val1
break;
case val3:
// task to be executed if expression === val1
break;
case val4:
// task to be executed if expression === val1
break;
default:
// task to be executed if none of that case value matches
break;
}
Example :
let day = "Monday";
let action;
switch (day) {
case "Monday":
action = "Today is Monday";
break;
case "Tuesday":
action = "Today is Tuesday";
break;
case "Wednesday":
action = "Today is Wednesday";
break;
case "Thursday":
action = "Today is Thursday";
break;
case "Friday":
action = "Today is Friday";
break;
case "Saturday":
action = "Today is Saturday";
break;
case "Sunday":
action = "Today is Sunday";
break;
default:
action = "This is not part of the week, maybe an error!"
break;
}
console.log(action);
//output :
Today is Monday
6. When to use switch vs if-else :
switch :
Use when single variable expression is involved to make decisions based on multiple predefined values.
To write cleaner code.
Example :
You can use switch statement to decide the grade just based on marks.
if - else ladder :
Use when more than one variable is involved for broader range of conditions.
If complex conditional is involved.
Example :
You can use if-else ladder to decide which ticket you'll be buying based on the price, screen, budget, and seat all together.
CONCLUSION :
The decision making skill is something we all need. You have been using this conditional statements in your day-to-day life ever since you have sense of being, whether it be a decision in your life or a decision you make while you use new app, when you choose which plan you're getting in spotify premium, or customize your food while ordering from Eatclub.
The statements discuss above are the fundamentals we require to understand, but when we write production level code we try to avoid such repetitive code blocks, for example, with if-else statements we're just matching values and returning something, and doesn't that sound like mapping value, and we have better way for handling that like using objects or maps.
so, for the final statement i can say that, control flow is basically the overall order in which the code is executed , and control structures are way of altering that order.
control flow -> Path of the execution
control structures -> Tools to shape that path
well, This blog was for fundamental, if you really want to see how we can write better and scalable code, let's meet in another blog -- Thank You!
