How to solve the Fizz Buzz challenge using JavaScript

Hey there! Its the last day of the year and we are going to learn how to solve the fizz buzz challenge in JavaScript. Awesome stuff!

What is the fizz buzz challenge

You might have been hearing about the "fizz buzz" challenge from your programmer friends. It is basically you printing the word "fizz" if a certain number given is divisible by "3" and the word "buzz" if it is divisible by "5". Usually, the rest of the numbers are also printed - it might also not be required. It totally depend on what the challenge requires you to do.

Over the years, developers have been asked to solve this challenge during technical interviews to prove their understanding about algorithms. You never can tell which of your next technical recruiter will ask you to solve this challenge, so stay with me to the end.

Here is the question we are solving

write a program that prints "fizz" if value is divisible by 3 and print "buzz" if value is divisible by 5. Print value if it is not divisible by 3 or 5. Take value to be 45

Now lets begin. The language of choice here is JavaScript that's because I am familiar with it than any other language. Nonetheless, you can solve this challenge in any language you wish - the processes are similar.

To solve this, we are going to be using three main JavaScript concept: function, for loop and conditional statements

Don't worry if you are not familiar with this stuff. I'm going to work you through it all.

Now let's get our hands dirty:

const fizzbuzz = (value) =>{


}

the fizzbuzz function will contain all of our code. the value argument will be the value given in the question - 45.

The next thing we are going to do is to loop through value using the for loop.

const fizzbuzz = (value) =>{

  for (let i = 0; i < value; i++){


}

}

so we have initialized "i" to be equal to 0 and should increase everytime "i" is less than value

The next thing to do is to use conditional statements to check if value is divisible by 3 so that we can print "fizz", or 5 so that we can print "buzz" or print value when it is not divisible.

let's go

const fizzbuzz = (value) =>{

  for (let i = 0; i < value; i++){
    if(i % 3 === 0){
     console.log("fizz");
  }else if(i % 5 === 0){
     console.log("buzz");
 }else{
   console.log(i);
 }  

}

}

Now let's call the function and pass the value of value to get the result:

console.log(fizzbuzz(45))

Now check your console to see printed result. hurrayyy!

Let's spice the challenge up a little by summing numbers not divisible by 3 or 5.

Now let's declare a variable inside the function (top level) to store the summation of the 'indivisible' numbers.

let sumValue = 0

Now we shall increment the value of sumValue inside the else statement

const fizzbuzz = (value) =>{
  let sumValue = 0;
  for (let i = 0; i < value; i++){
    if(i % 3 === 0){
     console.log("fizz");
  }else if(i % 5 === 0){
     console.log("buzz");
 }else{
   console.log(i);
   sumValue+=i
 }  

}
console.log("sum of indivisible numbers =", sumValue);
return;

}

whooooa! the sum of indivisible numbers is "540" and it has been logged to the console.

I hope that you got this. Feel free to reach out to me if you ever encounter any difficulty replicating this.