Keff

Posted on Jul 17, 2020 • Updated on Aug 20, 2020

[Challenge] 🐝 FizzBuzz without if/else

#challenge #javascript

This challenge is intended for Javascript, but you can complete it with any language you like and can.

Most of us will know the FizzBuzz game/exercise and probably have done it many times. It should be a simple and straightforward exercise for most developers...

BUT can you do it without using if/else statements?

Challenge Description

Write a program that outputs the string representation of numbers from 1 to N.

But for multiples of 3, it should output "Fizz" instead of the number and for the multiples of 5 output "Buzz". For numbers which are multiples of both 3 and 5, you should output "FizzBuzz".

Curveball: You must not use if/else statements, and ideally, no ternary operator.

Example:

const n = 15;

/* 
Return:
  [
    "1",
    "2",
    "Fizz",
    "4",
    "Buzz",
    "Fizz",
    "7",
    "8",
    "Fizz",
    "Buzz",
    "11",
    "Fizz",
    "13",
    "14",
    "FizzBuzz"
  ]
*/

I will comment my solution in a couple of days.

💪 Best of luck! 💪

Credits:
Cover Image from https://codenewbiesite.wordpress.com/2017/01/29/fizz-buzz/

Top comments (102)

Stephanie Handsteiner • Jul 17 '20 • Edited

Easy, just do it in CSS.

ol {
    list-style-type: inside;
}

li:nth-child(3n), li:nth-child(5n) {
    list-style-type: none;
}

li:nth-child(3n):before {
    content: 'Fizz';
}

li:nth-child(5n):after {
    content: 'Buzz';
}

Needs some Markup to display obviously.

Ben Halpern • Jul 17 '20

Ha!

Sebastian • Jul 18 '20

This is truly ingenious!

Keff • Jul 17 '20

Magnificent! I knew there were going to be really neat solutions!!

Thanks for sharing your solution 💪

Steven vanZyl • Jul 17 '20

The cleanest and best FizzBuzz implementation I know of doesn't use any if statements at all. Actually it doesn't use any control flow at all in most languages.
The approach is fully described here: philcrissman.net/posts/eulers-fizz...

On my Repl.it I also have this same approach implemented in several other languages:
repl.it/@rushsteve1/

Corey Alexander • Jul 18 '20

This was great! Love it when there is a simple probable mathematic solution to these kinds of things!

Keff • Jul 18 '20

Me too, so clean! I love maths but I'm crap at it myself xD

Keff • Jul 17 '20

I did not know about this, thanks for sharing. I will remember this!

Sebastian • Jul 17 '20

function print(max)
{
  for(var n = 1; n <= max; n++)
  {
    ifThenElse(
      n%3 == 0, 
      function() { 
        ifThenElse(
          n%5 == 0,
          function() { console.log("FizzBuzz"); },
          function() { console.log("Fizz"); }
        );
      },
      function() {
        ifThenElse(
          n%5 == 0,
          function() { console.log("Buzz"); },
          function() { console.log(n); }
        );
      }
    );
  }
}

function ifThenElse(i,t,e) {
  while(i)
  {
    t.call();
    return;
  }

  e.call();
}

print(15);

Keff • Jul 18 '20

Neat solution, thanks for sharing it!

Is there a reason you use t.call() instead of calling the function directly t()?

Sebastian • Jul 18 '20

Thanks. Yes, haha, the reason is that my head was a bit worn out so late at night 🤪. I have another improvement, will post it shortly.

Keff • Jul 18 '20

Ohh yup, I know that feeling xD

Sebastian • Jul 18 '20

Here we go. This is a bit more streamlined:

const ifThenElse = (i,t,e) => {
    return () => {
        while(i) {
            t();
            return;
        }

        e();   
    }
};

const printFizzBuzz = (max) => {
  for(let n = 1; n <= max; n++) {
    ifThenElse(
        n%3 == 0, 
        ifThenElse(
            n%5 == 0, 
            () => console.log("FizzBuzz"), 
            () => console.log("Fizz")
        ),
        ifThenElse(
            n%5 == 0,
            () => console.log("Buzz"),
            () => console.log(n)
        )
    )();
  }
};

printFizzBuzz(15);

nastyox • Jul 18 '20 • Edited

logical operators

The second half of an "and" statement only evaluates if the first half is true.

for(var i = 1; i < 100; i++){
    !(i % 3) && document.write("fizz");
    !(i % 5) && document.write("buzz");
    i % 3 && i % 5 && document.write(i);
    document.write(" ");
}

...

for loops

For loops check your second declaration on each iteration. Force it to be false on the second iteration, and you've got something that'll check your condition a single time.

