.png)
Decisions and Loops
Introduction
So before we go into any technical details, what do you understand when you hear the word decision making?
It is very much similar to our daily lives that we encounter a situation where we think to ourselves that okay, what action is required from my side if following is the case and then we proceed accordingly.
In programming languages we use control statements to make decisions, to control the flow of the program based on certain conditions.
Let us take an example, suppose we want to run a certain block of code only if the value of a is equal to 10. In this situation, we can use control statements.
Control Statements
In JavaScript, we have the following control statements
If
If-else
Nested-if
These statements allow us to control the flow of the program execution based upon conditions known only during the run time. Let’s look at each of them in great detail
//add boolean
If statement
It is the most simple decision-making statement. It helps us to decide whether or not to run a certain block of code i.e. if the certain condition is true then the block of statements should be executed otherwise not.
In the example above the condition can either be evaluated to be true or it can be false. So, if the condition evaluated to be the block of code inside the curly braces will be executed and if it doesn’t evaluate to be true the block of code will be skipped and the next statement in the sequence will be executed.
We have a look at the flowchart to have an even better understanding of the same.
In the flow chart above we can visually see what we have been talking about, and what will be the flow of the diagram.
Let us now look at some examples to understand how we can implement the if statement.
A simple example above show that the console statement will be executed only when the value of variable a will be greater than 4.
We can verify the same by having a look at the console below, the output will be “a is greater than 4”.
If-else statement
As we have seen above, how can we conditionally execute a block of code after a certain condition is true but what if we want to execute a block of code after the condition is false?
Then we make use of the else statement.
It is like simply making a decision that if the following condition is true that executes a certain block of code and if it is not true then executes the other block of the code.
Let us look at the syntax of if..else to understand it in a bit more detail
So, I think we now understand how an if-else block functions, but let us further have a look at the flowchart to understand the flow through the program.
Let us now look at some examples to understand how we can implement various functionality through loops.
If we try to extend the previous example and include the else part in the code, then for the given condition of a that is a =3, the else part will be executed.
If we look at the output we can verify that the output is “a is less than 4”.
Nested if statement
After the understanding of if and if..else, I think we can have a look at an interesting phenomenon of nesting the if loop.
So, what exactly do we mean by nesting here?
We know that we can execute a certain block of code after a given condition is true, but in that block of code, we can also check for another condition to be true/false and execute another block of code. Confused?
Let us look at the syntax that will help you grab a better understanding of the concept.
In the example above after condition 1 is true, we execute the block of code but inside that block of code we have checked for another condition named condition2 and if that evaluates to be true then, the code inside the block below it will be executed.
So, basically what we did was to check for multiple conditions to evaluate their respective blocks of code and that too at run-time. Isn’t it awesome?
Let us now look at some examples to understand how we can implement the nested if statement
In the example above what we did is just as an extension of our previous code,
Inside the if statement we added another check, that whether the value of b is greater than 3 or not, and only when both the conditions are true, we will receive output in the console saying - “The value of a is greater than 4 and the value of b is greater than 3”.
We can verify that we received the same output in the console.
Loops
Before understanding what loops are or how we use them, let us get a basic understanding of why we even need loops in the first place.
Let’s start by taking an example, in the code given below we print “Hello world ” to the console.
It is very simple and we understand how it functions, but what if we want to print hello world to the console like 100 times? What are we gonna do now?
Are we expected to write the same code 100 times to achieve the functionality or is there any feature/functionality that can help us?
This is where loops come in.
Whenever we want a certain statement or a block of a code to be repeated a number of times then we make use of Loops.
So, by definition Loops are used to execute a group of instructions or a block of code multiple times without writing them repeatedly.
Loops are supported by all modern programming languages, though their implementations and syntax may differ from one another.
As we have the basic knowledge of loops, let us now have a look at the loops in Javascript and study them in great detail.
But before we proceed further with the tutorial, you need to have a basic understanding of data types so if you have already gone through with the data types part then cheers!!😀😀
And if not kindly complete that portion first before moving further as you will need that knowledge to be applied here.
But a question might come to your mind that if loops can repeat a statement a number of times then how can we as a programmer get control over it? WIll the loop run according to its own wish?
The answer is no!! We have full control over how many times the loop will run, The condition through which we control the same is called a test condition. Using test conditions we check that if a certain condition is true then only we continue with the execution of the loop or else we exit the loop execution cycle.
Types of Loops in JavaScript
Based on the test condition, there are mainly two types of loops in javascript-
Entry controlled loops- In this loop, the test condition is tested before entering the loop body,
Exit controlled loops- In this type of loop, the test condition is tested or evaluated at the end of the loop body.
Okay so, you might not be able to understand everything that we just discussed but it is fine, as it contained a lot of technical terms and we are gonna discuss each one of them in great detail later so, you will have a firm grip over them by the end of this section
For loop
It is the most important and most commonly used loop in javascript.
So, let us first understand the structure of the for a loop. To run a loop we initialize a variable, then we set a constraint on that variable and finally we increment it to make the loop work.
In the example below, we initialize a variable ‘a’ with a value 5, then we created a constraint(Test condition) to control the number of times the loop will be executed i.e. a<=10 which implies that the loop will run until the value of a is less than 10 and finally, we have the increment condition, through which we increment the value of a.
Let us look at some code to a much better understanding and clarity
Can you guess the output of the code above-
Observing the output above we can see that the value of ‘a’ started from 1
And went iteratively to 5. That is the magic of loops, we just write a single statement and it gets executed for the desired number of times.
Let us have a look at the flowchart of the for loops to have a better understanding.
Initialization condition: It marks the start of a loop.
Testing Condition: As we discussed that the test condition control how many times can loop be executed, and as we check the test condition before entering the loop, therefore, it is called an Entry Control loop
For loop body: If the statement is evaluated to true, the statement in the loop body is executed.
Increment/Decrement: It is used for updating the variable for the next iteration.
Loop termination: When the condition becomes false, the loop terminates marking the end of its life cycle.
I think we now understand how the for loop functions and how we use test conditions to our advantage.
Let us now look at some examples to understand how can we implement various functionality through loops
While Loop
We understood the concept of for loop in the above section. Now let us have a look at another type of loop called a while loop.
While loop allows the statement or certain block of code to run for as long as the given condition is true.
The structure of the while loop is a bit different from that of a for loop
Let us have a look at it
To start with a while loop we mention a statement that starts with the keyword while and we place the test condition in the bracket of the while as demonstrated in the example above.
What does it help us to do?
Suppose we want to run a particular code for as long as a<1, so we can simply create a while loop and put the test condition inside it.
Now let us look at the flowchart that helps us to understand the flow of code through the while loop in a better way.
While loop is an Entry Control Loop i.e. it checks for the condition to be true before entering the loop and only if the condition is evaluated to true, then the loop body statements are executed otherwise the first statement following the loop is executed.
After the statements are executed then the condition is checked again before going for the next iteration.
When the condition tests to be false then the execution of the loop stops and it marks the end of its execution.
After studying the flowchart I think it is a good time to look at an example to understand how we can implement the same.
In the example above, we implemented a while loop. We simply created a variable a and before entering the while loop we checked that whether the value of a is less than 5 or not, and when the condition will be true only then the code inside while will be executed.
Before coming out of the while loop we are incrementing the value of a each time by 1.
So, in the console output below we can see that we have 5 console log statements and after that, the execution of the while loop stopped because the condition became false.
Do while loop
Do while loop is very similar to that of while loop but the only difference is that do while checks the condition after the execution and while loop checks the condition before execution.
At us have a look at the syntax to get a bit more clarity
Did you notice the difference between while and do-while?
Yes, it is the basic structure that is different for both of them
Now, let us have a look at the flowchart to understand the flow through the loop.
Do while does not check for the condition before execution of the statement, there is no checking of any condition for the first time.
Once the execution is done then the condition is checked for true or false.
If the condition is satisfied then the next iteration is continued and if not the loop is terminated.
The most important point to notice is that the do-while loop will execute the statement at least once before any check i.e. it checks the condition at the exit of the loop therefore, it is called exit control loop.
After studying the flowchart I think it is a good time to look at an example to understand how we can implement the same.
The code in the example above is very interesting, if we have a close look at it
The value of a here is 1, and the condition inside while checks that if a < 1,
That means the condition will turn out to be false.
But as we are using a do-while loop, before any condition is checked the body of the loop will be executed once.
So, according to the code above, we can expect to see the output as
“The value of a is - 1”.
We can verify the same from the output above.