Understand the FizzBuzz coding problem and its solution

Share this video with your friends

Send Tweet

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.

Christopher Miller
Christopher Miller
~ 4 years ago

What editor/theme are you using?

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 4 years ago

http://alm.tools/ < An IDE I wrote just to get a highly deterministic TypeScript experience 🌹

Christopher Miller
Christopher Miller
~ 4 years ago

Cool! Thanks for the super-prompt reply.

Karstacian
Karstacian
~ 4 years ago

I agree with Austin, the ternary version is unreadable compared to the if else version.

Vamshi
Vamshi
~ 4 years ago

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

Yevgeniy
Yevgeniy
~ 4 years ago

Please don't use nested ternary operator on interviews!

Brandon Aaskov
Brandon Aaskov
~ 4 years ago

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.

Enoh Barbu
Enoh Barbu
~ 4 years ago

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

Alan Campora
Alan Campora
~ 3 years ago

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.

Actum
Actum
~ 3 years ago

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);
}
Nikita
Nikita
~ 2 years ago

in vs code or atom is there function Live Demo such as ALM ?

~ 2 years ago

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);
}