FizzBuzz is a famous algorithmic problem used in software development job interviews:
- Display a list of numbers from 1 to 100, one per line.
- If the number is a multiple of 3, display Fizz instead.
- If the number is a multiple of 5, display Buzz instead.
- If the number is a multiple of 3 and 5, display FizzBuzz instead.
Here are 4 different JavaScript solutions to the FizzBuzz problem:
The Junior Developer
for( i=1; i<=100; i++) {
if( (i % 3 == 0) && (i % 5 == 0)) {
document.write("FizzBuzz");
} else if(i % 3 == 0) {
document.write("Fizz");
} else if(i % 5 == 0) {
document.write("Buzz");
} else {
document.write(i);
}
document.write("<br>");
}
The Experienced Developer
for( var i=1; i<=100; i++) {
if( i % 15 == 0) {
str += "FizzBuzz";
} else if(i % 3 == 0) {
str += "Fizz";
} else if (i % 5 == 0) {
str += "Buzz";
} else {
str += i;
}
str += "<br>";
}
document.write(str);
The JavaScript Guru
// Super-optimised version of FizzBuzz
var array = [];
array[3] = array[6] = array[9] = array[12] = "Fizz<br>";
array[5] = array[10] = "Buzz<br>";
array[0] = "FizzBuzz<br>";
var str = "";
for( var i=1; i<=100; ++i) {
str += array[ i%15 ] || i + "<br>";
}
window.onload = function() {
document.body.innerHTML = str;
}
The Senior Developer
// TODO Fix missing 'Buzz' at the end.
// TODO Rewrite using XML
try {
document.write("1<br> 2<br> Fizz<br> 4<br> Buzz<br> Fizz<br> 7<br> 8<br> Fizz<br> Buzz<br> 11<br> Fizz<br> 13<br> 14<br> FizzBuzz<br> 16<br> 17<br> Fizz<br> 19<br> Buzz<br> Fizz<br> 22<br> 23<br> Fizz<br> Buzz<br> 26<br> Fizz<br> 28<br> 29<br> FizzBuzz<br> 31<br> 32<br> Fizz<br> 34<br> Buzz<br> Fizz<br> 37<br> 38<br> Fizz<br> Buzz<br> 41<br> Fizz<br> 43<br> 44<br> FizzBuzz<br> 46<br> 47<br> Fizz<br> 49<br> Buzz<br> Fizz<br> 52<br> 53<br> Fizz<br> Buzz<br> 56<br> Fizz<br> 58<br> 59<br> FizzBuzz<br> 61<br> 62<br> Fizz<br> 64<br> Buzz<br> Fizz<br> 67<br> 68<br> Fizz<br> Buzz<br> 71<br> Fizz<br> 73<br> 74<br> FizzBuzz<br> 76<br> 77<br> Fizz<br> 79<br> Buzz<br> Fizz<br> 82<br> 83<br> Fizz<br> Buzz<br> 86<br> Fizz<br> 88<br> 89<br> FizzBuzz<br> 91<br> 92<br> Fizz<br> 94<br> Buzz<br> Fizz<br> 97<br> 98<br> Fizz<br>");
} catch(exception) {
document.write("Error: browser doesn't support the document.write() method.");
}
Bonus – The CSS Guru
<html>
<head>
<style>
body {
counter-reset: number;
}
a:after {
content: counter(number);
counter-increment: number;
display: block;
}
a:nth-child(3n):after, a:nth-child(15n):before {
content: "Fizz";
}
a:nth-child(5n):after {
content: "Buzz";
}
</style>
<script>
window.onload = function() {
for(var i=0; i<100; ++i) {
document.body.appendChild(document.createElement("a"));
}
}
</script>
</head>
<body>
</body>
</html>
FizzBuzz Ver 2.1