DEV Community

loading...
Cover image for Javascript Fun: Using Nested Loops

Javascript Fun: Using Nested Loops

redlotusdesignz profile image Diana Chin ・2 min read

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.

Discussion (8)

pic
Editor guide
Collapse
wingsmc profile image
Gergely Dremák

Sorry I felt compelled to fix this.
At least move the DOM lookup outside the loop.

let text = ""
for (i = 1; i <= 50; i++) {
  const append = []
  if(i % 4 == 0) append.push("The Cow")
  if(i % 6 == 0) append.push("Goes Moo")
  if(append.length == 0) append.unshift(i) // could have used push
  text += append.join(" ") + "<br>"
}
document.getElementById("output").innerHTML = text
Enter fullscreen mode Exit fullscreen mode
Collapse
jyang81 profile image
jyang81

if statements are conditionals (not loops). They just check whether a condition is true or false. You just have one for loop, so you technically aren't using nested loops.
For that, you'd have to have a for loop within a for loop (or a while loop).

And this is basically FizzBuzz...

Collapse
shadowscientist profile image
Shadow Scientist

That's awesome! 😀

Collapse
redlotusdesignz profile image
Diana Chin Author

Thanks so much :) Glad you like!

Collapse
sereddos profile image
Aleksey Sereda

Diana thanks a lot, maybe add another condition for checking the multiplicity of both 4 and 6

Collapse
jazzmasta profile image
Marcus

The loop might be initialized with for (i = 1; i <= 50; i++) { directly, then the i+1 can be avoided everywhere (just print i instead)

or am I missing something? :)

Collapse
ts000 profile image
Tyler Snell

Great post! I too have had a bunch of code screens force me to get really good at some basic - intermediate js stuff. Those live screens are the worst though! Homework ftw!

Collapse
satip1 profile image
satip1

what should I do if the number is a multiple of both 4 and 6, but not a multiple of 24. for Example, 12? Your algorithm doesn't take this into account. This is also not mentioned in the problem statement. You should have asked that question. Or the number 48. It is divided into 4, 6 and 24