Example Whiteboarding Interview
Get the Question
My whiteboarding buddy and I retrieve a question from the list. I found one from https://github.com/h5bp/Front-end-Developer-Interview-Questions. The question reads:
Create a for loop that iterates up to 100 while outputting "Fizz" at multiples of 3, "Buzz" at multiples of 5, and "FizzBuzz" at multiples of 3 and 5.
Get a Whiteboard
Check!
Find a Friend
I'll be the interviewer, and Jonathan (pictured) will be the interviewee. Hi Jonathan!
Pick a Problem and Define
Our problem is:
Create a for loop that iterates up to 100 while outputting "Fizz" at multiples of 3, "Buzz" at multiples of 5, and "FizzBuzz" at multiples of 3 and 5.
Jonathan asks questions to further define the problem.
Jonathan (Interviewee): Do the numbers need to be outputted if they're not a multiple of 3 or 5?
Me (Interviewer): Yes, please output them in a console.log statement.
Jonathan: Should I assume all the output will be in a console.log?
Me: That is correct.
Jonathan: I'll start the numbering at 1, since we're not indexing but counting.
Me: Sounds good.
Jonathan: Would I also need to print out all the other numbers if they are not multiples of 3 or 5?
Me: Yes, please.
Think
Jonathan thinks about the problem for a bit. He's already starting to come up with a solution and starts writing out some of his thoughts on the board.
Write Code and Syntax
Since Jonathan can already write out the problem without needing to pseudocode, he will start writing out his code on the board.
Jonathan explains his code as he writes it, facing the interviewer and talking through his thought process.
The first part of the whiteboard code looks like the following:
for (var i = 1; i <= 100; i++) {
if (i % 15 === 0) {
console.log("FizzBuzz");
}
}
Jonathan: I start off with a for loop, as the question mentions. The iterator starts at 1, like I mentioned earlier. The loop condition will end at and include 100 and increment by 1 at each loop. Within the loop, I have a conditional statement that will print "FizzBuzz" if any number has a remainder of 0 when divided by 15.
Me: Why 15?
Jonathan: Fifteen is a common factor between 3 and 5, so it makes the syntax simpler. That is, anything that is divisible by 3 and 5 is also divisible by 15. I could have easily also used the following:
if (i % 3 === 0 && i % 5 === 0) {
console.log("FizzBuzz");
}
However, I feel my solution is more concise.
Me: Great!
Jonathan continues writing on the board and explaining his code:
for (var i = 1; i <= 100; i++) {
if (i % 15 === 0) {
console.log("FizzBuzz");
} else if (i % 3 === 0) {
console.log("Fizz");
} else if (i % 5) === 0) {
console.log("Buzz");
} else {
console.log(i);
}
}
Jonathan: I'm now adding the conditional statements for "Fizz" and "Buzz." I set these conditions after "(i % 15 === 0)" because otherwise the first condition would never be met. After all, 15 is a common factor between 3 and 5.
Me: Excellent!
Jonathan: I then outputted the integer in an else statement, since that number doesn't meet any of the conditions. This algorithm is now complete and should (1) print out the numbers that are not divisible by 3 or 5 to the console, from 1 to 100; (2) print out "Fizz" for numbers that are divisible by 3, "Buzz" for numbers that are divisible by 5, and "FizzBuzz" for numbers that are divisible by both 3 and 5.
Me: Excellent. You seem to have really grasped this algorithm and explained it very eloquently.