In the introduction article we have stopped at the passable solution.
However the way the code is currently constructed makes it look like debris scattered on the sand. There’s no context. If you needed to use this inside an actual program, would you be able to stick it anywhere just like that?
Of course not. It’s a piece of code designed to do something. That’s why we’re going to encapsulate it within a function.
Now imagine that you’d be asked to do the same task for a range other than 1-100. You’d need to rewrite the function slightly, right? Why do that when you have the option of adding range parameters?
So…
Looking better. But now you could argue that tomorrow you’d be asked to rewrite the algorithm so that fizz and buzz stand for other values.
Therefore…
So calling the function to serve the original test would look like this:
fizzbuzz(1, 100, 3, 5);
Admittedly we should have been at a better position now, but actually our function suffers from parameter overload.
When looking at the above function call it’s almost impossible to understand which parameter stands for what, unless we look at the function itself. Don’t let the numbers confuse you into understanding the parameters, fizzbuzz(3, 5, 3, 5) is a perfectly legitimate example.
Also the function is too dependent on parameter order. Imagine the generic function sum(a,b). Who cares if you confuse the order? It would still act the same regardless. This is not our case.
So how do we solve this problem? Fortunately Javascript provides an excellent way: use an object as parameter.
fizzbuzz({from: 5, to: 15, fizz: 3, buzz: 5})
One parameter to rule them all.
…Only we have a huge problem here! Call the function without any parameters and see what happens.
We have a flexible function but it’s way too fragile. This can be easily resolved using default values within the function itself.
And even slightly better:
Why does this work? Because undefined is a falsey value. So it’s either the original param, or a fallback which will resolve to true.
As a side note, try this in the console:
({} == true)
And this
({} == false)
And this on the other hand:
if ({}) console.log(“So is it true or false?”)
Our function still lacks something. The problem is that the function does literally nothing besides outputting text to the console. For every other purpose it is completely useless. In order for it to be valuable it needs to return a value.
So let’s modify it slightly to return an array.
Of course that now the function returns something instead of doing something, you’ll need to log the function call, e.g.:
console.log(fizzbuzz({from: 1, to: 100, fizz: 3, buzz: 5});
(You may be tempted to ask “why an array and not a string”? Great question, thank you for asking. I’ll challenge you to modify the function in order to make output a comma delimited string. Don’t say I didn’t warn you about that trailing comma…)
So, pops, are we done yet? Can we go out and play now?
No, kids, we’ve just started. Your function is flexible, scalable and bulletproof. But the syntax is ancient!
We’ll explore a more modern syntax in the next article.
