JavaScript — Breaking Down The Shortest Possible FizzBuzz Answer

Breaking down the shortest FizzBuzz answer and understanding how it works

If you’re new to programming, FizzBuzz is a classic programming task, usually used in software development interviews to determine if a candidate can code. Here’s the classic FizzBuzz task:

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

Sounds easy enough, right?

Since we just need to loop through each number from 1 to 100, one of the simplest FizzBuzz solution 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);
}

Awesome! 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:

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

In this article we’re going to break down what appears to be the shortest solution to FizzBuzz (that I could find)

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

Pretty fun, right?

Disclaimer #1: This is probably not the best way to solve FizzBuzz — Nor am I claiming that it is. This article is meant to help you break down complex looking code and understand what it is doing.

Disclaimer #2: Yes, you can remove let from the solution above to make it shorter. However, it will then not work in a 'use strict' environment.

Cool, now that we have that out of the way, open up your browser console: Mac: Command+Option+J, Windows: Control+Shift+J

And copy/paste in the code. I want you to see that it actually does the exact same thing as the other code above — it solves our FizzBuzz solution! Perfect.

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.

Again, here’s what we’re starting with:

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

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

Lets take a deeper look at our first set of parenthesis within our console.log:

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

This code makes use of the ternary operator. Recall that the syntax for a ternary looks like this:

condition ? value if true : value if false

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.

Now that we know what is happening first, we can dig into our ternary condition:

++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. If you need a reminder on truthy/falsy values and type coercion, check out this article.

1 ends up not being a falsy value and therefor coerces into a truthy value.

We now have:

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
  )

Awesome!

We can now do the same thing with the code within our second set of parenthesis. Everything is the same with three exceptions:

• We’re not incrementing i. We already did that for this iteration of the loop.
• Instead of dividing by 3, we divide by 5.
• If the ternary is falsy, we return buzz instead of fizz.

Here’s what the code looks like:

i%5 ? '' : 'buzz'

First we check to see what the remainder of 1/5 is. It is 1. 1 is a truthy value, and thus a blank string '’ is again returned.

Now that we have both of our parenthesis evaluated, our equation simplifies drastically:

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)

Recall from the beginning that i is simply the number 1 on this iteration, so that is what is logged out to the console!

If you think back to the rules of FizzBuzz, this answer makes logical sense and is correct!

Awesome! You’ve now successfully iterated through one of the 100 loops in the shortest FizzBuzz answer!

Taking it one step further

Our code executes a little differently when ++i is divisible by both 5 and 3. Lets walk through an example that illustrates this.

Here’s where we’re starting. Consider i equal to 14.

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

Initially, we’ll increase i by 1 to 15. Now we’ll test to see what the remainder of 15/3 is:

15 % 3 ? '' : 'fizz'

As three divides into 15 an equal number of times, the remainder this time is 0.

Since 0 is one of the seven falsy values in JavaScript, our ternary will return fizz.

We’ll now add fizz to the result of the second set of parenthesis:

15 % 5 ? ‘’ : ‘buzz’

15/5 also has a remainder of zero. Since 0 is falsy, buzz is returned.

Here’s where we are now:

console.log( 'fizz' + 'buzz' || i )

Which becomes:

console.log( 'fizzbuzz' || i )

Since a non-empty string is a truthy value, our OR operation will short-cirucit and return ‘fizzbuzz’ , which will then be logged to the console.

console.log('fizzbuzz')

And there you have it! You’ve now walked through two very different iterations of the shortest FizzBuzz solution!

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

JavaScript doesn’t have to be scary. If you ever run across code like this that you don’t understand, just try and break it down into smaller and smaller pieces until you’re able to make sense of what you’re looking at!

Go forth and code!

Closing Notes:

Thanks for reading, and hopefully this was helpful! If you want more tips and practice on how to pass a JavaScript Interview, check out: Ace Your Javascript Interview — Learn Algorithms + Data Structures. On the other hand, if you’re just getting into Web Development and want to finally learn/understand it, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