FizzBuzz coding challenge

Whilst I was going through my backlog of videos to watch, I watched this video which explains the use of a coding interview question; The FizzBuzz coding interview question. I wanted to have a go at answering the question myself and wanted to share my thought process as I did it.

I stopped the video at around 1:40 as I wanted to go through an answer it myself without seeing the answer within the video.

My solutions

With the above question in mind, my first thought on how to approach this was how to determine the multiples of 3 and 5. What came to mind was the modulus/remainder operator% I knew that multiples of 3 & 5 should retain remainder 0, so this could be used to determine when to output the correct text.

To start the challenge I used jsfiddle and I created the following as my starting point:

1function fizzbuzz(num) {
2    return num
3}
4for (let i = 1; i <= 100; i++) {
5    console.log(fizzbuzz(i))
6}

I then started on my implementation which first looked like this:

1function fizzbuzz(num) {
2    if (num % 3 === 0 && num % 5 === 0) {
3        return `fizzbuzz`
4    } else if (num % 3 === 0) {
5        return `fizz`
6    } else if (num % 5 === 0) {
7        return `buzz`
8    }
9    return num
10}
11for (let i = 1; i <= 100; i++) {
12    console.log(fizzbuzz(i))
13}

First I check if the number is a multiple of 3 & 5 if so I return the combined fizzbuzz text, I then check if the number is a multiple of either 3 or 5 and output the correct text, falling back to just returning the initial number.

This is quite verbose and has a bit of duplication of the checks for the multiples, so I thought I would improve my answer.

1function fizzbuzz(num) {
2    const isFizz = num % 3 === 0
3    const isBuzz = num % 5 === 0
4    if (isFizz && isBuzz) {
5        return `fizzbuzz`
6    } else if (isFizz) {
7        return `fizz`
8    } else if (isBuzz) {
9        return `buzz`
10    }
11    return num
12}
13for (let i = 1; i <= 100; i++) {
14    console.log(fizzbuzz(i))
15}

So, this is better but still a bit verbose, we have removed the duplicated checks into a single check that can be re-used, but still has the multiple if statement. How can this be reduced and made more concise I thought.

Here is my final solution:

1function fizzbuzz(num) {
2    const isFizz = num % 3 === 0
3    const isBuzz = num % 5 === 0
4    return `${isFizz ? 'fizz' : ''}${isBuzz ? 'buzz' : ''}` || num
5}
6for (let i = 1; i <= 100; i++) {
7    console.log(fizzbuzz(i))
8}

I removed the if statement in favour of a ternary within a template literal which uses a short-circuit operator to fallback to the number. This boils down to creating a string which first checks if the number is a multiple of 3 which will then add the word fizz, then checks if the number is a multiple of 5 which will add the word buzz. Which will account for being either and both, and it will be an empty string if neither of them is truthy in this case the short-circuit operator will evaluate the empty string as falsey and will use the what is on the right hand of the operator which is the initial number.