DEV Community

Falade Timilehin
Falade Timilehin

Posted on

FizzBuzz Theory

#javascript #webdev #interview #programming

In this article, we look at FizzBuzz, a very common programming task in software development interviews. Since the solution utilizes a few major concepts, this task has become a go-to for interviewers.

If you are new to the concept, I’d recommend you follow step by step to understand the concept as a whole. However, If you are here to refresh your knowledge, you can jump straight to the solutions.

What is FizzBuzz?

Firstly, let’s get this out of the way, FizzBuzz is a task where the programmer is asked to print numbers from 1 to 100, but here’s the catch, multiple of three should print “Fizz” and similarly print “Buzz” for multiples of 5 and lastly print “FizzBuzz” for multiples of three and five.

Although the last may seem straightforward, even seasoned programmers tend to get the logic wrong at times.

Given an integer n, return a string array answer (1-indexed) where:

answer[i] == "FizzBuzz" if i is divisible by 3 and 5.
answer[i] == "Fizz" if i is divisible by 3.
answer[i] == "Buzz" if i is divisible by 5.
answer[i] == i (as a string) if none of the above conditions are true.

**
 * @param {number} n
 * @return {string[]}
 */
var fizzBuzz = function(n) {
let answer = [];
    for(let i = 1; i <= n ; i++){
        if(i % 15 === 0){
        answer[i] = "FizzBuzz"
        continue
        }
        else if(i % 3 ===0 ){
         answer[i] = "Fizz"
         continue
        }
        else if(i % 5 === 0){
            answer[i] = "Buzz"
            continue
        }
        else{
         answer[i] = `${i}`
         continue
        }
    }
answer.shift();
    return answer;
};
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
tracygjg profile image
Tracy Gilmore • • Edited

Hi Falade,
Please accept my comments as constructive and in the interest of giving your readers the best possible information. First, can I suggest you might want to use the fenced code block syntax in your future posts (with the javascript keyword) to get syntax colouring, as shown below.
Whilst the solution you provide above works correctly, as someone usually the other side of the technical interview table, I would like to point out a few things.

  1. I am not sure why you used a function expression instead of a regular function function fizzBuzz(n) { but it is not wrong, just a little odd.
  2. The continue keywords do nothing as you have use else to guard later conditions, so they can be removed without impacting the functionality.
  3. The answer.shift() call also does nothing and can be removed.
  4. Using answer[i] to add a value to the answers array is also a little unconventional when the Array.push method is available.

The result would be something like:

function fizzBuzz(n) {
    let answer = [];
    for (let i = 1; i <= n; i++) {
        if (i % 15 === 0) {
            answer.push('FizzBuzz');
        } else if (i % 3 === 0) {
            answer.push('Fizz');
        } else if (i % 5 === 0) {
            answer.push('Buzz');
        } else {
            answer.push(`${i}`);
        }
    }
    return answer;
}
Enter fullscreen mode Exit fullscreen mode

To take this one step further, we can remove the if...else altogether using the ternary operator. This way when i = 15 we still get FizzBuzz, also when not Fizz or Buzz, the value of i is still added to the array as a string.

function fizzBuzz(n) {
    let answer = [];
    for (let i = 1; i <= n; i++) {
        let result = i % 3 ? '' : 'Fizz';
        result += i % 5 ? '' : 'Buzz';
        result += result.length ? '' : i;

        answer.push(result);
    }
    return answer;
}

console.table(fizzBuzz(20));
Enter fullscreen mode Exit fullscreen mode

In the above example you will see I used the console.table call to execute the function and present the results.

Keep posting, keep learning (I am), regards, Tracy

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

Another one, allowing you to change 'Fizz' and 'Buzz' if you like:

const fizzBuzz = (i, f='Fizz', b='Buzz') => [...Array(i).keys()]
   .map(x => [++x, f, b, f + b][!(x % 5) * 2 + !(x % 3)])
Enter fullscreen mode Exit fullscreen mode

😛

Read next

olatunjiayodel9 profile image

To create a new Node.js project and work with dependencies, you'll need to follow these steps

Olatunji Ayodele Abidemi -

spiff profile image

Calculator with GUI Using Python Tkinter

Ebikara Dandeson Spiff -

akbarnafisa profile image

Setup NGINX

Akbar Nafisa -

blugreenspace profile image

Finding Which Columns Value Has Actually Changed in PostgreSQL Trigger Functions

blugreenspace -