for(var i = 1; i < 100; i++){
    for(var j = 0; !j && !(i % 3); j++) document.write("fizz");
    for(var j = 0; !j && !(i % 5); j++) document.write("buzz");
    for(var j = 0; !j && i % 3 && i % 5; j++) document.write(i);
    document.write(" ");
}

...

arrays

Referencing an index that that exists gives you the value stored there, but referencing an index that doesn't exist gives you undefined. Use an "or" statement to give yourself a fallback value when this happens, and you'll be ready to go.

var fizz = ["fizz"], buzz = ["buzz"];
for(var i = 1; i < 100; i++) document.write((((fizz[i % 3] || "") + (buzz[i % 5] || "")) || i) + " ");

Or, fill an array with your options, and leverage the fact that true can be used as 1 in JavaScript to do some index-selection math.

var arr = [null, "fizz", "buzz", "fizzbuzz"];
for(var i = 1; i < 100; i++){
    arr[0] = i;
    document.write(arr[!(i % 3) + !(i % 5) * 2] + " ");
}

...

try/catch blocks

You can purposefully throw exceptions when a boolean is false by referencing a variable that doesn't exist (the "throwException" variable in this case).

function tryIf(test, pass, fail){
    try{
        !test || throwException;
        (fail || function(){})();
    }
    catch(e){
        pass();
    }
}

for(var i = 1; i < 100; i++){
    tryIf(!(i % 3), function(){
        document.write("fizz");
    });

    tryIf(!(i % 5), function(){
        document.write("buzz");
    });

    tryIf(i % 3 && i % 5, function(){
        document.write(i);
    });

    document.write(" ");
}

...

while loops

This is the same concept as for loops. Force the loop to stop after one iteration (this time with a break), and you've got something that'll check your condition a single time.

for(var i = 1; i < 100; i++){
    while(!(i % 3)){
        document.write("fizz");
        break;
    }

    while(!(i % 5)){
        document.write("buzz");
        break;
    }

    while(i % 3 && i % 5){
        document.write(i);
        break;
    }

    document.write(" ");
}

...

switch statements

Who could forget the classic alternative to if statements? Technically not even cheating!

for(var i = 1; i < 100; i++){
    switch(i % 3){
        case 0:
            document.write("fizz");
        default:
    }

    switch(i % 5){
        case 0:
            document.write("buzz");
        default:
    }

    switch(!(i % 3 && i % 5)){
        case false:
            document.write(i);
        default:
    }

    document.write(" ");
}

Keff • Jul 18 '20

Wow, those are some solutions right there! Thanks a lot for sharing and taking the time to explain it.

I did some silly stuff, just for fun lol:

function fizzBuzz(number = 100) {
    let current = 1;
    let string = '';

    while (current <= number) {
        string += current + ' ';
        current += 1;
    }

    string = string.trim()
        .replace(/[0-9]+/g, (match) => {
            const valueMap = ['FizzBuzz', match];
            const index = match % 15;
            return valueMap[index] || match;
        })
        .replace(/[0-9]+/g, (match) => {
            const valueMap = ['Fizz', match];
            const index = match % 3;
            return valueMap[index] || match;
        })
        .replace(/[0-9]+/g, (match) => {
            const valueMap = ['Buzz', match];
            const index = match % 5;
            return valueMap[index] || match;
        })

    return string.split(' ');
}

agtoever • Jul 17 '20 • Edited

Holy sh*t, my other solution was really ugly! :-o
Here is a (much) better one (also in Python3):

def fizzbuzz(n):
    for i in range(1, n + 1):
        print([f'{i}', f'Fizz', f'Buzz', f'FizzBuzz'][(i % 3 == 0) + 2 * (i % 5 == 0)])

fizzbuzz(22)

This works using the property that True in Python has numerical value 1 and using f-strings in an array. The proper element in the array is chosen based on the mentioned property, checking for divisibility with 3 and 5.

Valentin Radu • Jul 17 '20

Here's the simplest I can think of without any statements. 🙃

function run(n, i=1, j=1, k=1, acc=[]) {
  !j && k && acc.push('fizz')
  !k && j && acc.push('buzz')
  !k && !j && acc.push('fizzbuzz')
  k && j && acc.push(i)

    n - 1 && run(n - 1, i + 1, (j + 1) % 3, (k + 1) % 5, acc)
  return acc
}

console.log(run(30))

Keff • Jul 18 '20

Nice, recursion for the win 💪

Keff • Jul 18 '20

Thanks for sharing!

Heiker • Jul 17 '20 • Edited

You can still have flow control with functions.

