Understanding Javascript’s for Loop & While Loop
Learning a new language can be difficult at times, especially when these languages have new concepts that are foreign to many beginner programmers. One of the most difficult concepts for me to understand was Javascript’s loops.
In Javascript, loops can be used to perform repeated code based on a condition. These conditions typically return true or false when analyzed by our loop. A loop will continue running until the defined condition returns false.
Loops are not too difficult, but sometimes they can confuse those who aren’t too confident or familiar with the concept. We’ll break down loops to get a better understanding.
The For-Loop
Let’s say we wanted to use console.log to display something, except we want to display it five times. Without some sort of loop in your code, we would probably have to write the same line of code five times.
A for-loop can help us to do so by running the same code repeatedly under certain conditions.
Initialization is commonly used to create counters. Variables created here are scoped to the loop.
Condition is checked before the execution of every iteration. If it evaluates to true, the loop’s statement is executed. If it evaluates to false, the loop stops.
Iteration is used to affect your counter. It can affect the counter however you’d like.
The loop body repeats the code as long as the condition part is TRUE.
Let’s start the first part by initializing a counter.
In line 1’s “ let i = 0; ” we are essentially starting our counter ( i ) to zero as a starting point.
In “ i < 5 ” the code in the loop body loops until this condition is false. So once we hit 5, the loop ends.
In this last part of “ i ++” we’re incrementing the ‘ i ’ from the beginning of this line(the initialization), so it grows by 1 every time it loops.
Finally, anything in the loop body will be executed for as long as the condition is TRUE, so this is what we get in return in the console:
Our code returned the loop body with the counter starting at 0, meaning the condition did its job by not having a ‘Loop’ return with a number greater than 5.
The while-loop
The while-loop is a tad bit less complex but still carries a similar concept to the for-loop.
Our while-loop starts by evaluating the condition. If the condition is true, the loop body is returned.
Again, if the condition is false, the loop body stops getting returned, ending our loop.
So, with this while-loop example, we’re going to declare our counter outside of the loop. We’ll start with ‘ let i = 0’ in line 1.
In line 3, our condition ‘ i < 10 ‘ will return the loop body repeatedly as long as the condition is true.
In the loop body, we’re returning ‘ i ’ (line 4) and increasing ‘ i ’ by 1 every time it gets printed (line 5).
This is what we end up seeing in the console:
And again, this will continue until our counter reaches 9 to satisfy the condition of ‘ i < 10 ‘
Which one do I use?
All for loops can be written as while loops, and vice-versa. Deciding which loop to use is always a decision for the programmer.
For-loops are best used when you know how many times you would want the loop to run.
While-loops are best used when you want the loop to break based on a condition other than the number of times it runs.
There are other more advanced iteration structures that you can eventually grow to learn, so don’t worry if these two loops don’t help you find what you’re looking for.
