FizzBuzz with Javascript

In this tutorial I’ll show you five possible solution for the popular FizzBuzz task using Javascript. The first one is going to be an easier one, while the others will be slightly more complicated.

The FizzBuzz problem traces its roots back to a children's game used to teach division. Players take turns counting numbers, but for multiples of three, they say "Fizz" instead of the number, and for multiples of five, they say "Buzz." For numbers that are multiples of both three and five, they say "FizzBuzz." The game serves as an excellent exercise in division and concentration.

What is FizzBuzz?

You are required to print out numbers from 1 and if the number is divisible by three, print out “fizz”, if the number is divisible by five, print out “buzz”, if it is divisible by three and five, print “FizzBuzz”, otherwise print the number.

Why It's Popular in Programming Interviews?

FizzBuzz has become a staple in coding interviews of entry-level software development roles for several compelling reasons:

• Quick Assessment: It's a quick and effective way to filter out candidates who struggle with basic programming concepts. If a candidate can't solve FizzBuzz, they are likely not ready for more complex coding challenges.
• Versatility: The problem can be solved using various programming languages and approaches, allowing candidates to showcase their skills in their language of choice.
• Focus on Fundamentals: FizzBuzz tests a candidate's understanding of loops, conditionals, and operators—core concepts that are essential for any software development role.

What It Tests in a Candidate

• Basic Coding Skills: At its core, FizzBuzz assesses whether a candidate understands basic programming constructs like loops and conditionals.
• Logical Thinking: The problem requires candidates to apply logical reasoning to print the correct output based on the given conditions.
• Attention to Detail: FizzBuzz also tests for common pitfalls like off-by-one errors, ensuring that candidates pay attention to the finer details of their code.

By including FizzBuzz in the interview process, employers can quickly assess a candidate's coding skills, logical reasoning, and attention to detail, making it an invaluable tool for identifying promising talent.

So let’s see how we can do it in action.

FizzBuzz Javascript – Solution 1

function fizzBuzzV1(number) {
let i;
for(i = 1; i <= number; 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)
      }
   }
}

fizzBuzzV1(15)

This is the most straightforward way to solve the FizzBuzz problem. It's easy to understand and implement, making it ideal for beginners.

First, we create a function called “fizzBuzzV1”. It takes one parameter, the “number”.

Then we declare a looping variable called “i”. It will serve as a loop counter. Then we create a for loop that will start counting the numbers from 1 until it is less than or equal to the number we provide when calling this function.

Inside the for loop we use “if else if” statements to check if the number in the current iteration is divisible by 3, 5 or both. For this we use the modulus operator.

FizzBuzz Javascript – Solution 2 - The String Concatenation Approach

function fizzBuzzV2(number) {

let i;
for(i = 1; i <= number; i++) {
   let word = '';
   if(i % 3 === 0) {
     word += 'Fizz';
   }

   if(i % 5 === 0) {
     word += 'Buzz';
   }

   if(word == '') {
     console.log(i);
   } else {
      console.log(word);
   }
  }

}

fizzBuzzV2(15);

This version takes a slightly more advanced approach by using string concatenation. It's a bit more elegant and avoids redundancy in the code.

Here we start like in the first one. We create a function, then declare a looping variable. The conditions of the for loop is again the same as in the first one. How we check the numbers is a little bit different.

We declare a new variable called “word” and set it to an empty string. It will store the output string.

Then we have three if statements.

In the first if statement we check if the value of “i” is divisible by 3. If it is, we use the addition assignment operator to add the word “fizz”

Here we basically say:

word = word + "Fizz"

Then we do the same, but here we check if the value of “i” is divisible by 5. If it is, we add the word “Buzz”.

We don’t have to check separately if a number is divisible by both 3 and 5, because if it is the variable “word” already has the two words combined. So it will print “FizzBuzz”.

Lastly, we have to check if the number is not divisible by neither 3 nor 5.

FizzBuzz Javascript - Solution 3 - Using switch case

function fizzBuzzSwitch(number) {
  for (let i = 1; i <= number; i++) {
    switch (true) {
      case i % 15 === 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);
    }
  }
}

This version uses a switch statement to handle the logic, which can be easier to read for some people.

How it works:

• We loop from 1 to number using a for loop.
• Inside the loop, we use a switch statement that evaluates to true.
• We then check for conditions using case. If i % 15 === 0, it means the number is divisible by both 3 and 5, so we print "FizzBuzz".
• Similarly, we check for divisibility by 3 and 5 to print "Fizz" and "Buzz", respectively.
• If none of the conditions match, we simply print the number.

FizzBuzz Javascript - Solution 4 - Using an Array and map()

function fizzBuzzArray(number) {
  const arr = Array.from({ length: number }, (_, i) => i + 1);
  arr.map((n) => {
    let output = '';
    if (n % 3 === 0) output += 'Fizz';
    if (n % 5 === 0) output += 'Buzz';
    console.log(output || n);
  });
}

This version uses JavaScript's Array and map() methods to make the code more functional and concise.

How it works:

• We create an array of numbers from 1 to number using Array.from().
• We then use map() to iterate through each number.
• Inside the map() function, we use if statements to check for divisibility and construct the output string accordingly.
• Finally, we print the output string or the number itself.

FizzBuzz Javascript - Solution 5 - Using Recursion

function fizzBuzzRecursive(number, i = 1) {
  if (i > number) return;
  let output = '';
  if (i % 3 === 0) output += 'Fizz';
  if (i % 5 === 0) output += 'Buzz';
  console.log(output || i);
  fizzBuzzRecursive(number, i + 1);
}

This version uses recursion, which is a function calling itself, to solve the problem. This is a different and interesting approach to the FizzBuzz problem.

How it works:

• The function takes two arguments: number (the limit) and i (the current number), which defaults to 1.
• If i is greater than number, the function returns, ending the recursion.
• Inside the function, we use if statements to check for divisibility and construct the output string.
• We then print the output string or the number itself.
• Finally, we call the function again with i + 1, continuing the recursion.

How Should One Approach This Kind of Task?

Understand the Problem: Before jumping into the code, make sure you understand what the problem is asking. This will help you formulate your logic clearly.

Plan Your Logic: Think through how you will use loops and conditionals to solve the problem. Planning ahead can save you from unnecessary errors and revisions.

Start Simple: Begin with a straightforward approach, like using if-else statements, before moving on to more complex solutions.

Test Thoroughly: Always test your code with different inputs to ensure it works as expected.

How Can FizzBuzz Improve Your Coding Skills?

Understanding of Basic Concepts: FizzBuzz is excellent for grasping the basics of loops, conditionals, and operators, which are foundational in programming.

Problem-Solving: Although simple, FizzBuzz requires you to think logically and sequentially, helping improve your problem-solving skills.

Code Optimization: As you try to solve FizzBuzz in different ways, you'll learn how to optimize your code, making it more efficient and readable.

Taking FizzBuzz Further

Complexity Analysis: Once you've solved the problem, analyze the time and space complexity of your solutions. This will give you a deeper understanding of algorithmic efficiency.

Variations: Try solving variations of FizzBuzz, like printing different words for different divisors or using different data structures.

Real-world Applications: Think about how the logic behind FizzBuzz could be applied in real-world scenarios. For example, the basic idea of iterating through a sequence and applying conditions can be used in tasks like data filtering.