JavaScript FizzBuzz Solutions

FizzBuzz is a common programming problem that is often used as an exercise in basic programming logic and algorithm development. The problem is typically presented as follows:

Write a program that prints the numbers from 1 to 100. For multiples of three, print “Fizz” instead of the number, and for multiples of five, print “Buzz” instead of the number. For numbers that are multiples of both three and five, print “FizzBuzz”.

In essence, the FizzBuzz problem requires the programmer to loop through a sequence of numbers, identify which ones are multiples of 3, 5, or both, and print the appropriate text instead of the number. The problem is often used as a simple test of a programmer’s ability to use loops, conditionals, and basic programming concepts like variables and functions. It can be solved using a variety of programming languages, and is often used as an interview question for entry-level software development positions.

In this article, I present, as a follow-up to my Python article, 15 different solutions to the FizzBuzz problem in the JavaScript programming language. This is to highlight the flair of JavaScript.

Here are 15 cool FizzBuzz solutions in JavaScript:

Using a for loop and if/else statements:

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Using a for loop and a switch statement:

for (let i = 1; i <= 100; i++) {
  switch (true) {
    case i % 3 === 0 && i % 5 === 0:
      console.log("FizzBuzz");
      break;
    case i % 3 === 0:
      console.log("Fizz");
      break;
    case i % 5 === 0:
      console.log("Buzz");
      break;
    default:
      console.log(i);
  }
}

Using a while loop and a ternary operator:

let i = 1;
while (i <= 100) {
  console.log(
    i % 3 === 0 && i % 5 === 0 ? "FizzBuzz" :
    i % 3 === 0 ? "Fizz" :
    i % 5 === 0 ? "Buzz" :
    i
  );
  i++;
}

Using recursion:

function fizzBuzzRecursive(num) {
  if (num === 0) {
    return;
  }
  fizzBuzzRecursive(num - 1);
  console.log(
    num % 3 === 0 && num % 5 === 0 ? "FizzBuzz" :
    num % 3 === 0 ? "Fizz" :
    num % 5 === 0 ? "Buzz" :
    num
  );
}
fizzBuzzRecursive(100);

Using Array.from() and map():

Array.from({ length: 100 }, (_, i) => {
  const num = i + 1;
  return (
    num % 3 === 0 && num % 5 === 0 ? "FizzBuzz" :
    num % 3 === 0 ? "Fizz" :
    num % 5 === 0 ? "Buzz" :
    num
  );
}).forEach(console.log);

Using a do-while loop and a conditional operator:

let i = 0;
do {
  i++;
  console.log(i % 3 === 0 && i % 5 === 0 ? "FizzBuzz" : i % 3 === 0 ? "Fizz" : i % 5 === 0 ? "Buzz" : i);
} while (i < 100);

Using a for loop and an object to store the strings:

const strings = { 3: "Fizz", 5: "Buzz" };
for (let i = 1; i <= 100; i++) {
  let output = "";
  for (const key in strings) {
    if (i % key === 0) {
      output += strings[key];
    }
  }
  console.log(output || i);
}

Using recursion and an array to store the strings:

const fizzBuzzStrings = ["", "", "Fizz", "", "Buzz", "Fizz", "", "", "Fizz", "Buzz", "", "Fizz", "", "", "FizzBuzz"];
function fizzBuzzRecursive(num) {
  if (num === 0) {
    return;
  }
  fizzBuzzRecursive(num - 1);
  console.log(fizzBuzzStrings[num % 15] || num);
}
fizzBuzzRecursive(100);

Using a for loop and a template literal:

for (let i = 1; i <= 100; i++) {
  console.log(`${i % 3 ? "" : "Fizz"}${i % 5 ? "" : "Buzz"}` || i);
}

Using a for loop and a function to generate the output:

function generateOutput(num) {
  let output = "";
  if (num % 3 === 0) {
    output += "Fizz";
  }
  if (num % 5 === 0) {
    output += "Buzz";
  }
  return output || num;
}
for (let i = 1; i <= 100; i++) {
  console.log(generateOutput(i));
}

Using a for loop and a nested ternary operator:

for (let i = 1; i <= 100; i++) {
  console.log(i % 3 === 0 ? (i % 5 === 0 ? "FizzBuzz" : "Fizz") : (i % 5 === 0 ? "Buzz" : i));
}

Using a for loop and an array to store the numbers and strings:

const arr = Array.from({ length: 100 }, (_, i) => i + 1);
arr.forEach((num) => {
  const output = ["Fizz"][num % 3] || "";
  const output2 = ["Buzz"][num % 5] || "";
  console.log(`${output}${output2}` || num);
});

Using a for loop and a self-invoking function to generate the output:

for (let i = 1; i <= 100; i++) {
  console.log((function () {
    let output = "";
    if (i % 3 === 0) {
      output += "Fizz";
    }
    if (i % 5 === 0) {
      output += "Buzz";
    }
    return output || i;
  })());
}

Using a for loop and two switch statements:

for (let i = 1; i <= 100; i++) {
  switch (true) {
    case i % 3 === 0:
      switch (true) {
        case i % 5 === 0:
          console.log("FizzBuzz");
          break;
        default:
          console.log("Fizz");
          break;
      }
      break;
    case i % 5 === 0:
      console.log("Buzz");
      break;
    default:
      console.log(i);
      break;
  }
}

Using a for loop and a map() method to generate the output:

for (let i = 1; i <= 100; i++) {
  const output = [i, "", "", "Fizz", "", "Buzz", "Fizz", "", "", "Fizz", "Buzz", "", "Fizz", "", "", "FizzBuzz"][i % 15];
  console.log(output);
}

In conclusion, there are several ways to approach the FizzBuzz problem in JavaScript and I present just 15 above. As you learn new programming languages, try solving problems in different creative ways as this can boost your understanding of the new programming language and your grounding in programming in general.