How can I optimize (or improve) this Fizz Buzz script?

Question

//Script to find numbers that are the power of 3 and 5 from 1 to 100 using % Modulus operator - when it finds a number that can be the power of 3 or 5 it outupts FizzBuzz... example hosted on my blog http://chadcollins.com/find-numbers-that-are-the-power-of-3-and-5-from-1-to-100/

// this was an interview question, and I want to know how to optimize or improve this with "pure javascript".

<div id=out_put></div>


//from a list of 1 to 100 numbers, find the 3's and 5's using modulus
function findPowerOf(numList) {
    //setup the variables 
    var myModMatch1 = 3; //find numbers that have the power of 3
    var myModMatch2 = 5; //find numbers that have the power of 5
    var tempCheck1 = ""; //stores true or false based on myModMatch1
    var tempCheck2 = ""; //stores true or false based on myModMatch2
    var stringOut = ""; //concat string for output
    var numListStart = 1; //starting number list index
    var numListFinish = 100; //ending list index
    var numberList = []; //create the list of numbers
    for (var i = numListStart; i <= numListFinish; i++) {
        numberList.push(i);
    }
    for (i = 0; i < numberList.length; i++) { //loop on each number and check the modulus params
        console.log(numberList[i]);
        if ((numberList[i] % myModMatch1) === 0) { //check first modulus param
            console.log('houston, we have a match on a number modulus 3');
            tempCheck1 = "Fizz";
        }
        if ((numberList[i] % myModMatch2) === 0) {
            console.log('houston, we have a match on a number modulus 5');
            tempCheck2 = "Buzz";
        }
        if (tempCheck1 === "" && tempCheck2 === "") { //no modulus matches
            console.log("no modulus matches");
            stringOut += numberList[i] + "\n";
        }
        stringOut += tempCheck1 + tempCheck2 + "\n";
        tempCheck1 = ""; //clear both variables
        tempCheck2 = "";
    }
    //dynamically make a div
    var outDiv = document.createElement("div");
    outDiv.innerHTML = stringOut; //output the final loop values all at once
    document.getElementById('out_put').appendChild(outDiv); //update the view
}
findPowerOf(); // call our function

Answer 1

You can remove pretty much all the variables and the function parameter (especially since you're not using the parameter at all). That will also remove one redundant loop.

You can optimize those three parallel ifs by doing one nested if-else.

With all that, you could reduce the code to about 30% of its current size.

Let me give it a shot:

---

My optimized version:

var div = document.getElementById('out_put');
for (var i = 1; i <= 100; i++) {
  if (i % 3 == 0 || i % 5 == 0) {
    if (i % 3 == 0) {
      div.innerHTML += "Fizz";
    }
    if (i % 5 == 0) {
      div.innerHTML += "Buzz";
    }
  } else {
    div.innerHTML += i;
  }
  div.innerHTML += '<br>';
}

<div id=out_put></div>

I've used one variable for the div element because selecting it on every iteration is a waste of resources.

---

Shorter/less readable version:

Here's an even shorter, commented and slighly less-readable version:

var div = document.getElementById('out_put');
for (var i = 1; i <= 100; i++) {
  if (i % 3 == 0 || i % 5 == 0) { // see if there's ANY match
    if (i % 3 == 0)               // check for 3
      div.innerHTML += "Fizz";
    if (i % 5 == 0)               // check for 5
      div.innerHTML += "Buzz";
  } else                          // otherwise just output the number
    div.innerHTML += i;
  div.innerHTML += '<br>';        // add a new line after each
}

<div id=out_put></div>

---

Insane version - one-liner:

(just for fun - don't ever do this!)

And if you really REALLY want to go crazy with this, you can do a few nested ternary conditionals inside the loop. Technically, a loop with a single line inside - but pretty much unreadable and will perform worse because I removed the DOM element reference variable, so it will do the element query on every iteration. :)

for (var i = 1; i <= 100; i++) 
  document.getElementById('out_put').innerHTML += ( (i % 3 == 0 || i % 5 == 0) ? ( ((i % 3 == 0) ? "Fizz" : "") + ((i % 5 == 0) ? "Buzz" : "") ) : i) + '<br>';

<div id=out_put></div>