Fizzbuzz program in JavaScript

In this article, we will explore the FizzBuzz program using JavaScript. To begin, it's essential to grasp the concept of "FizzBuzz."

FizzBuzz

FizzBuzz is fundamentally a playful activity designed for children that teaches them the concept of division. In this game, players form a circle and count sequentially from 1 to 100. For any number that is divisible by 3, the player must substitute the number with the term Fizz, while for numbers divisible by 5, the term Buzz is used. Furthermore, if a number is divisible by both 3 and 5, it should be replaced by FizzBuzz.

FizzBuzz in the programming world

Within the realm of programming, FizzBuzz serves as a coding challenge often presented during job interviews to assess a candidate's ability to create a program or troubleshoot an existing one.

FizzBuzz was developed by Imran Ghory 17 years ago in 2007. The concept of FizzBuzz originated from a game, which Imran Ghory adapted to formulate programming interview questions. The primary aim behind the creation of FizzBuzz was to assess the capability of programmers in tackling small-scale problems.

When a candidate possesses exceptional coding abilities, tackling the FizzBuzz problem becomes quite straightforward. Conversely, for individuals who are novice programmers, this particular challenge may prove to be quite difficult.

There are multiple approaches to developing a FizzBuzz application. The FizzBuzz program can be implemented in a range of programming languages including JavaScript, Python, Java, and more.

In this article, we will explore the FizzBuzz program utilizing 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 flowchart presented above illustrates the functioning of FizzBuzz. In accordance with the FizzBuzz algorithm, whenever a number meets the specified criteria, the program produces the anticipated output.

There are two approaches to developing the FizzBuzz program:

✅ Using a 'for' loop
✅ Using recursion

We will explore the process of developing a FizzBuzz program by employing both approaches.

"for" loop

The following code snippet demonstrates the use of a "for" loop to create a FizzBuzz program:

Example


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:

In this result, we can observe a FizzBuzz application created using the "for" loop.

Utilizing the recursion

The following code illustrates how to create a FizzBuzz program using recursion:

Example


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:

Below is the output showcasing a FizzBuzz program developed using the support of a recursive function.

Conclusion:

In this article, we have explored the FizzBuzz program implemented in JavaScript. There are two approaches to create a FizzBuzz program in JavaScript: one is through the use of the "for" loop, and the other involves the recursive method.