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


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>

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

We have learned two loops, using which we can print a triangle formed of '#' in JavaScript.

Generally, for loop is the most used and easier to print a triangle of '#' in JavaScript.

Updated on: 15-Sep-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements