JavaScript Loops
what are loops?
Imagine you have a problem statement where you have to run a group of statements continuously until a particular condition is met. Now imagine doing this task without loops.
isn’t that nearly impossible, and so it is important to know, understand, and effectively use loops while coding.
JavaScript Loop provides a quick and easy way to do repetitive tasks. They offer to perform iterations with only a few lines of code. Iteration is the number of times you want to repeat the task (that number can even be zero). Be sure you understand all of them, so you can implement the best loop statement for a given situation.
With loops, we can repeat parts of code. Most of the time this means that we repeat some kind of instructions for different cases.
How do you know which one to choose, and when? In this article, we are going to cover the most popular loops telling you when and why you would use each. By the end of the article, you will be sure of which loop to use.
We repeat the sequence of instructions until the test condition is true. The different looping statement available are:
- For
- While
- Do while
- Break
- Continue
- For in
- For of
All the types have their own purpose and I will explain them one by one, later on, we also have an example you can use on a simple web page.
For loop
This is the most common and the oldest loop. A for loop repeats until a specified condition evaluates to false.
For loop has 3 parts: initialization, condition, and final-expression.
Initialization: we set the starting value for our loop variable. This is a variable that should change with every iteration. Many times i is used as a name for the variable. but we recommend you to use more meaningful values like count,…. In fact, a name that makes your code more readable.
Condition: It specifies a certain condition in the loop that determines whether the loop body will execute or not. If the condition returns true, the code inside the for loop will execute. If it returns false, the control moves onto the statement after the loop.
Final Expression: This is the statement that will run at the end of the loop, after each iteration of the loop. Final-expression is in most cases some kind of increase/decrease of the loop variable.
syntax
example:
output:
The conditional expression is executed every time the loop runs and if it evaluates to true then the statement inside the loop gets executed else the loop terminates. Also if the conditional expression is not there then it is considered as true by default.Increment/decrement expression executes once the statement inside the loops gets executed and updates its value. Statements inside the loop execute only when the conditional expression returns true as mentioned above.
This loop is useful when you know how many times you want the loop to execute. This loop also reduces the total lines in your code to achieve the same task.
While loop
A While Loop will continue to loop while a condition is true. It has only “one” part, condition. A lot of times the value for the condition is changed within the loop itself.
syntax
example:
You have to be careful with the while loop, since a lot of times, developers make mistakes and the condition will never fire, this means that loop never ends. This kind of code then makes an application unresponsive, the code is without error, but this is a runtime error and hard to find. To prevent this kind of error, you can add a counter, that breaks the loop after a number of loops.
output:
For each loop, we check the condition (noFox) and if it is “true”, then the loop continues.
While loop can be used for:
- Waiting for a condition to be true
- Increasing values till we reach some undefined value
- Searching for the end of the (data) tree
Do while loop
This loop is almost identical to the while loop, except the condition check is at the end.While and Do while loops are very similar.with one more important difference do while will run at least once and it will run until the condition is true.
syntax
example:
output:
If the condition returns true then the loop continues to run and executes the statements.the loop body executes at least once, even if the condition is not true. This is because the condition is tested when the loop body ends. If the condition returns true, the code inside the loop executes again. If it returns false, the JavaScript interpreter exits the loop.
Break statement
The break statement is used for jumping out of a loop. It will help you in breaking the loop and continue executing the code after the loop.
example:
output:
Here once the “i” value becomes 7, the loop directly terminates and continues to execute the code followed by for loop. And the output obtained here is 0,1,2,3,4,5,6.
Continue statement
The continue statement breaks one iteration in the loop if a specified condition occurs, and continues with the next iteration in the loop. The difference between the continue and the break statement is that the continue statement “jumps over” one iteration in the loop instead of “jumping out”.
example:
output:
When the continue statement gets executed it skips the rest of the statements to be executed in the inner loop and jumps back to the main loop and then continues the next iteration.
So here in the example where i = 3 the control skips the next console statement and continues with the next iteration. The same code without a continue statement gives the 1,3,6,10,15 as an output.
For in loop
This is a modified for loop that doesn’t require the programmer to know the number of iterations the loop needs to perform. For in is an important loop for JavaScript since it loops through all enumerable properties of a JavaScript object. In other words, if we have an object we can read all the values the object has using the For in loop.
syntax
For in is very helpful if we have an object we know nothing about, and this enables us to shift through properties and make decisions. This happens a lot with server calls. Also, this makes using prototypes easier since we can make a loop not knowing all the properties.
example:
output:
For each distinct property, JavaScript will execute the specified statements.The reason why the developers created the for…in loop is to work with user-defined properties in an object. It is better to use a traditional for loop over Array elements with numeric indexes.
For of loop
For of loop iterates through objects.The sole difference between for..in and for..of loop is that for…in iterates using properties of an object while the for..of iterates using properties values.
example:
output:
Here the iteration is on the values instead of indexes The difference between for in and for of can be seen with the below example where output obtained is indexes of the array instead of values.
So the JavaScript developers got us a new way to access these values directly. This makes our code a lot more efficient than before because the values store the property’s value, not the key.
Summary
Here we come to the end of our article on JavaScript loops. In the following article, we have looked at the major loops that you can use in Javascript. I hope that now you have a clearer understanding of them and can pick and choose which one you prefer based on your requirement.
