MJSQ 101: FizzBuzz
Tags: codenewbie, javascript
Published: 2020-03-03 08:40:05

## More JavaScript Questions 101(MJSQ 101): 
Continuing from my original [blog post]("https://dev.to/danvyle/more-javascript-fundamentals-101-4d5d"), 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:

```js
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: 
 ```js
 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`

```js
 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. 

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

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

```js
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]("https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-call-and-apply") 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: