for loop in JavaScript with examples

The for loop in JavaScript is used to execute some blocks of code multiple times.

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 once.

Every time, before entering 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

Consider the following code as an example demonstrating the "for" loop in JavaScript:

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 image provided below displays a sample of the output that the "for" loop used in the aforementioned JavaScript example produced:

javascript for loop

A variable "num" is declared and assigned the value 2. Then we use "console.log()" to print a text "Multiplication Table of 2 is" where 2 is the value of "num". And finally, a "for" loop comes to execute "console.log(num*i)" for 10 times, with the value of i ranging from 1 to 10.

Following is another example created using the for loop:

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 the above example is:

javascript for loop example

In the preceding example, the execution of a "for" loop is as follows:

JavaScript for...in loop

The JavaScript for...in loop is used to loop through the properties of a 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:

for loop in javascript

JavaScript for...in loop syntax

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

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

Or

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 the above example is shown in the snapshot given below:

for of loop javascript

JavaScript for...of loop syntax

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

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

Consider the following code as another example demonstrating the "for...of" loop in JavaScript:

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 the above JavaScript example should be:

for of loop example javascript

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

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!