The fizzBuzz word game using ternary operators in JavaScript

A ternary conditional statement goes like this:

condition result ? do this if true : do that if false;

condition 1 ? condition 2 ? do this if both true : do that if only condition 1 true : else do something else;

If we want a third alternative for condition 2 true, we add another ternary operator as the last expression:

condition 1 ? condition 2 ? do this if both true : do that if condition 1 true : condition 2 ? do this if true : else do something else;

multiple ternary operator JavaScript

On the following fizzBuzz game I’ve used a multiple ternary conditional operator as an alternative to the regular if, else if, else. Not that I prefer seeing it this way, but as a curiosity and to illustrate¬† ternary operation processing for multiple conditional outcomes.

var fizz = "Fizz";
var buzz = "Buzz";
var counter = " ";
for (var i = 1; i < 21; i++) {
  counter = !(i % 3) ? !(i % 5) ? fizz + buzz : fizz : !(i % 5) ? buzz : i;
  console.log(counter);
}

We already know how the ternary logic works. The next thing to find out is the meaning of that exclamation point before a boolean expression wrapped in parentheses, like for example !(1 % 3)?

The exclamation symbol before parentheses negates the statement in the sense that in, for example (5 % 3) having 2 as a remainder will result in a boolean “true”, and !(5%3) will result in “false” because it is the opposite of (5%3). Viewing it from a different perspective, when i is 3, an expression such as (3%3) will result in zero and therefore false, but by inverting it like !(3%3), the result will be true, which is the outcome that we want to get fizz.

So JavaScript will replace !( i % 3) for true or false and the result of the ternary expression may be as follows:

count = (i % 3 is true) ? (i % 5 is true ) ? fizz + buzz : fizz : (i % 5 is true) ? buzz : i;

To further understand this expression we need to consider that a ternary expression evaluates from right to left.

On the extreme right side, (i % 5 is true) ? buzz : i gets replaced by either buzz or i, whichever applies,
resulting in count = (i % 3 is true) ? (i % 5 is true ) ? fizz + buzz : fizz : i ( if false, as an example).

Then if (i % 3 is true) ? (i % 5 is true )? are both true, the counter’s end result is fizz + buzz.
else if only (i % 3 is true) ? is true, the counter result is fizz.

Lastly, if both are false the counter result is i which corresponds to a regular number.

test, test, test!!!

Advertisements

Author: tarau

technical writer, web technologies

9 thoughts on “The fizzBuzz word game using ternary operators in JavaScript”

    1. HTML, CSS and JavaScript is the trio that makes it all happen. HTML builds the structure of a page, CSS makes it beautiful, JavaScript makes it dynamic and takes it from being a static page to become a real interactive experience. JavaScript is definitely the next step but it does not replace HTML, it just makes it better. Hope it helps.

      1. So basically, I can insert JavaScript code into HTML/CSS and make it more dynamic?
        Is JavaScript what makes things like comment boxes possible?

        P.S. sorry if I’m being annoying, I was being serious when I said I’ve NEVER used JavaScript before, but I’ve always been curious about it!

      2. Yes, JavaScript is inserted into HTML just like you do with CSS. If you haven’t done so, I recommend to do a JavaScript introduction course at Codecademy ( codecademy.com – I’m a moderator there). It is free and a great experience. As for being annoying, not at all! I answer questions all day long. It’s a win-win transaction when someone asks a question and someone else answers. We both learn.

      3. I might take that course! I’m currently doing a complete overhaul of my personal website and I think JavaScript might be able to help me take it to the next level!

  1. hello , i want to ask you Question i learned java script but when i go to any website to practice and do some Exercises i can’t do it and when i check the answer i see codes never seen before i don’t know maybe because its first time i see it with html ? i didn’t learn HTML before java script i think this is mistake

    sorry English is not my 1st language

    1. You are right, in order to use JavaScript you really need to learn HTML. Try the HTML free course at codecademy.com. You could also read my eBook “HTML for Everyone” and then “JavaScript innerHTML”. They will help.

  2. awesome explanation. this has to be one of the slickest solutions for fizzbuzz out there. really helps to understand ternary operators also. thanks!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s