JS Loops
In this tutorial, you will learn how to repeat a series of actions using loops in JavaScript.
Different Types of Loops in JavaScript
Loops are used, as long as a certain condition is met, to execute the same block of code again and again. The main idea behind a loop is to save time and effort by automating the repetitive tasks within a program. JavaScript currently supports five different types of loops which are:
- while — in this type of loop, a block of code loops through as long as the condition specified evaluates to true.
- do…while — in this type of loop, a block of code loops through once before the condition is evaluated. If the condition is true, the statement is repeated in as much as the specified condition is true.
- for —this loop loops through a block of code until the loop counter attains a specified number.
- for…in — this specific one loops through the properties of an object.
- for…of — unlike for…in, for…of loops over iterable objects such as arrays, strings, etc.
In the following sections, we will discuss each of these loop statements in detail.
The while Loop
The while loop is the simplest looping statement provided by JavaScript and it loops through a block of code as long as the specified condition evaluates to true. But the loop is stopped immediately after the specified condition fails. The generic syntax of the while loop is:
while(condition) {
// Code to be executed
}
The following example indicates a loop that will continue to run in as much as the variable i is less than or equal to 5. Whenever the loop runs the variable I will increase by 1:
var i = 1;
while(i <= 5) {
document.write("<p>The number is " + i + "</p>");
i++;
}Note: Ensure that the condition specified in your loop finally goes false. If not, the loop will never stop iterating and this condition is termed an infinite loop. Remember to always increase the counter variable because this is a common mistake we mostly make (variable I in our case).
The do...while Loop
The do-while loop differs from the while loop as it evaluates the condition at the end of each loop iteration. The block of code is executed once with a do-while loop and evaluated the condition if the condition is true. In as much as the specified condition evaluated is true the statement is repeated. The generic syntax of the do-while loop is:
do {
// Code to be executed
} while(condition);
In the following instance, the loop that starts with i=1 is defined by the JavaScript code. It will proceed to print the output and increase the value of variable I by 1. Afterward, the condition is evaluated, and as far as the variable i is less than 5, or equal to 5 the loop will continue to run.
Example:
var i = 1;
do {
document.write("<p>The number is " + i + "</p>");
i++;
}
while(i <= 5);
Difference Between while and do...while Loop
The while loop is a variant of the do-while loop in one crucial way. The main difference between both is that in the while loop, the condition to be evaluated is tested at the beginning of each loop iteration, so the loop will never be executed if the conditional expression evaluates to false instead of true.
While in a do-while loop, execution will always take place once even if the conditional expression evaluates to false because, unlike the while loop, the condition is evaluated at the end of the loop iteration rather than the beginning.
The for Loop
In as much as a certain condition is met, the for loop repeats a block of code. It is typically used for the execution of a block of code a specific number of times. Its syntax is:
for(initialization; condition; increment) {
// Code to be executed
}
The following parameters of the for loop statement have been defined as:
- initialization — it is used before the first execution of the body of the loop, to initialize the counter variables, and evaluate once without condition.
- condition — it is evaluated at the beginning of each iteration not the end of it. The loop statements either execute if it evaluates to true or ends if it evaluates to false.
- increment — it updates the loop counter with a new value relative to the number of times the loop runs.
A loop that starts with i=1 is defined by the following example. The loop will continue to run till the value of variable i is less than or equal to 5. The variable I will increase by 1 each time the loop runs:
for(var i=1; i<=5; i++) {
document.write("<p>The number is " + i + "</p>");
}
The for loop is exceptionally useful for iterating over an array. The following example will show you how to print the output of each item or element of the JavaScript array.
// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Loop through all the elements in the array
for(var i=0; i<fruits.length; i++) {
document.write("<p>" + fruits[i] + "</p>");
}
The for...in Loop
The for-in loop is a unique type of loop that iterates over the elements of an array or the properties of an object. The generic syntax of the for-in loop is:
for(variable in object) {
// Code to be executed
}
The loop counter which signifies the variable in the for-in loop is not a number but a string. It entails the index of the current array element or the name of the current property.
The example below shows how to loop through all properties of a JavaScript object.
// An object with some properties
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// Loop through all the properties in the object
for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
Furthermore, you can loop through the elements of an array, like this:
// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Loop through all the elements in the array
for(var i in fruits) {
document.write("<p>" + fruits[i] + "</p>");
}Note: The for-in loop should not be used where the index order is important to iterate over an array. Instead, for loop with a numeric index is quite better to use.
The for...of Loop ES6
ES6 initiates a new for-of loop which permits us to iterate over arrays or other iterable objects like strings very easily. In addition, the code inside the loop is executed for each element of the iterable object.
The example below shows how to loop through strings and arrays using this loop.
// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {
console.log(letter); // a,b,c,d,e,f
}
// Iterating over string
let greet = "Hello World!";
for(let character of greet) {
console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
To learn more about other ES6 features, refer to the JavaScript ES6 features tutorial.
Note: Unlike the for-in loop that iterates over properties of an object, for...of loop is the exact opposite as it doesn't work with objects because they are not iterable.