const troo = (iff, elz) => iff;
const falz = (iff, elz) => elz;
const choose = (value) => [falz, troo][Number(Boolean(value))];

const is_fizz = (n) => choose(n % 3 === 0);
const is_buzz = (n) => choose(n % 5 === 0);

const fizzbuzz = (n) =>
  is_fizz(n) (
    () => is_buzz (n) ("FizzBuzz", "Fizz"),
    () => is_buzz (n) ("Buzz", n),
  )
    .call();

const range = (end) =>
  new Array(end).fill(null).map((val, index) => index + 1);

range(15).map(fizzbuzz).join(", ");

Keff • Jul 17 '20

I liked this approach! Thanks for sharing!

Ehsan Azizi • Jul 18 '20 • Edited

Here is an ugly solution in one line

for (let i = 1; i <= number; i++) {
  console.log((i % 3 === 0 && i % 5 === 0 && 'fizzbuzz') || (i % 3 === 0 && 'fizz') || (i % 5 === 0 && 'buzz') || i);
}

Shravan Kumar B • Jul 20 '20

U aren't supposed to use Ternary Operator.

Ehsan Azizi • Jul 21 '20 • Edited

Oh yeah! didn't notice that, I have updated my solution

Martin Sebastian • Jul 19 '20 • Edited

const fizzBuzz = (until) => {
      const fizz = ["Fizz", "", ""];
      const buzz = ["Buzz", "", "", "", ""];

      (function fizzybuzzy(current) {
         console.log(fizz[current % 3] + buzz[current % 5]  || current);

         return (current + 1 <= until) && fizzybuzzy(current + 1);
     })(0);
}

fizzBuzz(100);

Martin Sebastian • Jul 20 '20 • Edited

Some improvement to my earlier version.

A) better (arguably, because way more cognitive load than the very simple one above)

const fizzBuzz = (until, current = 0, fizzbuzz = ["", "Fizz", "Buzz"]) => {
    const fizzybuzzy = () => fizzbuzz[!(current % 3) * 1] + fizzbuzz[!(current % 5) * 2]  || current;
    return (current + 1 <= until) && (console.log(fizzybuzzy()), fizzBuzz(until, current + 1));
}

fizzBuzz(100);

B) above one as 1 liner b/c hello perl

const devBuzz = (function i(u, c= 0, m=["", "dev", ".to"])  {(c+1<=u) && (console.log(m[!(c % 3)*1] + m[!(c%5)*2] || c), i(u,c+1));});

devBuzz(20);

Martin Sebastian • Jul 20 '20

Also thinking about overriding Number.prototype.toString makes a fun thingy. Maybe someone already did, but someone for sure should :D

Shravan Kumar B • Jul 20 '20 • Edited

function fizzBuzz(n){
   let arr = [ ];
   for(i=1 ; i<=n; i++){
      let flag = i%15==0 && arr.push('FizzBuzz') || i%5==0 && arr.push('Buzz') || i%3==0 && arr.push('Fizz');
      !flag && arr.push(i);
   }

 return arr;
}



console.log(fizzBuzz(15));

Manolo Edge
@nombrekeff

JP Antunes • Jul 19 '20

There was a similar and equally really good thread about a month ago that had some devilishly clever solutions... highly recommend it!

My contributions below:

//1
const fizzBuzz = n => {
    const mapper = (arr, modulo, txt) => arr
                                    .filter(e => e % modulo == 0)
                                    .forEach(e => arr[arr.indexOf(e)] = txt);
    let x = 1;
    const range = [...Array(n)].map(_ => x++)
    mapper(range, 15, 'FizzBuzz');
    mapper(range, 5, 'Buzz');
    mapper(range, 3, 'Fizz');
    return range.toString();
}

//2
const fizzBuzz = n => {
    let x = 1;
    const range = [...Array(n)].map(_ => x++);
    for (let i = 2; i <= n; i += 3) range[i] = 'Fizz';
    for (let i = 4; i <= n; i += 5) range[i] = 'Buzz';
    for (let i = 14; i <= n; i += 15) range[i] = 'FizzBuzz';
    return range.toString();
}

//3
const fizzBuzz = n => {
    const isFizzBuzz = n => ( {false: '', true: 'Fizz'}[n % 3 == 0] 
                            + {false: '', true: 'Buzz'}[n % 5 == 0] 
                            || n.toString() );
    let x = 1;
    return [...Array(n)].map(_ => isFizzBuzz(x++)).toString();                             
}

