Josh Sherman
FizzBuzz, the engineering smoke test that quickly reveals if somebody is drastically under qualified in their development abilities.
Even if you’re unfamiliar with the exercise, most are able to make short work of it. It only leverages a small handful of programming concepts that even the most novice developer should be comfortable with.
That said, I’ve never actually been given this particular coding challenge when applying for jobs. Most of the time I’ve been given small real world tasks that are somewhat indicative of the work I’d be doing on a daily basis.
And then sometimes I’ve been asked to build a linked list in Ruby…
…for a PHP role.
With that, I do like the challenge because it’s simple enough for me to implement in different languages that I am playing with and learning.
Most recently, I have been dabbling with TypeScript thought it would be fun to write a FizzBuzz in it as best as I can with my very limited experience with the syntax.
Also, TypeScript 3.0 was dropped recently, another good reason to mess around with it as my experience thus far had been with TypeScript 2.9.
Not the first time I’ve hopped on a language just before a major version was released. Looking at you PHP 3.0.
Another contributing factor to wanting to do this coding challenge in TypeScript is that a buddy of mine that’s recently started using it said that FizzBuzz would take hours.
I know he was exaggerating, but still, CHALLENGE ACCEPTED!
Before I get into the actual code, it’s probably worth mentioning what the code should be doing for a FizzBuzz. A successfully written FizzBuzz should do the following:
- Loop through numbers 1 to 100 (generally speaking on the upper limit)
- Print the word “Fizz” if the number is divisible by 3
- Print the word “Buzz” if the number is divisible by 5
- Subsequently print “FizzBuzz” if the number is divisible by 3 and 5
- Otherwise, just print out the current number
Depending on who’s issuing the challenge, they may expect the values to be comma
separated. For the sake of this post, I’m just dumping the values out with
console.log() each being on a new line.
Also, before we dig into the code, be sure you have typescript installed so
you can actually run this:
# via npm
npm install typescript -g
# via yarn
yarn global add typescript
You could also install typescript to your project instead of globally (which
is how I prefer to do things).
With typescript installed you will have access to tsc which we will use to
compile our TypeScript file into good ol’ JavaScript.
All right, let’s jump into the FizzBuzz code:
fizzbuzz.ts
let divBy3: boolean;
let divBy5: boolean;
let i: number;
let output: string;
for (i = 1; i <= 100; i += 1) {
output = '';
divBy3 = !(i % 3);
divBy5 = !(i % 5);
if (divBy3) output += 'Fizz';
if (divBy5) output += 'Buzz';
// Converts to a string because output is defined as such
if (!(divBy3 || divBy5)) output = i.toString();
console.log(output);
}
Not much too it, just a simple loop, a few sanity checks and a small bit of output. The key thing to note is that the variable definitions all have their type declared.
Because this isn’t valid JavaScript, running node fizzbuzz.ts is going to crap
out and complain about the unexpected colon on the very first line.
Never fear! We can use tsc to compile the TypeScript to JavaScript:
tsc fizzbuzz.ts
Then run the compiled JavaScript file with node:
node fizzbuzz.js
Which will dump out our results which should look something like this:
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
...
Took me longer to write this post than it did the actual FizzBuzz code. Definitely didn’t take hours, but I’m sure I could have went significantly deeper in regard to utilizing classes and interfaces versus just the code logic.
To help matters a bit, partly because I’m new to TypeScript and partly because
it’s good to have something automated checking your code, I used tslint.
Linting is always a good thing to do to help keep your code consistent with your coding style guide but also becomes a learning tool when working with a language or syntax you may not be familiar with.
