Compact vs Readable Code

Happy Friday everyone! I'm gonna be honest y'all, I'm picking up a new cat today so my focus is not the best. His name is Bumble Bee and he's the cutest:

So in light of this, we're going to wait to do part VI of the binary tree series, since I don't have time to do thorough research. Have a bit of an opinion piece instead!

This week I was sent an interesting interpretation of the classic FizzBuzz challenge. For those who do not know, FizzBuzz is a classic algorithm challenge, that goes like so:

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

This article provides an extremely concise means of solving the problem:

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

It then runs through exactly what's going on there, because frankly it is a pretty intimidating looking jumble of code. But the feather in its cap here is just how short it is. You could say that it is extremely simple, since it uses only one line of code.

On the other hand, if you define simplicity around readability, I would consider it very complex. A more traditional, but longer, solution looks like this (as provided in the same article):

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);
}

This code is much more readable, as a human. If this, do this, else if this do this, and so on. More lines of code are used, but it allows for much more approachable code.

Some will tell you that the best code is code that uses as few lines as possible.

Some will tell you that the best code is code that is readable.

While I certainly agree that you should make sure your code is tight, concise, not bloated, etc, I do not think that that should be taken so far as to sacrifice readability. If I'm new to your code, I should be able to walk in and understand what's going on easily.

So far as I can tell, there is no performance difference between the above two samples of code, or if there is one it's negligible (if someone reads this and does know a difference please let me know, I'd be super curious to see where the difference lies! That's an area I'm still growing my knowledge). Given that, I'll take the readable version any day.

I really enjoyed getting to see this - I learned something new about console.log and the || operator for one, and it was a neat thought experiment to see how this solution could be distilled down.

Still, at the end of the day, I think I'll stick to my ifs and switches!