//4 ...originally from a Kevlin Henney presentation here: https://youtu.be/FyCYva9DhsI?t=1191
const fizzBuzz = n => {
  const test = (d, s, x) => n % d == 0 ? _ => s + x('') : x;
  const fizz = x => test(3, 'Fizz', x);
  const buzz = x => test(5, 'Buzz', x);
  return fizz(buzz(x => x))(n.toString());
}

Keff • Jul 19 '20

Nice stuff. I will be checking out the thread!

There have been some really clever solutions posted here as well.

mintyPT • Jul 17 '20

Here is some python for you :)

print([
  (not (i % 3) and not (i % 5) and "FizzBuzz") or
  (not (i % 3) and "Fizz") or
  (not (i % 5) and "Buzz") or
  i
  for i in range(1,16)])

Benjamin Trent • Jul 17 '20 • Edited

Clojure example.

I quite like Andrew's bit shift array example. Only think that its better to have a nil zeroth value so you get circuit breaking for free.

;; Array for grabbing appropriate string, if exists
(def fizzes [nil "Fizz" "Buzz" "FizzBuzz"])

;; boolean to integer conversion
(defn b-to-i [b]
  (bit-and 1 (bit-shift-right (Boolean/hashCode b) 1)))

(defn fizzit [n]
  (let [fizzed (b-to-i (= 0 (mod n 3)))                     ;1 if true
        buzzed (bit-shift-left (b-to-i (= 0 (mod n 5))) 1)  ;2 if true
        both (+ fizzed buzzed)]                             ;3 if both are true
    (or (get fizzes both) (str n)))
  )

(defn fizzbuzz [n]
  (map fizzit (range 1 (inc n))))

repl.it link

Jesse Solomon • Jul 17 '20 • Edited

Thanks for the fun challenge!

I'm not sure if JavaScript's type conversion is considered cheating, but I thought it was cool and wanted to share!

const n = 15;

let output = new Array(n).fill(null);

output = output.map((_value, index) => {
    let offsetIndex = index + 1;

    return (["", "Fizz"][!(offsetIndex % 3) + 0] + ["", "Buzz"][!(offsetIndex % 5) + 0]) || offsetIndex;
});

console.log(output);

ogrotten • Jul 17 '20 • Edited

Hmm... As a bootcamp student, I'm trying to untangle this.

[!(offsetIndex % 3) + 0]
I see this checks the modulus, and inverts the result. Any non-zero int is truthy, and this expression makes it false . . . +0 to coerce the false to an int. That is enough that the entire thing evaluates falsy, which then results in outputting offsetIndex on the otherside of the or. I had to drop this in a node repl to follow it, but I eventually got it 😁

But what is the ["", "Fizz"][!(offsetIndex % 3) + 0] double-array looking thing there? I thought it was a 2d array at first, but that doesn't seem right for a number of reasons.

Corey Alexander • Jul 18 '20

I'm pretty sure the first pair of square brackets creates an array, and the second one indexes into that array. So I think they are array indexing into the first array with either 0 or 1 to pick the empty string or "Fizz" depending on the offsetIndex!

Hope that helps!

Keff • Jul 18 '20

yup, it defines the array first const array = ["", "Fizz"] and then access the index array[!(offsetIndex % 3) + 0]. The expression will resolve either to true+0 -> 1 or false+0 -> 0

ogrotten • Jul 18 '20

holy shit. that's cool.

I THOUGHT it might have been something like that, but I was thinking about it wrongly . . . I wasn't thinking of it as the array followed by the index, I was thinking of it as a variable. So ["an", "array"] was the name of the array, and then it had it's own index. Not very practical.

But the actual use is quite cool and makes plenty sense.

Thanks!

ogrotten • Jul 17 '20

why _value?

I understand that the 'convention' for _ is for private, but is there some other use for it here?

Or is it just habit 😂

SavagePixie • Jul 17 '20

It is also a convention for unused parameters.

Keff • Jul 17 '20

Thanks for sharing Jesse!! It's a really neat solution 🤘!
Also not cheating at all!

Martynas Kan • Aug 20 '20

Really nice idea!

Here's how I did it 😁

const fizzBuzz = (number) => {
    const array = Array(number).fill(undefined).map((_, index) => index + 1);
    const fiz = array.filter(v => !(v % 3))
    const baz = array.filter(v => !(v % 5))
    const fizBaz = array.filter(v => !(v % 5) && !(v % 3))

    let result = {};
    for (let i of array) {
        result[i] = i;
    }
    for (let f of fiz) {
        result[f] = 'Fizz';
    }
    for (let b of baz) {
        result[b] = 'Buzz';
    }
    for (let fb of fizBaz) {
        result[fb] = 'FizzBuzz';
    }

    return Object.values(result);
}