FizzBuzz in Javascript line by line.

Ruby_to_JS.md

FizzBuzz in Javascript line by line.

With comparisons to Ruby.

function FizzBuzz() {

}

• First we create a function FizzBuzz that takes no arguments.

var fizzBuzz = new FizzBuzz();
var fizzBuzzLong = new FizzBuzz();

• Then we create two new variables fizzBuzz and fizzBuzzLong.
• Even though they look like instances of class FizzBuzz, they're not. FizzBuzz is not a class, it's a function (constructor).
• However, we can use the FizzBuzz function to instantiate objects (fizzBuzz, fizzBuzzLong) and tell them to share the same behaviour (eg. both can use the methods prototyped for FizzBuzz - see below).
• fizzBuzz and fizzBuzzLong can have thir own play methods (that will overwrite the FizzBuzz's prototyped play method.)
• Let's see the first prototyped method for FizzBuzz.

FizzBuzz.prototype.play = function(number) {
  if (this._isDivisibleBy(15, number)) {
    return 'FizzBuzz';
  } else if (this._isDivisibleBy(5, number)) {
    return 'Buzz';
  } else if (this._isDivisibleBy(3, number)) {
    return 'Fizz';
  } else {
    return number;
  }
}

• The first line - FizzBuzz.prototype.play = function(number) - creates a function play which accepts one argument(number) and can be called on objects which are instances of FizzBuzz - like our variables fizzBuzz and fizzBuzzLong.
• Now let's take a look at the if statement and explain it on the example of the first two lines:

  if (this._isDivisibleBy(15, number)) {
    return 'FizzBuzz';
  }

• this in JS works like self in Ruby. As we will (later) call this play method on instances of FizzBuzz (fizzBuzz, fizzBuzzLong), this this keyword will refer to a particular instance upon which the method will be called.
• Generally we need this keyword to call a function (_isDivisibleBy) inside other function (play). We cannot call a method on no object - it needs to refer to something - and that's why we need this this :)
• _isDivisibleBy is another function, called inside of play function. It uses two arguments - 15 (a divisor) and a number that was already passed in the play method.
• In order to explain the return, we need to take a look at the _isDivisibleBy method.

FizzBuzz.prototype._isDivisibleBy = function(divisor, number) {
  return number % divisor === 0;
}

• _isDivisibleBy is also a function which can be used by instances of FizzBuzz.
• The _ before its name suggests that it shouldn't be called by the instances, but only used internally - in other methods.
• But we can try to call it anyway (for the sole purpose of studying :D )

function FizzBuzz() {

}

var fizzBuzz = new FizzBuzz();

FizzBuzz.prototype._isDivisibleBy = function(divisor, number) {
  return number % divisor === 0;
}
fizzBuzz._isDivisibleBy(2, 10) //true

• _isDivisibleBy function accepts two arguments that are passed into it inside the play method.

• If the number % divisor === 0, then the function returns true, otherwise it returns false.

• Coming back to the play method - if _isDivisibleBy returns true, play returns FizzBuzz.

• Now let's call the play method on fizzBuzz and fizzBuzzLong and see it in practice.

• First we call it on fizzBuzz, specifying that we're interested in the numbers from 1 to 20.

for (var i = 1; i <= 20; i++) {
  console.log(fizzBuzz.play(i));
}

• As a result we get this:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz

• Now let's call it on fizzBuzzLong and see numbers from 1 to 40.

for (var i = 1; i <= 40; i++) {
  console.log(fizzBuzzLong.play(i));
}

2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz

• Now we can clearly see that the this keyword mentioned above referes to the particular instances of the FizzBuzz and the predefined scope of play function.