FizzBuzz—like it or love it, it's a common coding challenge. How can we add a little panache to solving it using JavaScript?

FizzBuzz. Some view it as a classic rite of passage, right up there with “Hello, World!” Others find it staid and boring if a good exercise in loops and logic. Regardless of your opinion, it’s undeniable that FizzBuzz is a widespread benchmark in our industry. I first encountered it in my undergraduate days where, despite pursuing a degree in music, my love of learning found me taking (and loving!) a year of Java for beginners. It’s been over a decade since then (and never have I begun to feel my age more than writing those seven words, knowing I was an adult at the time), and I was recently asked to solve FizzBuzz again—twice, in fact. Once using JavaScript, and once using C#.

Today, I’d like to discuss the first of these occasions, which came up during my time with Coder Foundry. I was asked to create an applet taking in end, fizz, and buzz values from the user, solve using JavaScript, and output to a webpage. Ever one for a challenge, I decided to do add a little panache by taking in a starting value as well, using one-line ternary logic and a recursive function, and utilizing DOM manipulation to color the output. The full applet, along with an explanation, can be found here. But for today’s purposes, I want to focus on the FizzBuzz logic itself. Please note the entry function that calls the function below first validates the provided user values as integers (i.e., whole numbers), the start and end values as being greater than 0, the start value as being smaller than the end value, and the end value as being less than or equal to 3000. Let’s dive in:

function FizzB(fizz, buzz, start, end, result = []) {
    let value = (start % fizz == 0 ? 'fizz' : '') + (start % buzz == 0 ? 'buzz' : '') || start;
 
    result.push(value);
    start++;

    if (start > end) return result;
    else return FizzB(fizz, buzz, start, end, result);
}

The middle two lines handle pushing the variable ‘value’ (we’ll come back to this) onto the array ‘result’ and iterating ‘start,’ which serves as the index of this recursive loop as well as the number being evaluated. The last two lines handle the recursion itself: If ‘start’ is larger than ‘end’ (not equal to; remember, we have to process the end value as well!), then the array ‘result’ is returned to the entry function. Otherwise, the function calls itself, passing the ‘fizz,’ ‘buzz,’ and ‘end’ values, the ‘result’ array, and ‘start,’ which having iterated, ensures the new call either processes the next number or terminates the recursion.

But what about the first line, the one-line ternary operator logic? Let’s breaking that down: We’re declaring a variable named ‘value’ and assigning it a value. There are three sections to that assignment: Two ternaries and… a || Boolean operator? Let’s put a pin in that and look at the ternaries first. The key to FizzBuzz is the modulus operator used in each of those ternaries. If ‘start’ is divisible by the ‘Fizz’ or ‘Buzz’ values, then the modulus will return a result of ‘0’. Therefore, if start % fizz == 0, then value will be set to the string ‘fizz’, and if start % buzz == 0, then value will have the string ‘buzz’ appended to it; in either case if the modulus is not 0, then the blank string ‘’ is used instead. This handles assessing fizz, buzz, and fizzbuzz states with just two checks.

Is it Fizz or Buzz? Or maybe both?

But what about that || Boolean operator?? Well, JavaScript is a quirky language, and it has six ‘falsy’ values: undefined, null, NaN, 0, ‘’ (an empty string—doesn’t that look familiar?), and obviously false. Assignment logic has an order of operations that runs from left to right, so we are always checking first if ‘start’ is divisible by ‘fizz’ or ‘buzz.’ If so, then by the time we reach the || operator, ‘value’ will either be set to a non-empty string (because it’s fizz, buzz, or fizzbuzz) or will be an empty string (‘’). The former means the right side of the || is not evaluated, and the latter means the || causes ‘start’ to be assigned to ‘value.’ Perfect!

It should go without saying, but this is a flashy way to solve the FizzBuzz challenge. Pull this out of your memory at your peril if you’re asked to solve FizzBuzz on the spot! I hope you’ve enjoyed looking at this unique way of solving this famous coding challenge.