Solving Algorithms: Floyd’s Triangle Using JavaScript

Joshua Singleton
4 min readApr 22, 2021

--

Pink Floyd — Dark Side of the Moon

Are you able to create a triangular array of natural numbers? In other words can you create a Floyd’s Triangle?

According to Wikipedia, Floyd’s triangle is a triangular array of natural numbers, used in computer science education. It is named after Robert Floyd, a computer scientist who pioneered in the field of program verification using logical assertions. Floyd went on to receive the Turing Award in 1978.

Robert Floyd pondering Life

But back to Floyd’s Triangle… The triangle is created by filling the rows of the triangle with consecutive numbers, starting with a “1” in the top left corner. This is a common problem for beginning computer programmers that includes concepts of simple loop constructs and text formatting.

Floyd’s Triangle (I know…redundant)

So…Can you solve this problem on your own? Stop for a second and see if you can write a Floyd’s Triangle function. This function will take in the number of rows that the triangle will have as an argument.

Solve it?

If yes, then that is awesome!!! Pat yourself on the back you awesome coding genius!

Jake Peralta is pleased

If no then that is ok, I did not solve it either and needed assistance in finding the answer. Just like falling in love, there are different ways in approaching this opportunity. Even though I will show you one way, please do not be afraid of trying something new and different on your own. Hopefully I can assist you in this process. Let’s get started!

First let’s declare a function called FloydsTriangle. This function is going to take in an integer as an argument. This integer will determine how many rows or layers will make up our triangle. On the onset of our function we will declare two variables. First variable will be a num which will keep count of the numeric value that is ever increasing in our triangle and creates our rows. We can set this variable to 0 or 1 and I will show you how it will work for both numbers. The second variable will be assigned to an empty string. The reason that we use an empty string is because of how javaScript adds strings together. If you open your browser console and input 1 + 2 and then input “1” + “2” you get two values, 3 and “12”. That is because in JavaScript the operator “+” is used for both numeric addition and string concatenation. We want to concatenate our numbers in our string so that is why we set a variable to an empty string.

Creating our functions and setting our variables

Now it is time for our loops. For this problem we will need to create a nested loop. Nested loops are usually created to iterate through 2D or multilayered structures such as arrays of arrays aka a matrix. In our first loop we will set our index(i) to 1 and increment our index until it equals the int that we passed through in our argument. This will create our rows. In our nested loop we will set our index(j) to 1 and increment the value until it equals the value of our (i) index. This will create the same amount of columns as there are rows.

Creating our nested loops to iterate through

Inside the body of our nested loops we want to increment our number and also add the number to our string. If you set your variable num to 0 then you want to increment your string as such: “string += ++num”. This says to increment num by one before you add it to the string. If you set num to 1 your syntax will be “string += num++”. This says to add your num to the string then increment num.

We will also add spaces to our numbers so that each digit is visible and not just one long number. Once j equals i you want to add a new line to your string. We add lines to our string with “\n”. You can do this with an if statement or ternary. I choose ternary. It reads as such: Does j equates to i ? No? Ok then add a space to our string and iterate through our nested loop again. Yes, j does equal i, awesome! Add a line to our string and let’s break our j loop and iterate through our outside loop again.

The last thing you want to do is return your string and you my friend have a custom made Floyd’s triangle. Go on and try it out!

Adding num to our string, indenting lines and returning our string
Super Hyped

Did this help you out? Noice! Do you have another way of creating a Floyd’s triangle? Reach out to me and let me know. I would love to see your thought process. Take care my friend!

--

--

Joshua Singleton

Student of Code in the hopes of creating a new social network to enhance the community!