My path to JavaScript: Functions, closures and recursion

Today I read chapters 5 (Functions) and 6 (Applied Functions and Closures) of Test Driven JavaScript development. In them, Christian Johansen goes deep into JavaScript powerful functions talking about functions as first class objects, closures, free variables, recursion, binding, namespaces, etc. I'm enjoying a lot his book.

To practice a bit with recursion and closures and also get more acquainted with Jasmine, I decided to do the FizzBuzz kata again but applying some of these concepts. I did TDD to get to a result which was very similar to the solution of FizzBuzz that I produced yesterday to try Karma and Jasmine.

This is the version from yesterday:

	var fizzbuzz = function (numbers) {
	var fizzbuzz_one = function (number) {
	var res = "";
	if (number % 3 == 0)
	res += "Fizz";
	if (number % 5 == 0)
	res += "Buzz";
	if (res == "")
	res = String(number);
	return res;
	};
	return (function f(acc, rest) {
	if (rest.length == 0)
	return acc;
	else if (rest.length == 1)
	return acc + fizzbuzz_one(rest[0]);
	else
	return f (acc + fizzbuzz_one(rest[0]) + " ", rest.slice(1));
	})("", numbers);
	};

view raw fizzBuzz1.js hosted with ❤ by GitHub

After the new version of FizzBuzz was working, I started to refactor its code focusing on removing as much duplication as possible and trying to make the code more general, so that, it could accept different sets of substitution functions each of them still based on "multiple of" predicates. I also tried to play with the scope rules to make private helper functions and use free variables to reduce the necessary number of parameters.

This is the new version of the code:

	var makeSubstitution = function (divisor, substitute) {
	return function substituteNumberBy(acc, number) {
	if (number % divisor == 0) {
	acc += substitute;
	}
	return acc;
	};
	};
	var substitute = function (numbers, substitutions) {
	function substituteOne (number) {
	var res = (function f(acc, remainingSubstitutions) {
	if (remainingSubstitutions.length == 0) {
	return acc;
	} else {
	acc = remainingSubstitutions[0](acc, number);
	return f(acc, remainingSubstitutions.slice(1));
	}
	}("", substitutions));
	if (res != "")
	return res;
	return String(number);
	}
	return (function f (acc, remainingNumbers) {
	if (remainingNumbers.length == 0) {
	return acc;
	} else {
	next = substituteOne(remainingNumbers[0]);
	if (remainingNumbers.length == 1) {
	return acc + next;
	} else {
	return f (acc + next + " ", remainingNumbers.slice(1));
	}
	}
	})("", numbers);
	};

view raw fizzBuzz2.js hosted with ❤ by GitHub

It has two public functions: makeSubstitution that is factory of substitution functions and substitute that is the generalization of the original fizzbuzz function. Like fizzbuzz did, substitute also receives a list of numbers that will be substituted only if they fulfill certain condition (being a multiple of 3, being a multiple of 5, etc). The difference is that substitute also receives a list of substitution functions.

Taking this into account, you can see that fizzbuzz(numbers) is equivalent to substitute(numbers, [makeSubstitution(3, "Fizz"), makeSubstitution(5, "Buzz")]).

This way we can create new games using different lists of substitution functions (that use "multiple of" predicates) without having to change substitute's code.

Have a look at "FizzKozz" at the end of the tests:

	describe("FizzBuzz", function () {
	var fizzBuzzSubstitutionRules;
	beforeEach(function () {
	fizzBuzzSubstitutionRules = [makeSubstitution(3, "Fizz"),
	makeSubstitution(5, "Buzz")];
	});
	it("returns empty string for an empty array", function () {
	expect(substitute([], fizzBuzzSubstitutionRules)).toBe("");
	});
	it("returns 1 for [1]", function () {
	expect(substitute([1], fizzBuzzSubstitutionRules)).toBe("1");
	});
	it("returns Fizz for [3]", function () {
	expect(substitute([3],
	fizzBuzzSubstitutionRules)).toBe("Fizz");
	});
	it("returns Fizz for [9]", function () {
	expect(substitute([9],
	fizzBuzzSubstitutionRules)).toBe("Fizz");
	});
	it("returns Buzz for [5]", function () {
	expect(substitute([5],
	fizzBuzzSubstitutionRules)).toBe("Buzz");
	});
	it("returns Buzz for [25]", function () {
	expect(substitute([25],
	fizzBuzzSubstitutionRules)).toBe("Buzz");
	});
	it("returns FizzBuzz for [15]", function () {
	expect(substitute([15],
	fizzBuzzSubstitutionRules)).toBe("FizzBuzz");
	});
	it("also works with arrays with more than one element", function () {
	expect(substitute([1, 2, 15],
	fizzBuzzSubstitutionRules)).toBe("1 2 FizzBuzz");
	});
	});
	describe("FizzKozz", function () {
	var fizzKozzSubstitutionRules = [makeSubstitution(3, "Fizz"),
	makeSubstitution(2, "Kozz")];
	it("uses substitute with different substitution rules", function () {
	expect(substitute([1, 2, 4, 6, 15],
	fizzKozzSubstitutionRules)).toBe("1 Kozz Kozz FizzKozz Fizz");
	});
	});

view raw fizzbuzz2Tests.js hosted with ❤ by GitHub

If you like, you can get the code of this a bit more generalized FizzBuzz version here.

JavaScript is a lot of fun!