search

Home  >  Article  >  Web Front-end  >  How to use nested for loops in JavaScript?

How to use nested for loops in JavaScript?

WBOY
WBOYforward
2023-09-05 10:45:02960browse

How to use nested for loops in JavaScript?

We use JavaScript’s for loop statement to repeat a set of statements in the loop body a specified number of times. Nested for loops, as the name suggests, are composed of multiple for loops, one loop nested inside another loop. This allows us to loop over multidimensional data structures such as matrices.

Nested for loops in JavaScript

A simple for loop executes a specified number of times based on initialization values ​​and termination conditions. Nested for loops, on the other hand, have one or more for loops residing inside the outer for loop.

grammar

for(let i = 0 ; i < limit; i++){
   // statement
}

This will create a simple for loop that executes limit times. This means that it executes the statements within the loop body limited times.

In a nested loop, the statement in the for loop body is another for loop. This causes the inner for loop to execute on each iteration of the outer for loop. 

for(let i = 0 ; i < limit; i++){
   for(let j = 0 ; j < limit; j++){
      // statement
   }
   // statement for outer loop
}

The inner loop in this example runs limit times for each iteration of the outer loop. Therefore, the loop runs a total of limit x limit times.

The initialization values, termination conditions and updates of loop variables of the two loops are independent of each other.

Let’s see how nested for loops work through an example.

Example 1

Here we will use nested for loops to create a "#" two-dimensional matrix.

Let’s take a look at the same code. 

<!DOCTYPE html>
<html>
<body>
   <h3> The nested for loop in JavaScript</h3>
   <p> Enter number of rows and columns to create matrix</p>
   <form>
      <label >Rows : </label>
      <input type = "text" id = "rows"><br><br>
      <label > Columns : </label>
      <input type = "text" id = "cols"><br><br>
      <input type = "button" onclick = "fun()" value = "Create Matrix">
   </form>
   <br><br>
   <div id="result"></div>
   <script>
      function fun(){
         var text = "";
         var rows = document.getElementById("rows").value;
         var cols = document.getElementById("cols").value;
         for(let i = 0 ; i < rows; i++){
            for(let j = 0 ; j < cols ; j++){
               text += "#"
            }
            text += "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

In the above code, we get the input of the number of rows and columns, and then use nested loops to create the specified matrix. Note, the termination condition of the outer loop determines the number of rows of the matrix, and the termination condition of the inner loop determines the number of columns of the matrix.

You can adjust the parameters of the loop (initialization value, termination condition, update), and use nested loops to implement almost any type of nested traversal.

Let's see how to print the pyramid using nested loops.

Example 2

Here we will create a pyramid using the * symbol and the height provided by the user. Let's take a look at the same code. 

<!DOCTYPE html>
<html>
<body>
   <h3>The nested for loop in javascript</h3>
   <p>Enter the height of the pyramid:</p>
   <form>
      <label>Height : </label>
      <input type="text" id="height"><br><br>
      <input type="button" onclick="fun()" value="Create Pyramid">
   </form>
   <br><br>
   <div id="result"></div>
   <script>
      function fun() {
         var text = "";
         var height = document.getElementById("height").value;

         // loop 1
         for (let i = 0; i < height; i++) {
            // loop 2
            for (let j = 0; j < height - i; j++) {
               text += " "
            }
            // loop 3
            for (let j = 0; j <= i; j++) {
               text += "*";
            }
            text += "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

In the code above, as shown in the output, we can visualize many different traversal patterns after changing the loop parameters.

NoteThe outer loop (loop 1) in the program determines the height of the pyramid. The first inner loop (loop 2) determines the number of space characters at the beginning of each line. The second inner loop (loop 3) prints as many * characters as the height of the pyramid in the current iteration.

in conclusion

Nested loops are a very useful structure that are widely used and frequently used.

The above is the detailed content of How to use nested for loops in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to convert hyphens to camelCase in JavaScript?Next article：How to convert hyphens to camelCase in JavaScript?

Related articles

See more