FizzBuzz ... Moore

Account Required

This free lesson is available if you sign in.
If you don't have an account, you can sign up for free.

FizzBuzz ... Moore

Sign in to access this content

You must sign in to access this content.
If you don't have an account you can sign up for free!

Problem

/**
* Print the integers from 1 to 100 (inclusive)
* But:
* - for multiples of three, print Fizz (instead of the number)
* - for multiples of five, print Buzz (instead of the number)
* - for multiples of both three and five, print FizzBuzz (instead of the number)
*/

Solution

/**
* Print the integers from 1 to 100 (inclusive)
* But:
* - for multiples of three, print Fizz (instead of the number)
* - for multiples of five, print Buzz (instead of the number)
* - for multiples of both three and five, print FizzBuzz (instead of the number)
*/
for (let index = 1; index <= 100; index++) {
let result = '';

if (index % 3 == 0) result += 'Fizz';
if (index % 5 == 0) result += 'Buzz';

if (result == '') result = index.toString();

console.log(result);
}
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

I can't believe I'm doing this. There are so many questions that are better than this one, but if you are just starting out in your programming journey, then there is a slight chance that the interviewer just might ask you this particular question. So here we are and let's get started. Here's the classic statement of the SBUs problem. We have to print in images from one to 100, both inclusive and for multiples of three. Instead of printing the integer, we should print phase for multiples of five print buzz, and for multiples of both three

00:32

and five, we should print fbu. Now, whenever you are given a programming challenge, it's always a great idea to visualize it with a few examples. We want to print images like one, two, but when there are multiples of three, for example three and six, we want to print phase. And for multiples of five, like five and 10, we want to print buzz. And for multiples of both three and five, like 15, we want to print fizbos. Now with that example out of the way, let's start solving this problem step by step. First, we have to print editors from one to 100,

01:05

and we can do that with a simple fall loop that starts at one and terminates before 1 0 1 and increments by one in each iteration. A naive approach would be to take the various conditions and map them into simple if else blocks. So if it is divisible by three, we print fiz. If it is divisible by five, we print buzz. And if it is divisible by both three and five, we print fbu. Otherwise we log the integer. However, this is not a correct solution and we can see that when we execute the program for the case when the number is divisible by both three and five.

01:37

Instead of logging fizz buzz, it's logging fizz. And this is a key mistake that a lot of beginning developers make. Fundamentally, the key realization that is missing over here is that the three conditions are not mutually exclusive. If something is a multiple of both three and five, it is essentially also a multiple of three and also a multiple of five. Now, once you make that realization, it's pretty straightforward to come up with a solution. We first check if it's a multiple of both three and five, and in that case print FPAs

02:08

and then jump to the more loose cases of just three and five di visibility. And of course, this works as expected logging fbu for 15 and phase and buzz for three and five. Now there is a general programming pattern over here, and that is that when you have an overlap of conditionals, always do the specific case first and then handle the loose cases later. Now, this is definitely a correct solution and whenever given a choice, a correct solution is better than no solution, but this is not the ideal solution. So let's jump back to the code and discuss how you can improve it further.

02:41

Now, there are a few things that are not ideal about this code. First off, there is duplication of the checks with person three and person five going on over here, and we could fix that by storing them in temporary variables. But a bigger realization here is that we are using a lot of repeated console log statements. If we take a closer look at the problem statement, note that there is always a print happening in all the conditions. Once you make that connection, even a bigger realization is that three is always mapping through the output. Phase five is always mapping to the output plus. So let's take a look at how we can take

03:16

advantage of this fact. With code. First, we always have to log some string, so let's create a variable to store that result and remove the duplication of console log to a single console log of the result. Next, we simply amend result, and if the index is divisible by three, we amend phase. And if it is divisible by five, we amend buzz. And this takes care of all the three main conditions. Three gets mapped to fizz, five gets mapped to buzz, and three combined with five gets mapped to fizz buzz. And now for the outlier condition,

03:48

when it is not too visible by three or five, we always want to print the incoming index and we can do that with a simple assignment. And of course it works as expected, but this time the program is much simpler because it is not a blind interpretation of the problem statement, but instead uses some intuitive facts about the inputs and the outputs. Now as a bonus, bonus point, one thing that is great about this particular implementation is that it is easily expendable to other multiple checks. For example, for multiples of seven, if you wanted to print more, we can add that quite easily.