FizzBuzz program (details given) in Javascript

Was fooling around with FizzBuzz and JavaScript as comparison to C#.

Here's my version, heavily influenced by more rigid languages:

function FizzBuzz(aTarget) {
    for (var i = 1; i <= aTarget; i++) {
        var result = "";
        if (i%3 === 0) result += "Fizz";        
        if (i%5 === 0) result += "Buzz";
        if (result.length ===0) result = i;

        console.log(result);
    }
}

I like the structure and ease of read.

Now, what Trevor Dixon cleverly did is relay on the false-y values of the language (false , null , undefined , '' (the empty string) , 0 and NaN (Not a Number)) to shorten the code.
Now, the if (result.length ===0) result = i; line is redundant and the code will look like:

function FizzBuzz(aTarget) {
    for (var i = 1; i <= aTarget; i++) {
        var result = "";
        if (i%3 === 0) result += "Fizz";        
        if (i%5 === 0) result += "Buzz";

        console.log(result || i);
    }
}

Here we relay on the || operator to say : "if result is false, print the iteration value (i)". Cool trick, and I guess I need to play more with JavaScript in order to assimilate this logic.

You can see other examples (from GitHub) that will range from things like :

for (var i=1; i <= 20; i++)
{
    if (i % 15 == 0)
        console.log("FizzBuzz");
    else if (i % 3 == 0)
        console.log("Fizz");
    else if (i % 5 == 0)
        console.log("Buzz");
    else
        console.log(i);
}

No variables here, and just check for division by 15,3 & 5 (my above one only divides by 3 & 5, but has an extra variable, so I guess it's down to microbenchmarking for those who care, or style preferences).

To:

for(i=0;i<100;)console.log((++i%3?'':'Fizz')+(i%5?'':'Buzz')||i)

Which does it all in on line, relaying on the fact that 0 is a false value, so you can use that for the if-else shorthanded version (? :), in addition to the || trick we've seen before.

Here's a more readable version of the above, with some variables:

for (var i = 1; i <= 100; i++) {
  var f = i % 3 == 0, b = i % 5 == 0;
  console.log(f ? b ? "FizzBuzz" : "Fizz" : b ? "Buzz" : i);
}

All in all, you can do it in different ways, and I hope you picked up some nifty tips for use in JavaScript :)


for (let i = 1; i <= 100; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
}

.fizz and .buzz could be CSS classes, no? In which case:

var n = 0;
var b = document.querySelector("output");
window.setInterval(function () {
    n++;
    b.classList[n%3 ? "remove" : "add"]("fizz");
    b.classList[n%5 ? "remove" : "add"]("buzz");
    b.textContent = n;
}, 500);
output.fizz:after {
    content: " fizz";
    color:red;
}

output.buzz:after {
    content: " buzz";
    color:blue;
}

output.fizz.buzz:after {
    content: " fizzbuzz";
    color:magenta;
}
<output>0</output>

/*Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”*/

var str="",x,y,a;
for (a=1;a<=100;a++)
{
    x = a%3 ==0;
    y = a%5 ==0;
    if(x)
    {
        str+="fizz"
    }
    if (y)
    {
        str+="buzz"
    }
    if (!(x||y))
    {
        str+=a;
    }
    str+="\n"
}
console.log(str);

Your functions return falsy values no matter what, but will print anyway. No need to make this overly complicated.

fiddle: http://jsfiddle.net/ben336/7c9KN/