Loops in JavaScript
Loops, what are they and how are they used in JavaScript?
I wanted to take a step back and cover a fundamental concept in JavaScript. The great thing about loops is that you can easily do something a number of times. Loops are everywhere is JavaScript, which makes sense because we often want to iterate over an array or another data type in order to do some work. There are several different kinds of loops but they more of less all do similar work — they repeat an action any number of times as long as the condition is true.
Here are the different types of loops in JavaScript:
Here is a quick overview of each of the loops that have been described. Along with each loop it’s syntax.
For loop
As you can see, there are three parts to a for loop. The first statement executes before the loop runs. This is initializing the variable thats in the loop i.e. (n = 0). The second statement represents the condition in which to run the block of code. Should the condition be true the loop will continue, but if the condition is false, the loop with break out and end. Lastly, the third statement executes after every block of code has ran. Here the value is incremented by the initial variable. Also, note that any of the three statements are optional. This loop is the most frequently used, at least for me. The nice thing about for loop is that it is best used with arrays and strings. Below is a simple example of a for loop in which all numbers up to 10 are printed to the console.
For/in loop
In this example of a for/in loop the animal object is being iterated over. With each iteration in the loop, it returns a key (x). The key is used to access the value of the key. Remember that objects contain key:value pairs. Here the value of the key is animal[x].
For/of loop
The for/of loop iterates over the values of an object. The for/of loop is good for a lot of different data structures, i.e. strings, arrays, maps, etc. In this example, the loop is iterating through an array. With every iteration of the loop, the value of the next property is assigned to the variable. In the example below, the variable is (x). Our array is called animals and contains three values.
While loop
A while loop has a block of code which runs as long as the condition is true. In the example the variable num will run until it gets to 10 by increments of two. Be sure to increment otherwise the loop will never end and crash your browser.
Do/while loop
The do/while loop is similar to the while loop. The block of code will execute once before checking to see if in fact the condition is true. In the case the condition is met, the loop will execute. Be sure to increase the variable otherwise the loop will never end and crash your browser.
Hopefully, this article has been helpful and can be a good resource for the next time you need a JavaScript loops cheatsheet!
Happy coding…
