Adventures In FizzBuzz

29th February 2020

Tests for programmers in an interview process are not uncommon. For the last couple of years I have asked a quick pre-interview question to junior developers to see what sort of stuff they come up with.

As I don't want to set any developer a task that will take longer than absolutely needed I opted to set a very simple task for them. Commonly known as "FizzBuzz", this task is as follows.

"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"."

The expected output for this would be something like this.

  1. 1
  2. 2
  3. Fizz
  4. 4
  5. Buzz
  6. Fizz
  7. 7
  8. 8
  9. Fizz
  10. Buzz
  11. 11
  12. Fizz
  13. 13
  14. 14
  15. FizzBuzz
  16. 16
  17. 17
  18. Fizz
  19. 19
  20. Buzz

This task is particularly important as it shows knowledge of loops, if statements, the modulus operator and of printing output. The modulus operator is especially important as it is something that not everyone comes across this in their first week of development.

I set this task at least a week before the interview so they generally have lots of time to work on it. It should take a junior developer around 30 minutes to complete this task. I also don't stipulate what language the task should be in, so I get a variety of responses in JavaScript and PHP, although JavaScript seems quite popular so that's generally the language of choice.

I thought I would post some of the responses to this task in a post as a way of showing the varying responses I get, although I will absolutely name no names.

The first example was written starts off with a prompt to ask the user what number they should count up to. This is a nice touch and it even shows a little personality in the effort. The good thing is that this produces the correct result.

  1. var num = prompt("Enter a number and see the result in the bottom right window :) ");
  2. for (i = 1; i <= num; i++) {
  3.  
  4. if (i % 15 == 0) {
  5. document.write("FizzBuzz");
  6. document.write("<br>");
  7. } else if (i % 3 == 0) {
  8. document.write("Fizz");
  9. document.write("<br>");
  10. } else if (i % 5 == 0) {
  11. document.write("Buzz");
  12. document.write("<br>");
  13. } else {
  14. document.write(i);
  15. document.write("<br>");
  16. }
  17.  
  18. }

Next is perhaps the strangest submission I've ever seen. Thankfully, it does produce the correct result, but the two DOCTYPE tags and even the closing DOCTYPE at the end really did make this stand out. When I asked the candidate about how they had but this together they said that they "didn't know". I can expect that a junior programmer wouldn't know everything, but there is something very cargo cultish about this candidates approach here. They have obviously copied and pasted much of this from somewhere.

  1. <!DOCTYPE html>
  2. <html>
  3. <h2>TEST</h2>
  4. <body>
  5. Javacsript FizzBuzz
  6.  
  7. <DOCTYPE! hmtl>
  8. <html>
  9. <body>
  10.  
  11. <h2>
  12. FIZZBUZZ
  13. </h2>
  14.  
  15. <p id=ptag>
  16.  
  17. </p>
  18.  
  19. <script>
  20. const ptag = document.getElementById('ptag');
  21.  
  22. let i=1;
  23.  
  24. for (let i=1; i<=100; i++){
  25.  
  26. if (i%15 ===0){
  27. ptag.innerHTML += "FizzBuzz, ";}
  28.  
  29. else if (i%3 ===0){
  30. ptag.innerHTML += "Fizz, ";
  31. }
  32. else if (i%5 ===0){
  33. ptag.innerHTML += "Buzz, ";
  34. }
  35. else {ptag.innerHTML += i+ ', ';}
  36.  
  37. }
  38.  
  39. </script>
  40.  
  41. </body>
  42.  
  43.  
  44. </html>
  45.  
  46. </DOCTYPE!>
  47.  
  48.  
  49. </body>
  50. </html>

Perhaps the shortest submission I've ever seen is this one. It produces the correct result, although you need to go searching for it in the console output. This let to a discussion about code that works whilst also being readable. This took me a few moments to actually parse what is going on.

  1. for(let i=0;i<100;)
  2. console.log(
  3. ( ++i%3 ? '' : 'Fizz' ) + ( i%5 ? '' : 'Buzz' ) || i
  4. )

This next one is very a very textbook approach to this problem, and the result produced the correct output. Perhaps a little too much so as when I asked the about how it worked in the interview they couldn't really tell me. This is an indication that they just copied the test from somewhere.

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. </head>
  8.  
  9. <body>
  10. <script>
  11. var i;
  12.  
  13. for (i = 1; i <= 100; i++) {
  14.  
  15. if (i % 3 == 0 && i % 5 == 0) {
  16. document.write("FizzBuzz" + "<br>");
  17. } else if (i % 5 == 0) {
  18. document.write("Buzz" + "<br>");
  19. } else if (i % 3 == 0) {
  20. document.write("Fizz" + "<br>");
  21. } else {
  22. document.write(i + "<br>");
  23. }
  24. }
  25. </script>
  26.  
  27. </body>
  28.  
  29. </html>

Here is an approach that creates an array and then pushes replaces the items in the array with the correct items of text. It produces the correct result, but is a little difficult to see clearly what is going on. It also uses the method of injecting the output into the console.

  1. let array = [];
  2. for (let i=1; i <=100; i++) {
  3. array.push(i)
  4. }
  5. let newArray = array.map(num => {
  6. return (num % 15 === 0) ? 'FizzBuzz' : (
  7. (num % 3 === 0) ? 'Fizz' : (
  8. (num % 5 === 0) ? 'Buzz' : num))
  9. })
  10. console.log(newArray)

Finally, for the interview responses, we have the following, which actually produces an incorrect result. The first 15 numbers are correct, but then the process breaks down a little and adds Fizz and Buzz when there shouldn't be one. It's clear that an effort was made, but the eventual output was a little confused.

  1. for (let i = 1; i<= 100; i++){
  2. if (i % 3 == 0){
  3. document.write("Fizz!" + "<br>")
  4. }
  5. if (i % 5 == 0){
  6. document.write("Buzz!" + "<br>");
  7. }
  8. if ((i % 3 == 0) && (i % 5 == 0)){
  9. document.write("Fizzbuzz!" + "<br>");
  10. }
  11. else{
  12. if (i % 3 && i % 5){
  13. document.write(i + "<br>");
  14. }
  15. }
  16. }

Finally, as a bit of fun, I recently came across this example from a Kevlin Henney talk a while ago. Is it s Python script that essentially uses a random seed to generate the FizzBuzz structure. This is fascinating as toy wouldn't normally expect random to be used in this way.

  1. import random
  2.  
  3. for i in range(0, 100):
  4. if not i % 15:
  5. random.seed(1178741599)
  6. print [i+1, "Fizz", "Buzz", "FizzBuzz"][random.randint(0,3)]


Ultimately, the question is if setting this kind of pre-interview test useful? I think it has merit, although it isn't about the raw coding ability of potential candidates and it certainly doesn't preclude anyone from being interviewed. For me, the test is meant to elicit a conversation about what they have written and how they have written it. The resulting conversation about the code and how good they are at explaining themselves is the most important part of this. A good candidate should be able to clearly explain what they did to get the result they handed over. Talking about the coding task is also only a part of the interview process as there are a great many other things that go towards the hiring of a new developer.

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.