How to approach and solve the FizzBuzz problem with JavaScript.
I only did a few interviews before I got my first Junior Developer position but they all had one thing in common: they included a coding challenge. Sometimes these were live coding challenges where I had to talk through my thought process and other times I was shuffled away to a dark room or cupboard to complete the task. I found the live coding problems pretty daunting, trying to keep my mind on the problem at hand whilst also explaining the spaghetti-like thought process I have when being presented with a problem. The challenges ranged from moving and reformatting a navigation bar from the left hand side of a web page to the top, all the way to writing a back-end script for handling a form submission - on paper. And also, I had the classic FizzBuzz challenge.
What is Fizzbuzz?
For those who haven’t heard of FizzBuzz before it’s a word game supposedly played by children in the UK (although I went to school in the UK and don’t ever recall playing it). Players take it in turns to count incrementally and replace the number with the word Fizz if the number is divisible by 3 and Buzz if it’s divisible by 5. If the number is divisible by both 3 and 5 - you guessed it, the child has to say FizzBuzz. Throughout the years it’s become common to use the FizzBuzz problem and slight variants of it to test whether a potential new hire has what it takes to solve problems and also how they do it.
Where did FizzBuzz come from?
Let’s rewind over 10 years to a blog post by a gentleman named Imran Ghory who wrote about using the idea of the FizzBuzz game to root out people who can’t code good and do other stuff good too. Imran used the below problem to test developers at interview to see if they could solve a simple problem in code:
Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.
This is pretty much the exact task I got set in one particular job interview. I got given a laptop with nothing but a text editor setup (it was Atom if I recall) and asked to create the above program. Before you read any further, i’d really encourage you to open your dev tools and give this a go, it’s surprising how much it can make you think, unless you’ve completed it before and then you’re probably thinking “Why am I doing FizzBuzz again?”
Writing out FizzBuzz on paper (pseudocode)
I didn’t in my interview but it’s possible you might get asked to write out your solution on paper, using pseudocode. This can be really helpful to get your head around as once you’ve have defined what the structure of the program is like, you shouldn’t have any problem converting this to JavaScript, Java, C or Assembly. Let’s break down the steps with pseudcode for each part: Write a program that prints the numbers from 1 to 100 for number=1 to 100: ** print number ** But for multiples of three print “Fizz” ** If number can be wholly divided by 3** then print Fizz for the multiples of five print “Buzz”. If the number can be wholly divided by 5 ** then print Buzz** For numbers which are multiples of both three and five print “FizzBuzz” ** If number / 3 and number / 5 doesn’t leave a remainder** ** then print FizzBuzz** So the overall psuedocode would look like this: for number=1 to 100: ** If number can be wholly divided by 3** then print Fizz ** If the number can be wholly divided by 5** ** then print Buzz** ** If number / 3 and number / 5 doesn’t leave a remainder** ** then print FizzBuzz** Otherwise ** then print number** As mentioned, this wasn’t the task in the interview I attended but I have heard others being asked to just write pseudocode rather than actual code.
Example Fizzbuzz JavaScript solution
Here’s an example fizzbuzz JavaScript solution which I may or may not have used in my interview:
for(var i=1; i<=100; i++){
var str = '';
if(i % 3 === 0){
str+='Fizz';
}
if( i % 5 === 0) {
str+='Buzz';
}
if(!str) {
str=i;
}
console.log(str);
}If you got something different when you tried in your dev tools then that’s fine - there are many different ways to solve FizzBuzz. The above example is really just provided for ease of reading. You can see tons of example solutions on this Gist and even add your own there if you have a different one. If you’re familiar with ES6 and/or higher order functions you’ll probably be able to come up with something far more succinct than the above but try not to make it too obtuse. For example, i’ve seen some solutions since looking at FizzBuzz post-interview that look like this:
console.log(
[...Array(100).keys()].map(n => n + 1).map(n =>
(n % 3 ? "" : "Fizz") + (n % 5 ? "" : "Buzz") || n
).join("\n"));It’s definitely a cleverer implementation but is arguably more complicated and less readable. If you’re going to be getting a job working with other developers, you’ll need to make the code you write clear, extensible and maintainable. My bet is, if there is someone technical who understands code interviewing you, they will be looking for things such as this with your FizzBuzz solution.
Conclusion
I’m not suggesting you memorise a solution to the FizzBuzz challenge but being familiar with it and potential ways to solve it will definitely prepare you for an interview. Don’t forget, interviewers might be sneaky and mix up the divisors and/or rules for displaying the text. In my interview, I actually created a function that allowed you to specify the divisor numbers so the same program could be run with different values. Think about:
- Readibility - would another developer be able to understand what’s going on easily?
- Extensibility - if the rules of the game change, can the code be easily amended / updated ?
- Maintainability - Can the code be re-used in other parts of a larger application so it doesn’t have to be copied?
Got your own FizzBuzz solution? Post it in the comments below!