Fizzbuzz program in JavaScript

In this article, we will understand the FizzBuzz program in JavaScript. Let us first understand what "FizzBuzz" is.

FizzBuzz

FizzBuzz, in general, is a word game for children through which they learn to divide numbers. In this game, participants sit in a circle and then count from 1 to 100. When the number is divisible by 3, then the player has to replace the number by Fizz, and when the number is divisible by 5, then the player has to replace the number by Buzz but when the number is divisible by both 3 and 5, then the player has to replace the number by FizzBuzz.

FizzBuzz in the programming world

In the programming world, FizzBuzz is a programming challenge that is asked in a job interview to check whether the candidate can write a program or debug a program.

FizzBuzz was created by Imran Ghory 17 years ago in 2007. FizzBuzz originally was a game from which Imran Ghory took the idea and created programming interview questions. The intention of creating FizzBuzz was to test the ability of programmers to solve tiny problems.

If the coding skills of the candidate are excellent then it is very easy to solve the FizzBuzz problem but if the candidate is a new programmer then it could be challenging for them to solve the FizzBuzz problem.

There are various methods to write a FizzBuzz program. We can write the FizzBuzz program in various programming languages such as JavaScript, Python, Java, etc.

But in this article, we will comprehend the FizzBuzz program with the help of JavaScript.

FizzBuzz Program Question:

Create a program that prints numbers from 1 to 50.
Print "Fizz" in place of the number when the multiple of the number is 3.
Print "Buzz" in place of the number when the multiple of the number is 5.
Print "FizzBuzz" in place of the number when the multiple of the number is 3 and 5.

Flowchart of a FizzBuzz program

The above flowchart shows how the FizzBuzz works. According to the FizzBuzz algorithm, when a number satisfies the conditions then the program prints the expected output.

We can create the FizzBuzz program in two ways:

Utilizing 'for" loop
Utilizing recursion

We will understand how to create a FizzBuzz program utilizing both methods.

"for" loop

Code with the "for" loop to construct a FizzBuzz program is given below:

function fizzBuzz (i) {
    const solution = []
    
    for (let i = 1; i <= 50; i++) {
        if (i % 3 == 0 && i % 5 == 0)
            solution.push("FizzBuzz")
        else if (i % 3 == 0)
            solution.push("Fizz")
        else if (i % 5 == 0)
            solution.push("Buzz")
        else
            solution.push(i.toString())
    }
    
    return solution
};

console.log(fizzBuzz(10))

Explanation of the above-given code:

We have first constructed a function called "fizzBuzz" in which we have given the argument "i".
We have formed the "for" loop and set a variable "i". The "for" loop repeats from 1 to a certain number which is "50". It checks the "if else" statement and prints the outcome accordingly.
The "if else" condition checks the divisibility of numbers with 3 and 5 with the help of i % 3 == 0 && i % 5 == 0 If the number is dividable by 3 and 5 then it prints FizzBuzz.
If the number is not divisible by both 3 and 5 then it checks the divisibility with only 3 with the help of i % 3 == 0 If the number is dividable by 3 then it prints Fizz.
If the number is not dividable by 3 then it checks the divisibility with only 5 with the help of i % 5 == 0 If the number is dividable by 5 then it prints Buzz.
If the number is not dividable by 3 and 5, only 3 and only 5 then it prints the number.

Output:

Here in the outcome we can witness a FizzBuzz program formed with the help of the "for" loop.

Utilizing the recursion

Code which is utilized to construct a FizzBuzz program with the help of recursion is given downwards:

function fizzBuzz(number, i = 1, solution = []) { 
	if (i > number) { 
		return solution; 
	} 

	let output = []; 
	if (i % 3 === 0) output.push('Fizz'); 
	if (i % 5 === 0) output.push('Buzz'); 

	if (output.length === 0) { 
		solution.push(i); 
	} else { 
		solution.push(output.join('')); 
	} 

	return fizzBuzz(number, i + 1, solution); 
} 

const fizzBuzzArray = fizzBuzz(25); 
console.log(fizzBuzzArray);

Description of the above-given code:

We have constructed a recursive function named "fizzBuzz" which calls itself continuously and generates the FizzBuzz value until the limit is reached.
After defining the recursive function we have constructed a "for" loop that repeats from 1 to 30.
Then the "if else" statement checks the divisibility of a number by 3 & 5 and prints the solution as per the conditions.

Output:

Here is the output in which we can witness a FizzBuzz program constructed with the assistance of recursion function.

Conclusion:

We have apprehended the FizzBuzz program in JavaScript in this article. We can make a FizzBuzz program in JavaScript in two methods which are by utilizing the "for" loop and the recursion method.

Next TopicGet a Number from a String using JavaScript

← prev next →