FizzBuzz quiz in js array

Question

Trying to write a fizzBuzz quiz to generate the word "fizz" for any number in an array divisible by 5, and the word "Buzz" for number divisible by 3 and lastly "fizzBuzz" for number divisible by 5 and 3 using the chrome JavaScript console.

This code just prints the numbers without replacing them with the word fizz and Buzz.

I'm expected to keep entering the function fizzBuzz() in the console, so as to keep generating other numbers, my question is, why isn't working?.

I expected result like:

[1,2,"Buzz",4,"Fizz","Buzz",7,8,"Buzz","Fizz",11,"Buzz",13,14,"FizzBuzz"]

But instead I get:

[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

This is my current code:

var output=[];
var previous = 1;
function fizzBuzz(){
    if (output[(previous-1)]%5===0 && output[(previous-1)]%3===0){
        output.push(("FizzBuzz"));
        console.log(output);
        previous++;
    }
    else if (output[(previous-1)]%5===0){
         output.push("Fizz");
        console.log(output);
        previous++;
        
    }
    else if (output[(previous-1)]%3===0){
         output.push("Buzz");
        console.log(output);
        previous++;
    }
    else {
        output.push(previous);
        console.log(output);
        previous++;
        
    }
    
    
}

Answer 1

So after checking your advices i change my algorithm and this one works,

var output = []
var previous = 1
function fizzBuzz(){
    if (previous % 5 === 0 && previous % 3 === 0){
        output.push(("FizzBuzz"));
        console.log(output);
        previous++;
    }
    else if (previous  % 5 === 0){
         output.push("Fizz");
        console.log(output);
        previous++;
        
    }
    else if (previous % 3 === 0){
         output.push("Buzz");
        console.log(output);
        previous++;
    }
    else {
        output.push(previous);
        console.log(output);
        previous++;
        
    }
    
    
}

Answer 2

An easier approach to achieve the same result without declaring additional variables is by mutating the original array.

function fizzBuzz(array) {
  array.forEach((element, index) => {
    if (element % 5 === 0 && element % 3 === 0) {
      array[index] = 'FizzBuzz';
    } else if (element % 5 === 0) {
      array[index] = 'Fizz';
    } else if (element % 3 === 0) {
      array[index] = 'Buzz';
    }
  });

  return array;
}

Answer 3

How about using a generator function instead of keeping global variables! For instance

function* fizzBuzz(length = 15) {
  for (let i = 1; i <= length; i++) {
    let value = i;
    if (i % 15 === 0) {
      value = 'FizzBuzz';
    } else if (i % 5 === 0) {
      value = 'Fizz';
    } else if (i % 3 === 0) {
      value = 'Buzz';
    }
    yield value;
  }
}

for (const i of fizzBuzz()) {
  console.log(i);
}

or maybe a closure that behaves like a generator

const fizzBuzz = (function(length = 15) {
  const result = Array.from({
    length
  }, (_, i) => {
    if ((i + 1) % 15 === 0) {
      return 'FizzBuzz';
    } else if ((i + 1) % 5 === 0) {
      return 'Fizz';
    } else if ((i + 1) % 3 === 0) {
      return 'Buzz';
    }
    return (i + 1);
  });
  let index = 0;

  return () => {
    if (index >= length) {
      index = 0;
    }
    return result[index++];
  };
})();

console.log(fizzBuzz());
console.log(fizzBuzz());
console.log(fizzBuzz());
console.log(fizzBuzz());
console.log(fizzBuzz());

Answer 4

You can check this out :D

function fizzBuzz (){
    const arr = Array.from({length: 15}, (v, i) => i + 1).map((v) => v = (v % 3 == 0 ?  "Fizz" : "") + (v % 5 == 0 ? "Buzz" : "") || v)
    console.log(arr)
}
fizzBuzz()