Draw Triangle with Javascript using “While”
We are going to draw triangle with JavaScript code in two ways. This is another programming exercise that JS students often face when they are starting to program in this language.
Most of us know that when we program in any language, generally there are several ways to reach the same goal. Even though each one of us may choose a different way to get there. That is why we ❤️ programming.
In this post, we are going to show you two ways to draw triangle with JavaScript. I am also positive that some of you can find more ways to achieve the triangle.
JS
//Looping un triangulo
let simbolo = "#";
let contador = 0;
while(contador < 9){
console.log(simbolo);
simbolo = simbolo + "#";
contador = contador + 1;
};
Firstly we will create a binding called symbol which will be the image that eventually gives shape to the triangle.
The second binding we will create is called counter. This variable will indicate the number of times the loop will run. The initial value of counter is 0.
Then we will create a “while” loop whose main condition to be executed, is that counter has to be less than 9.
The code within the loop starts with the print on the console of “#”( symbol ) on the first line. If we wish to print it on the document instead, we should use document.write(symbol).
The next line of code is to assign a new value to symbol. In this case, while the loop is running, symbol is taking a new value by adding a new “#” to the previous value.
The last line of code is increasing the value of counter. Counter will also increase its value by 1, each time the loop is executed.
The above process is repeated while the initial condition ( counter < 9 ) is True. True means that the value of counter will start with 0 and it will finish when the value of counter is 8.
Draw Triangle with Javascript using “For”
The second way to draw triangle with JavaScript code is to use an iteration “for”. This option seems to be simpler in terms of the length of code used. At the end of the day, what everyone wants is to use less amount of code to achieve the same goal.
JS
//Looping un triangulo con for
for (let hash = "#";
hash.length < 10;
hash+= "#")
console.log(hash)
};
The above code can be written in two lines. One line with for and in brackets, the conditions to be iterated and a second line with the instruction to be printed on the console. However, for clarity purposes, I have written it like that.
Inside the brackets, as part of the iteration, firstly, we declare the binding hash, whose value is the symbol “#”. This character is the one that once the program runs, will form the triangle.
Within the brackets, secondly, we will indicate the times that the iteration has to happen. For that purpose, we use the property length. In this specific case, the program will run while counter is less than 10.
As the last parameter of the iteration, we indicate to the variable hash to increase its value by adding a new character “#” to the previous value, using +=.
As a final result, we have been able to draw triangle with JavaScript in two different ways. Using a “while” loop and also using an iteration “for”.
Once you run the code described above you will be able to see on your console an image as shown below.
Creatuwebpymes, is a web design company based in Lanzarote – Canary Islands. We ❤️ programming in JavaScript, hence the reason for this post.
This post is an exercise that JavaScript students usually come across in their initial projects. If you wish to learn more about this language, here are some ebooks to learn JavaScript code.
