Javascript Fun: Using Nested Loops

Subscribe to my newsletter and never miss my upcoming articles

Hi friends! It’s been a while since my last post as I’ve been dealing with medical issues related to my health. I might be a bit slow for the next couple of days due to the medications. But I’m still working through on my code projects and writing out my progress.

This post was inspired by one of my take-home tests that I completed a couple of months ago. While I didn’t get the job, it did provide me the opportunity to dive in on some Javascript basics and understanding how to utilize nested loops. For this post, we will be looking into printing out numbers from 1 to 50. For multiples of 4, it’ll print out “The Cow.” For multiples of 6, it’ll print out “Goes Moo.” For multiples of 24, it’ll print out “The Cow Goes Moo.”

Here’s the CodePen where you can play around with the numbers if you want to try out different multiples and printing out number variations:

Breaking down the code

  1. Keeping the format simple, I’m using Bulma CSS framework. Adding the <span id=“output”> tag will allow us to print out the numbers and text on the page. I also adjusted the body section to where the text will be centered and the font size of the span element will be around 1.5rem.

  2. I’m using let instead of var since it’ll be within the block-scope of the function when the output occurs during the script. If you want to learn more about the differences between the variables, you can check out this article here.

  3. Since we want to print out 24 numbers, we’ll be using the for loop to declare the following: for (i = 0; i < 50; i++) .

  4. Within the for loop, we’ll be breaking down the if-else statements to determine how the text and numbers will be printed. The first portion of the code will determine if the number we are calculating will be a multiple of 24. For this to happen, we want to utilize the modulus operator for us to determine if the remainder will equal to zero. If it does, then it’ll provide the output “The Cow Goes Moo” on a separate line.

  5. Second and third nested loops will follow the same format as the previous code stated, except this time it’ll determine if the multiples of 4 and 6 will be equivalent to zero. If it does, their equivalent outputs will be printed on separate lines.

  6. The final else statement will simply print out the number if none of the conditions are met on the script.

Hope you enjoyed this post! If you happen to like it, feel free to share. You can also follow me on Twitter on my coding adventures.

Chris Bongers's photo

Ah the good 'ol fizzbuzz challenge... To be honest, I always wonder what a company want's to see, the loop is the quickest and neatest solution, so in that case you did an amazing job!

Also, Diana, Please take care of yourself hope you get a full recovery soon! 🐮

Diana Chin's photo

Thanks so much :)

Tapas Adhikary's photo

Nice explanation and wish you do better health wise sooner..

Diana Chin's photo

Thanks so much, Tapas :)