for Loop in JavaScript

The for loop in JavaScript, is used to execute some block of code, multiple times. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      let num = 2;
      console.log("Multiplication Table of", num, "is:");
      for(let i=1; i<=10; i++)
      {
         console.log(num*i);
      }
   </script>
   
</body>
</html>

The snapshot given below shows the sample output produced by above JavaScript example on for loop:

JavaScript for Loop Syntax

The syntax of for loop in JavaScript, is:

for(initializeStatement; conditionStatement; updateStatement) {
   // body of the loop
}

The initializeStatement executes at first and only for once.

Every time, before entering into the body of the loop, the conditionStatement must be evaluated as true.

The updateStatement executes every time before executing the conditionStatement, except for the first time.

JavaScript for Loop Example with Explanation

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      let x = 10;
      for(let i=0; i<5; i++)
         document.write(x, "<BR>");
   </script>
   
</body>
</html>

The sample output of above example is:

In above example, the execution of for loop goes like:

First the statement let i=0; gets executed
Therefore i=0
Since the condition i<5 or 0<5 evaluates to be true
Therefore program flow goes inside the loop, and prints the value of x along with a line break, will be printed using the document.write() method
Now i++ (updateStatement) will be executed. So i=1 now
Again the condition i<5 or 1<5 evaluates to be true
Therefore program flow again goes inside the loop, and prints the value of x along with a line break
Now again i++ (updateStatement) will be executed. So i=2 now
Again the condition i<5 or 2<5 evaluates to be true
Therefore program flow again goes inside the loop
This process continues, until the condition evaluates to be false

JavaScript for...in Loop

The JavaScript for...in loop is used to loop through the properties of specified object. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      const myarr = [10, 20, 30, 40, 50];
      for(let i in myarr)
      {
         console.log(myarr[i]);
      }
   </script>
   
</body>
</html>

The output should be:

JavaScript for...in Loop Syntax

The syntax of for...in loop in JavaScript, is:

for (key in object) {
   // body of the loop
}

for (variable in array) {
   // body of the loop
}

JavaScript for...of Loop

The JavaScript for...of is used when we need to loop through the values of an iterable object. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      const ma = [10, 20, 30, 40, 50];
      for(let x of ma)
      {
         console.log(x);
      }
   </script>
   
</body>
</html>

The output of above example is shown in the snapshot given below:

JavaScript for...of Loop Syntax

The syntax of for...of loop in JavaScript, is:

for (variable of iterable) {
   // body of the loop
}

JavaScript for...of Loop Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      const mystr = "codescracker"
      for(let x of mystr)
      {
         console.log(x);
      }
   </script>
   
</body>
</html>

The output of above JavaScript example should be:

Note - The for...in loop deals with indexes, whereas the for...of loop deals directly with values of specified object.