How to print a triangle formed of '#' using JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to print a triangle formed of '#' using JavaScript.

You need to use nested loops to print a triangle formed of '#' in JavaScript.

Loop is one of the features in programming languages that executes a set of instructions a several till the condition does not evaluate as false. Nested loops are the loops that contain a loop inside a loop itself. We are going to use two of loops in JavaScript to execute our task.

Following are the loops we are using to print a triangle formed of '#' −

for loop
while loop

Using for loop to print a triangle formed of '#.'

We use the for loop to execute code repeatedly by checking the specified condition. In this loop, the value is initialized and checks the condition; if it's true, it will execute the code by increasing/decreasing an initial value.

Syntax

Following is the syntax to use the for loop to print a triangle formed of '#' −

for (i=0; i< rows to display ; i++) {
   for (j=0; j<=i; j++) {
      // console.log('#'); printing the hash
   }
}

In the above syntax, we are using the two nested loops to print the triangle format of `#`.

Parameters

initialization − (i=0)Initialization of variable to start with
condition − (i<) A condition that will evaluate true or false
iteration − (i++)increase or decrease the start value

Algorithm

STEP -1 − Add a for loop and initialize it.
STEP -2 − Add and initialize a nested inner for loop.
STEP -3 − Printing the # from the inner loop.

Example

First to print hash triangle, we are using the for loop in the below example.


<html>
<body>
   <h2> Use <i> for loop </i>to print a triangle formed of '#' </h2>
   <div id = "div1"></div>
   <script>
      var i;
      var j;
      for (i=0 ; i<7 ; i++){
         for (j=0 ; j<=i ; j++){
            var span= document.createElement("span");
            var spanText=document.createTextNode(' #');
            span.appendChild(spanText);
            document.getElementById("div1").appendChild(span);
         }
         var para= document.createElement("p");
         var paraText=document.createTextNode("");
         para.appendChild(paraText);
         document.getElementById("div1").appendChild(para);
      }
   </script>
</body>
</html>

In the above example, users can see that we have printed a triangle of '#' using a for loop in JavaScript.

Using a while loop to print a triangle formed of '#.'

The while loop is the type of loop that runs the code repeatedly till the condition does not evaluate as false. The while loop is an entry-controlled loop which means the condition is checked before entering a loop. It does not execute a statement inside a Loop if its condition is false.

Users can follow the below syntax to use the while loop to print a triangle formed of '#.'

Syntax

while (i < rows to display){
   while (j <= i){
      //console.log('#') print the hash
      j++
   }
   j=0;
   i++;
}

In the above syntax, we have used two nested while loops to create the triangle pattern for the `#`.

Algorithm

STEP-1: Add a while loop and initialize it.
STEP -2: Add and initialize a nested inner while loop.
STEP -3: Print the # and increment the inner loop's variable.
STEP -4: initializing the inner loop's variable value as before.
STEP -5: Incrementing the outer loop's variable.

Example

We are using the nested while loop here to print a triangle formed of '#.'


<html>
<body>
   <h2> Use <i> while loop </i>to print a triangle formed of '#' </h2>
   <div id = "div1"></div>
   <script>
      var i=0;
      var j=0;
      while (i < 7){
         while (j <= i){
            var span= document.createElement("span");
            var spanText=document.createTextNode(' #');
            span.appendChild(spanText);
            document.getElementById("div1").appendChild(span);
            j++;
         }
         var para= document.createElement("p");
         var paraText=document.createTextNode("");
         para.appendChild(paraText);
         document.getElementById("div1").appendChild(para);
         j=0;
         i++;
      }
   </script>
</body>
</html>