Have you been finding it difficult to understand control flow in JavaScript? This is the ultimate tutorial. I t doesn't get any simpler. And to be honest, if I had learnt many programming concepts this way, I would have progressed twice as fast.
Intro
Unlike how we read text in books from top to bottom in a more straight forward manner, The computer (browser in this case), may not "read" our code in this manner. This is because, in many cases, our code has to make decisions based on the data it interacts with. It may have to repeat (iterate) certain actions to get the desired result.
Control flow is simply the order in which the computer runs your code. Yeah That simple!!
A lot of times, we get overwhelmed by learning the technical terminologies of a programming language that we fail to learn the concepts.
Our model here is Concepts now, terminologies later.
This topic will be broken down into a series of articles that will touch 3 major concepts of control flow and it will be explained and demonstrated in the simplest terms.
- Loops
- Conditionals
- Functions
In this very brief article, we will be learning about the for loop and how it can be used in solving programing problems.
Loops
A loop is a sequence of instructions that is continually repeated until a certain condition is reached.
Take this instance. You are participating in a baking training program and you are learning to bake a cake. Your instructor tells you to pour into a bowl some butter and some sugar. Then she tells you to do something that we can regard as a loop. "Stir the mixture 360 degrees clockwise until the mixture becomes perfectly smooth." That statement there is a loop. Do this until that condition is met.
For Loop
Whats the concept ?
The computer interprets the for loop this way. For the duration of this condition remaining true, keep doing this.
Whats the syntax?
Take this example.
for (i = 0; i < 10; i++) {
console.log("Number " + i);
}
The for loop starts with the for keyword. Then we have parenthesis. In our parenthesis is contained the pattern in which our loop will be run. It contains 3 statements.
- We define a variable with an initial value
- We state the condition in which our loop can keep repeating the execution of our instruction i.e
console.log("Number " + i) - We state the action that is to be taken after each execution of the instruction.
Everything within the "{}" is known as a code block. The code block contains the instructions we want to be repeated.
The best way to understand code is to understand the way the computer thinks through your code. As a developer, you will be faced with complex problems and you will have to provide solutions that will be complex on several levels. What will help you in creating solutions that work properly and as intended is being able to think through the code like the computer does.
So lets think through this loop like a computer would.
When the computer sees the loop, it looks at the key word for, it then prepares itself to keep running the block of code as long the condition we set remains true. It looks at the condition and asks itself: "Can I proceed?" If yes, it runs the block of code in the "{}". After executing the code block, it executes the 3rd statement in the "()"
In this code example, the instruction is to print a number to the console a number of times.
The computer encounters the loop. It sees the initial value of i. In this case, the computer can see i as the number of times it has printed out to the console. It then ask itself by looking at the second statement: "Can I continue? Is the number of times I have printed to the console less than 10?"
At the first iteration, it has printed zero times. So it executes the instruction. After doing so, executes the 3rd statement i++, meaning increase i by one. This is the computer way of noting down that: "I have printed this i times ".
It then repeats the process. Now, its the second iteration. The computer checks to see how many times it has printed to the console. Remember that it has printed i time(s), and as long as i is less than 10, it has the permission to continue. This time, i =1, therefore, it has printed just once. Since that's the case, it goes on to execute the code block i.e console.log("Number " + i). On completion of the instructions in the block of code, it increments i. Meaning its noting down that it has printed to the console ( 2 times in this case).
It repeats the process over and over until it it gets to the point where i is no longer less than 10. At that point, the computer no longer has permission continue with the block of code. Therefore, it ends the loop or breaks out of the loop.
That's just the basic working principle of the for loop.
We'll be exploring other types of loops in subsequent articles.
Follow this blog to get updated on new content that will help simplify programming concepts