What's a bee's favorite soda?

FIZZYBUZZ!

Please don't leave my blog, I'm sorry.

FizzBuzz is one of the most commonly asked programming questions, so I wanted to take a moment to talk about it. This instructional blog goes into a lot of detail and is intended for inexperienced developers.

Here are the rules of FizzBuzz:

For every number between 1 and a target number we choose:

  1. Print the word 'Fizz' whenever a number is evenly divisible by 3.
  2. Print the word 'Buzz' whenever a number is evenly divisible by 5. 
  3. Print 'FizzBuzz', whenever the number is evenly divisible by both 3 and 5 (a value commonly know as the number 15).
  4. Print the number, whenever the number is not evenly divisible by 3 or 5.


Let's build out some code. I will use Javascript. To see a completed example first, scroll to the bottom of the blog. If you are using Google Chrome, you can press f12 on your keyboard to open up the developer tools and follow along.

for(let number = 0; number <= target; number++){ } is used to repeat some code for a specific duration

  • 'for' means, do this while the following, the stuff in parenthesis, is true
  • 'let' is how we say there will be a value attached to the following variable (in the example below, there will be a value attached to our variable 'result'). 'let' means the value attached to the variable can change. A variable is just a word used to describe whatever comes after the equal sign. 
  • number this can be anything that makes sense. For example: for(let index = 0; etc) could work, too.
  • 0 is our starting value. Since we want to evaluate every number between 1 and number, we should write for(let number = 1; number <= target; number++)
  • ; we use semicolons to separate the different parts of the for loop. The first part is where we state our starting point, the second part is where we declare our duration (from starting point until number), the third part (++) says increase our starting point by 1.
  • number <= target while the current number being evaluated is less than or equal to the target number we specified. It's just a comparison and thus can be any comparison depending on the function you're creating (e.g. number > target).
  • number++ increase the currently evaluated number by 1.  This will move us from evaluating the number 1 to evaluating the number 2 and so forth until our target number has been reached.

console.log(); is used to print values

1. Print 'Fizz'
console.log('Fizz');

2. Print 'Buzz'
console.log('Buzz');

3. Print 'FizzBuzz'
console.log('FizzBuzz');

4. Print the number
console.log(number);

if () { } else if () { } else { } statements are used to describe a set of rules

1. whenever a number is evenly divisible by 3
if (number % 3 === 0) { }

% - if you see this symbol (modulo), it means that you will be checking for the remainder

6/3 = 2, which has a remainder of 0
6%3 = 0, because 6/3 does not have a remainder

5/10 = 0.5, which has a remainder of 5
5%10 = 5, because 5/10 had the remainder of 5

2. whenever a number is evenly divisible by 5
else if (number % 5 === 0) { }

Because we have multiple rules to check, we will chain them together using if (rule1) { } else if (rule2) { } else if (rule3) { } else { }. It's important to note that the rules are evaluated in the order they are written--if is evaluated before else if, which is evaluated before else. It is also important to note that if one of the rules is satisfied, the other rules will not be evaluated--if rule 1 is satisfied (the number is evenly divisible by 3) then our code will not look at the rest of the else if () { } else { } rules. 

3. whenever a number is evenly divisible by 3 and 5
else if (number % (5 * 3) === 0) { }

Things in parenthesis are evaluated from the innermost to outermost. (5*3) would occur before (number % (5 * 3) === 0) could occur.

4. whenever a number is not evenly divisible by 3 or 5
else { }

We could say else if (number % 3 !== 0 && number % 5 !== 0) however there are no other cases that will be evaluated, so we just use else to say "everything that isn't covered by the above rules will be covered in here." 

By the way, ! is used to say NOT. 
The title of this post is !funny. 
The title of this post is not funny.

&& is used to say AND.
I like pizza && cake.

Here's the code put together. There's an error in the logic. Can you spot it? 

for(let number = 1; number <= target; number++){
    if (number % 3 === 0){
        console.log('Fizz');
    } else if (number % 5 === 0){
        console.log('Buzz');
    } else if (number % 15 === 0){
        console.log('FizzBuzz');
    } else {
        console.log(number);
    }
}

.
.
.
.
.
.
.

If a number is divisible by 3, our code will print out 'Fizz' and that's it. What if the number is 15? Because rule 1 is satisfied, rule 3 will never be evaluated. This can be corrected in one of two ways. 

1. We can change the order of our code, since the top will be evaluated first:

if (number % 15 === 0){
    console.log('FizzBuzz');
} else if (number % 5 === 0){
    console.log('Buzz');
} else if (number % 3 === 0){
    console.log('Fizz');
} else {
    console.log(number);
}

2. We can change the way our rules are handled. // indicates a comment. A comment is something that won't be evaluated by the code. It's just so that developers can leave a message to help explain what is going on.

Let's pretend our number is 15

// result will contain a string
// a string is indicated by quotation marks and is a word or set of words)
// example: 'Hello, how are you today?'
let result = '';

// if number is evenly divisible by 3 (this is true)
if (number % 3 === 0){
    // add 'Fizz' to the result string
    // result will be the combination of whatever is currently in result and some new addition
    // example: '' + 'Fizz' = 'Fizz'
    result = result + 'Fizz';
}

// if a number is evenly divisible by 5 (this is also true)
if (number % 5 === 0){
    // add 'Buzz' to the result
    // 'Fizz' + 'Buzz' = 'FizzBuzz'
    result = result + 'Buzz';
}

// if result is empty (this is false because result is 'FizzBuzz')
if (!result) {
    result = number;
}

// print our result
console.log(result);

explanation:
We have 3 if statements instead of using the if () { } else if () { } structure. That means each if statement will be evaluated, even if the if statement before it is found to be true. We use a variable to hold a string which is updated whenever one of the if statements evaluates to true.


Our code is missing one more thing

A method signature... A method, also known as a function, is a set of coding instructions that can be called. Huh?

const this is a keyword similar to let. It just means that whatever follows it will not change. It is constant.

const fizzBuzz = (target) => {
    //all of our fizzBuzz code will go in here
}

Our method/function is called fizzBuzz. 

(target) is where an argument/parameter would go. An argument/parameter is just a fancy way of saying 'When we call this function, we are going to pass it this value. This value will be used inside of the function, in our fizzBuzz code.' So we can use the variable name 'target' in the code, and it will reference the value supplied (also called 'input') when the function is called.

=> is a symbol to indicate that the following code, enclosed in brackets { }, is part of our function

Here's our final result:

const fizzBuzz = (target) => {
    for(let number = 1; number <= target; number++){
        let result = '';
        if (number % 3 === 0){
            result = result + 'Fizz';
        }
        if (number % 5 === 0){
            result = result + 'Buzz';
        }
        if (!result) {
            result = number;
        }
        console.log(result);
    }
}

We can now call our function because it is fully defined.

Call the function by typing fizzBuzz(15); in the console. You can change 15 to any number you desire.

Our output will be:
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

Thanks for reading! Let me know if you have any questions.

Comments

Popular posts from this blog

Let's Git Acquainted

Free Code Camp: CatPhotoApp

Life and Code: An Update