JavaScript — Breaking Down The Shortest Possible FizzBuzz Answer

JavaScript — Breaking Down The Shortest Possible FizzBuzz Answer

FizzBuzz is a classic programming task, usually used in software development interviews to determine if a candidate can code.

The Question

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 that are multiples of both three and five print “FizzBuzz”.

We just need to loop through each number from 1 to 100. So, one of the simplest solutions can be achieved with a for loop:

for (var i=1; i < 101; 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);
}

If you run this code in your console, you’ll see this works just fine. Here’s a snippet of the first 16 iterations through the loop:

FizzBuzz Output

There are probably hundreds of different ways to solve FizzBuzz. Some are cleaner, faster, and better than others. Some are just plain crazy.

for(let i=0;i<100;)console.log((++i%3?'':'fizz')+(i%5?'':'buzz')||i)

JavaScript Concepts You Need to Understand

This code utilizes many different JavaScript concepts to solve FizzBuzz. I’ve written about all of these concepts in the past — so I’ll give minor explanations in this article, but feel free to use these links to further your understanding if something isn’t entirely clear:

  • Logical OR / Short Circuit Evaluation
  • The Ternary Operator
  • Truthy & Falsy Values
  • The Increment Operator
  • Type Coercion

Breaking Down The Solution

The first thing we’ll do to better understand our code is to space things out a bit.

Here’s the same code with some breathing room added:

for(let i=0;i<100;)
  console.log(
    ( ++i%3 ? '' : 'fizz' ) + ( i%5 ? '' : 'buzz' ) || i
  )

Ok. Now we can start to see what our code is attempting to do. We clearly have a for loop that goes from 0 — 100. And within our for loop, we are attempting to console.log something.
Let’s take a deeper look at our first set of parenthesis within our console.log:

++i%3 ? '' : 'fizz'

If we recall the syntax for ternary operators, it is:

condition ? true result : false result ;

In this example, the condition that we’re testing is ++i%3. If that is true, then '' will be returned. If ++i%3 is false, then fizz will be returned.

++i%3

Above, the increment operator is being used. Using the operator before the operand ++i will increment the operator i before returning it. This means that on our first pass through the loop, i will increase from 0 to 1.
Now that i has increased to 1, our code will then check to see if 1%3 is true or false.
1 % 3 utilizes the remainder operator. The remainder operator returns the remainder of one number divided another. In this case we’ll check to see what the remainder of 1/3 is.
The remainder is 1 and thus our ternary condition is now simplified to 1:

1 ? '' : 'fizz'

A ternary condition is a Boolean Context. This means whatever we are testing must coerce to a true or false value.

true ? '' : 'fizz'

Since we have a true value in our ternary condition, the first expression is returned and the result of our first set of parenthesis is a blank string: ''.

Here’s where we’re at now:

for(let i=0;i<100;)
  console.log(
    ( '' ) + ( i%5 ? '' : 'buzz' ) || i
  )
i%5 ? '' : 'buzz'
console.log( '' + '' || i )

Since an empty string plus an empty string is still an empty string, our code will reduce further:

console.log( '' || i )

Now our code utilizes the JavaScript Logical OR Operator ||. Because an empty string is one of the seven falsy values in JavaScript, we skip over that operand entirely and accept whatever the second operand is. In this code, it is i.

console.log(i)