Understand the FizzBuzz coding problem and its solution
The FizzBuzz problem is commonly presented as the lowest level of comprehension required to illustrate adequacy in computer programming.
In this lesson you learn about the problem as well as its solution in TypeScript. We will also cover some tricks on approaching the problem and coding interview questions in general.
[00:00] The statement for the fizz buzz problem specifies that you need to print integers from 1 to 100. For multiples of three, instead of the number, you should print fizz. For multiples of five, instead of printing the number, you should print buzz. If the number is divisible by both three and five, instead of printing the number, you should print fizz buzz.
[00:23] It is always a good idea in a coding interview to do a quick run of the expected result without actually writing any code. Here, you will discuss that the expected output should be one, two, fizz instead of three, four, buzz instead of five, and so on.
[00:42] With this understanding out of the way, we can start writing some code. Let's pick the first requirement. Write a program that prints integers from 1 to 100. We can do that easily with the "for" loop. We will terminate the loop right before 101, and we will start the loop at 1.
[01:01] At each step in the loop, we will log out the index. If you run the application, you can see that it works as expected, printing 1 till 100, inclusive. The next requirement is that for multiples of three, we should print fizz. We can do that easily with an "if...else."
[01:18] If the index is a multiple of three, we will print out fizz, else we will print out the index, same as before. Now, if we run our application, we can see multiples of three getting replaced. The next requirement is that for multiples of five, we should print buzz. Just another "else...if" to see if it is a multiple of five, and we log out buzz.
[01:43] Now we are down to the final requirement, that for multiples of both three and five, we shall print fizz buzz. Following our previous pattern, you might be tempted to do another "else...if" to check for multiples of three and five, and log out fizz buzz.
[01:59] However, you should realize that if any of the previous conditions are true, then this combined condition check will never execute. We simply move this combined condition check to the top. The program specification is intentionally ordered in this way to catch unaware programmers off-guard, but fortunately, you will not be one of them
[02:23] If you run the application, you can see that it is a working solution to the fizz buzz problem, logging out fizz, buzz, and fizz buzz as required. A common additional request is to only do the multiple detection math once.
[02:40] It is quite easy to do by simply moving out these fizz and buzz detection expressions and storing their results in semantically named variables isFizz and isBuzz. Next, we simply use these variables instead of using the expressions.
[02:57] Another common additional request is to remove the console log duplication. You can do that by creating a variable for the result, and then storing the result and this variable for each condition, and finally logging out the result variable.
[03:12] Another thing the interviewer might request is to remove the mutation of the result variable and present a solution with the more functional approach. They might even give you the hint to use the conditional ternary operator.
[03:23] An "if...else" chain with only single assignment statements can easily be converted into a ternary chain. We will go ahead and assign the result to an expression driven by the conditional ternary operator.
[03:38] If isFizz and isBuzz, then the expression should evaluate to fizz buzz. Otherwise, if isFizz, then the expression should evaluate to fizz. If isBuzz, then the expression should evaluate to buzz.
[03:58] Finally, if none of these conditions were true, it should evaluate back to the index. Then we simply log out the result variable. Now, since there is no lazy assignment to the result variable, we can make it const as well. The code still functions the same as before.
http://alm.tools/ < An IDE I wrote just to get a highly deterministic TypeScript experience 🌹
Cool! Thanks for the super-prompt reply.
I agree with Austin, the ternary version is unreadable compared to the if else version.
Nice!
That ternary as ugly as hell though and I hope that no interviewer would want to see that in his codebase.
I agree with Austin, I used a nested ternary like that before and I was questioned about its readability by a fellow developer. Also, a nested ternary is a lint error too and is not recommended
Please don't use nested ternary operator on interviews!
The description for this lesson says "...as well as its solution in TypeScript", but that's definitely not covered in this video or the attached code.
you don't need to use index % 3 === 0 && index % 5 === 0 for fizzbuzz, you can simply use index % 15 === 0, then log fizzbuzz, because 15 is the least common multiple for 3 and 5
Thanks for this video, but what about typescript ? This example could've been shown in vanilla js, otherwise you should be placing types to see the value of using typescript.
Thanks for this video, but what about typescript ? This example could've been shown in vanilla js, otherwise you should be placing types to see the value of using typescript.
Agree.
and as for me this solution is more readable and sleeker
for (let i = 1; i <= 100; i++) {
const isBuzz: boolean = i % 5 === 0;
const isFizz: boolean = i % 3 === 0;
let result: string = '';
if (isFizz) result = 'Fizz';
if (isBuzz) result += 'Buzz';
console.log(result || i);
}
in vs code or atom is there function Live Demo such as ALM ?
The nested ternaries is anti patten and really bad maintenable code. Avoid it.
This is preferred - clear for understanding and good for debugging.
for (let index = 1; index < 101; index++) {
const isFizz = index % 3 === 0;
const isBuz = index % 5 === 0;
let result = index;
if (isFizz && isBuzz) {
result = 'FizzBuzz';
} else if (isFizz) {
result = 'Fizz';
} else if (izBuzz) = {
result = 'Buzz';
}
console.log(result);
}
What editor/theme are you using?