MJSQ 101: FizzBuzz

More JavaScript Questions 101(MJSQ 101):

Continuing from my original blog post, I give you more javascript 101 questions answered!:

Topic covered today:

FizzBuzz

It's one of the most common JS questions that you'll see, I've seen it three times now, in an intro to algorithms/whiteboarding, in a practice technical interview and now from Yangshun's front-end questions. It's worth it to take a deeper look.

The prompt:

Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5.

A solution:

function fizzBuzz() {
    for (i = 1; i <= 100; i++) {
        if (i % 5 === 0 && i % 3 === 0) {
        console.log("FizzBuzz");
      } else if (i % 3 === 0) {
        console.log("Fizz");
      } else if (i % 5 === 0) {
        console.log("Buzz");
      } else {
        console.log(i);
      }
    }
    }

    fizzBuzz();

Solution broken down:

There are a few things that we know:

• We need to print the numbers 1-100.
• If the number is divisible by 3, the number will be replaced with "Fizz"
• If the number is divisible by 5, the number will be replaced with "Buzz"
• If the number is divisible by 3 & 5, the number will be replaced with "FizzBuzz"
• We'll go through all of this until we hit 100.

There are a few things that would work well for the solution if we know:

• To print something on screen, we can console.log() it.

• && operator allows for us to combine more than one conditional statement.

• The Modulo operator or % in javascript doesn't mean percent (unless it's written out in a string). A modulo operator does this cool calculation where it tells you what the remainder of a number is once it has been divided by the number on the right side of the operator.

Take for example:

 30 % 5 
 //output = 0. 30 is perfectly divisible by 5 so its output is 0. 

 31 % 5
 //output = 1. 31 divided by 5 is 6 plus some change, in this case it's 1.

• Conditional statements if, else if, and else

 if (conditional statement) {
     //do something here if conditional statement is truthy
 } else if (another conditional statement) {
     //do another thing if statement is truthy
 } else {
     //catch all for whatever else is left basically
 }

• for loop. A for loop takes three statements:

Statement 1 is executed (one time) before the execution of the code block. var i is declared before we start the loop.

Statement 2 defines the condition for executing the code block. The loop will run until i < 100 is no longer true aka when i > 100: STOP.

Statement 3 is executed (every time) after the code block has been executed. Whatever i is, add 1 to itself.

for (var i = 1; i < 100; i++) {
}

Here's the solution with a shit ton of comments:

function fizzBuzz() { 
    //we create a function called fizzBuzz() to be called later in the program once we run it
    for (i = 1; i <= 100; i++) {
        //this is a for loop to declare i to start at 1, until it is equal to or greater than 100, and once it executes, add i + 1
        if (i % 5 === 0 && i % 3 === 0) {
        //inside the for loop, we need to exercise a conditional. If i is perfectly divisible by 5 && divisible by 3, where the result of using the modulo operator is equal to 0, let's console.log("FizzBuzz")
        console.log("FizzBuzz");
      } else if (i % 3 === 0) {
        //Or if it's only perfectly divisible by 3, we can say "Fizz"
        console.log("Fizz");
      } else if (i % 5 === 0) {
        //Or if it's only perfectly divisible by 3, we can say "Buzz"
        console.log("Buzz");
      } else {
        console.log(i);
        //or if it's not divisible by any of those numbers, let's just print whatever i is.
      }
    }
    }

    fizzBuzz();
    //call the function and the numbers and Fizz and/or Buzzes will come streaming out.

Hope that explains how to code the all too common FizzBuzz question!

That's all for today, please leave any comments/questions/corrections in the comments. Thanks!

Sources:

Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quotes from his github. Find his tech interview handbook here and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

Other sources: