I am trying to better understand recursion by using the FizzBuzz problem in javascript

Question

I don't understand line 18? If the input is 100 how does program print out the number 1 first and end with the number 100 in the array? Any help would be appreciated.

function fizzBuzz(n){
  //create empty array called results
  //create base case for when n === 1
  //recurse and push value to array
  var results = [];
  if(n === 1){
    return [1];
  } else {
    if(n % 3 === 0 && n % 5 === 0){
      results.push('FizzBuzz')
    } else if (n % 3 === 0){
      results.push('Fizz')
    } else if (n % 5 === 0){
      results.push('Buzz')
    } else {
      results.push(n);
    }
      return fizzBuzz(n - 1).concat(results); // ???
    }
}

console.log(fizzBuzz(100));

`results` is poorly named -- it is always just a 1-element list hence the plural `s` is misleading. There is really no reason for it to be a list at all. Why not just call it `result`, have it be simply a scalar, and then just `fizzBuzz(n - 1).push(result)`? — John Coleman, Mar 03 '19 at 19:13
@JohnColeman "results" may be poorly named but the function has to return an array - the recursive calls build up an array which ultimately contains the "results" — n8wrl, Mar 04 '19 at 20:26

score 3 · Answer 1 · answered Mar 03 '19 at 19:14

It creates a results array with the last value (for 100) first, then recursively creates another array with the results for the values from 0 to 99, and in the end concatenates them in the right order.

You are right, this is confusing. A much better recursive implementation would be

function fizzBuzz(n) {
  if (n <= 0) {
    return [];
  }
  var results = fizzBuzz(n - 1);
  if (n % 3 === 0 && n % 5 === 0) {
    results.push('FizzBuzz');
  } else if (n % 3 === 0) {
    results.push('Fizz')
  } else if (n % 5 === 0) {
    results.push('Buzz')
  } else {
    results.push(n);
  }
  return results;
}

console.log(fizzBuzz(100));

score 2 · Accepted Answer · answered Mar 03 '19 at 19:11

The first thing to realize is that every call to fizzBuzz returns an array - it does not add to an existing array, it creates a new one every time.

So, if the input n is 1, it simply returns a single-element array with 1 in it.

If n > 1, there will be a recursive call. "results" has already been created as an empty array, so the .push() statements add a single element to that array:

If n is divisible by 3 and 5, the array will be ['FizzBuzz'] If n is divisible by 3 only, the array will be ['Fizz'] If n is divisible by 5 only, the array will be ['Buzz'] Otherwiese, the array will be [n] whatever n is.

Since n > 1 (or we wouldn't be here) we have to call FizzBuzz again with the next-lower n and concatenate its result to ours. This is how the long array is built - by concatenating the array returned from recursive calls to FizzBuzz.

score 1 · Answer 3 · answered Mar 03 '19 at 19:10

1

This line

fizzBuzz(n - 1).concat(results);

could be interpreted as "append the results we have just gathered for n to the results we generated for f(n - 1)." "Append a to b" means "put a after b." Think what this would do for n == 2, then generally.

answered Mar 03 '19 at 19:10

גלעד ברקן

23,602
3
25
61

I am trying to better understand recursion by using the FizzBuzz problem in javascript

3 Answers3