Control Flow (if...else)
Hello HaWkers! Jeff Bruchado here.
This is another article in our series that will cover our journey to Learn Programming from Scratch.
Today will be an article about extremely important content to proceed with your learning.
So please! If you don't have mastery over what I'll talk about today, read to the end!
Well, without further ado, let's get started!
Today, we're going to talk about one of the most important topics in Programming:
Control Flow.
First of all, let's understand why it's important to understand control flow.
Let's suppose you're working on a system, and within this system there's a functionality that displays a message that informs if the user is of legal age or underage, this message is displayed based on the birth date of the user calculating their age compared to the current day.
Do you agree with me that this code needs some mechanism that displays one or another message, right?
And with that, we have Control Flow in Programming to solve this problem.
To conceptualize, Control Flow is a way to control the execution flow of your code.
In other words, determine which lines of code should be executed in certain situations.
This is done through control flow structures, like:
- if
- if...else
- switch
- if...else if
Next, let's understand each of them in detail:
if
if is used to execute an action when a certain condition is true.
For example:
const age = 17;
if (age < 18) {
console.log('You are underage');
}In this example, the message "You are underage" will only be displayed in the console if the variable age is less than 18.
In this case, age is the code representation of what we understand as age.
Next, let's go to practice to solidify this knowledge you just studied.
Practical Exercise
- Create a script that asks the user to enter three integers. Then, determine which number is the largest and print it on the screen.
Please! At the end of this article, reply to this email with the code and answer for each practical exercise.
This is so I know if this dynamic is valuable for you. And if this content is being useful for your journey.
if...else
if...else is used to execute one action when a certain condition is true and another action when the condition is false.
For example:
const age = 19;
if (age < 18) {
console.log('You are underage');
} else {
console.log('You are of legal age');
}In this example, the message "You are underage" will be displayed in the console if the variable age is less than 18, and the message "You are of legal age" will be displayed if the variable age is equal to or greater than 18.
Well, having covered the concept, let's go to practice to solidify this knowledge you just studied.
Practical Exercise
- Create a script that asks the user to enter an age. Then, check if the age is greater or equal to 18 and print "of legal age" on the screen, otherwise, print "underage".
The same instructions apply to this exercise as to the previous exercise.
switch
switch is used to check if a variable matches one of the specified values and, if it matches, execute an action.
For example:
const day = 'Tuesday';
switch (day) {
case 'Monday':
console.log('Today is Monday');
break;
case 'Tuesday':
console.log('Today is Tuesday');
break;
case 'Wednesday':
console.log('Today is Wednesday');
break;
// etc.
}In this example, the message "Today is Monday" will be displayed in the console if the variable day equals "Monday", the message "Today is Tuesday" will be displayed if the variable day equals "Tuesday", and so on.
Well, having covered the concept, let's go to practice to solidify this knowledge you just studied.
Practical Exercise
- Create a script that asks the user to enter a letter. Then, check if the letter is "a", "e", "i", "o" or "u" and print "vowel" on the screen, otherwise, print "consonant".
The same instructions apply to this exercise as to the other exercises.
if...else if
if...else if is an extension of the if...else structure that allows checking multiple conditions.
It's used when you want to execute a different action depending on which condition is true.
For example:
const score = 70;
if (score < 60) {
console.log('Failed');
} else if (score < 80) {
console.log('Recovery');
} else {
console.log('Passed');
}In this example, if the variable score is less than 60, the message "Failed" will be displayed in the console. If the variable score is greater or equal to 60 and less than 80, the message "Recovery" will be displayed.
If the variable score is equal to or greater than 80, the message "Passed" will be displayed.
It's important to note that the if...else if structure works as follows: the code checks the first condition (in the example above, score < 60), and if it's true, the corresponding action is executed and the code stops there.
If the first condition is false, the code moves to the next condition (score < 80) and checks if it's true. If it is, the corresponding action is executed and the code stops there.
If none of the previous conditions are true, the code enters the else block and executes the action defined there.
PS: I personally rarely use this condition, but it's important to have this possibility in your repertoire too!
Well, having covered the concept, let's go to practice to solidify this knowledge you just studied.
Practical Exercise
- Create a script that asks the user to enter a grade from 0 to 10.
Then, check if the grade is greater or equal to 9 and less or equal to 10, print "A" on the screen;
if the grade is greater or equal to 7 and less than 9, print "B" on the screen;
if the grade is greater or equal to 5 and less than 7, print "C" on the screen;
if the grade is greater or equal to 3 and less than 5, print "D" on the screen; otherwise (else), print "E" on the screen.
The same instructions apply to this exercise as to the other exercises.
Conclusion
In summary, now you have available in your repertoire different ways to control the flow of your code, you can use if, if...else, if...else if or even switch.
As you can see, switch and if...else if are very similar, and you can use one or the other depending on the situation.
When I face a dilemma of which to use, I always use the following rule:
If it's a complex condition with multiple return options, I use if...else if.
If it's a simple condition, but with multiple returns, depending on the value of a variable, then I use switch.
Well HaWker, we've reached the end of another article.
I hope this article has added to your repertoire of programming knowledge.
As always, if you have any questions or want to explore any point further, just reply with your question to this email.
And remember, I'm here to help you improve 1% with each new article!
If you made it this far, as usual, please reply to this email with "I managed to control the flow in the exercises".
This way I'll know that this article series is being useful for you, and that you're following along and taking advantage.
As you already know! Only a true HaWker makes it to the end.
Congratulations!
I'm happy to have you here.
See you soon.
Let's go! 🦅
- Jeff Bruchado
Congratulations on making it this far, HaWker! 🎉
Now that you've learned about control flow structures in programming, how about testing your knowledge? Take the quiz below and see how much you absorbed from our article.
It's a great way to reinforce learning and prepare for the next steps in your programming journey.
Good luck and have fun!