The Lowest Level of JavaScript Comprehension

FizzBuzz, yes that is the lowest level of comprehension for a JavaScript developer yet 99% of folks can’t get it right. Let me rephrase that, 99% of applicants that apply for programming jobs find it difficult to code the FizzBuzz test say many sources. Surprising, as the demographic of most programmers would find FizzBuzz anything but trivial.

The way I see it many people who apply for jobs are really not qualified, so it’s 99% of programmers who apply for jobs that don’t get it, but not the 99% who are actually holding a job as developers or programmers.

Even if you can solve it and easily at that, don’t give anyone grief over being asked to do such a menial task, as that will count against you. Managers are looking for problem solving skills as opposed to self proclaimed “code monkeys”.

That being said, let’s take a look at some implementations.

Below is probably the simplest implementation using a for loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

fizzbuzz();

We can build upon this example by declaring a variable to hold our string:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var fizzBuzz = function() {
    for (i = 1; i < 101; i++) {
        var v; // declare a variable: v which holds our string
        if (i % 15 === 0) {
            v = "FizzBuzz";
        }
        else if(i % 5 === 0) {
            v = "Buzz";
        }
        else if (i % 3 === 0) {
            v = "Fizz";
        }
        else {
            v = i;
        }
        console.log(v);
    }
};

fizzBuzz();

How about using an IIFE - (function iife () { … } ());? Not too difficult:

1
2
3
4
5
6
7
8
9
10
11
12

(function () {
    for (var i = 1; i <= 100; i++) {
        if (!(i % 3) && !(i % 5))
            console.log("FizzBuzz");
        else if (!(i % 3))
            console.log("Fizz");
        else if (!(i % 5))
            console.log("Buzz");
        else
            console.log(i);
    }
})();

We can also use a variable and store the numbers in an array as well as print line no’s:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var fizzBuzz = function() {
    console.log("start fizzbuzz...\n");

    var fizzbuzz, result = [];

    for (var i = 0; i <= 100; i++) {
        if (i % 3 === 0 && i % 5 === 0) {
            fizzbuzz = "fizzbuzz";
        }
        else if (i % 5 === 0) {
            fizzbuzz = "Buzz";
        }
        else if ( i % 3 === 0) {
            fizzbuzz = "Fizz";
        }
        }
        else {
            fizzbuzz = i;
        }

        result.push(i + ":" + fizzbuzz);
    }

    console.log(result.join('\n'));
};

fizzBuzz();

There you have the basic implementations of FizzBuzz, probably more than you will need for any whiteboard as an interview question. There is however another implementation that you might get asked to undertake as a development test using the Jasmine testing framework.

For the ever curious, I suggest you take a look at the video just to familiarize yourself with the technique (especially if you haven’t used Jasmine). Some companies look for this level of coding comprehension before they even begin to take you on in an interview.