Tutorials Tonight's Logo
Follow Us


Loop are functionality of programming language which can execute a block of code again and again until the given condition is satisfied. Loops are used when we have to do the same task for 'n' number of times, then instead of writing the same code for 'n' time we can use a loop.

for example if we want to print "Hello, World!" for 10 times then you will have to write the same code for 10 times but loop can do it in a better way.

Different kinds of loops in javascript

Javascript contains many different kinds of loops:

  • for: Loop that repeats a block of code for specified number of times
  • for...in: This is used to loop through property of an object
  • for...of: Loop that is used to loop through iterable like Array, String etc
  • while: loop that execute a block of code until given condition is true
  • do/while: This also execute a block of code until given condition is true but it execute the block of code at least once

1. The for loop

for loop is one of many loops in javascript. for loop include three control parts :

  1. Initialisation: Initialisation is a part of for loop where we initialise counter of for loop. It is the place where for loop starts.
  2. Condition: The condition part is a statement which returns true or false. if condition is true then code block of loop body is executed, if condition is false then loop breaks.
  3. Iteration: In this part the counter part of for loop is updated.


for(initialization; Condition; Iteration){
    // Body of loop where code to be executed is written

FlowChart of for loop:

for loop  - tutorialstonight

Let's see an example to print "Hello, World!" for 10 times.

let i;
for(i = 0; i < 10; i++){
  console.log("Hello, World");
▶ Run the code

Code Explanation: In the above example

  • Initialisation: i=0 is initialising i to 0
  • Condition: i<10 is checking if 10 is greater than i
  • Iteration: i++ is increasing initialisation variable by 1 in each iteration

Using Initialization Variable for flexible output

The initialisation variable (i in above example) gets updated in every iteration. We can use this variable in the loop body to get some interesting results. Suppose you want to print counting from 15-25 or you want to find squares of every number from 1-10, in such cases the initialization variable is good to use.

Lets see an example:

let i;
for (i = 1; i <= 10; i++) {
for (i = 10; i <= 25; i++) {
▶ Run the code

2. for...in loop

for...in loop is used to iterate through all the members of an object. We have not discussed the object yet but here we are taking a simple example: focus on loop here instead of object.


for (any_variable in object_name){
    // use any_variable here in code block it represent property of object

Here is an example:

var car = { name: "ford", color: "black", model: "mustang" }
let i;
for (i in car) { // i represent properties of car 
  document.getElementById("output").innerHTML += "Propety: " + i + ",  property: " + car[i] + "
"; }
▶ Run the code

Code explanation: In the above example the variable i represents "property-name" of the object and car[i] represents value of that property. It can be seen in the output that each time i value is assigned to the next property of the object.

3. for...of loop javascript

The javascript for...of loop is used to loop through iterable object values. For...of loops through the values of Array, String, NodeList etc.


for( variable of iterable){
    // Used variable in the code block

looping through an array using for...of loop

var fruits = ["Apple", "Banana", "Carrot", "Guava", "Orange"];
let i;
for (i of fruits) { // i represent 1 value of fruit 
  document.getElementById("output").innerHTML += i + "
"; }
▶ Run the code

looping through String using for...of loop

var moto = "Learn Javascript";
let i;
for (i of moto) { // i represent 1 value of fruit 
  document.getElementById("output").innerHTML += i + ", ";
▶ Run the code

while loop

while loop is a loop that loops through its body until the condition is true. We will learn more about the while loop in next chapter.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.