Recursive Functions in JavaScript

A recursive function is a function that calls itself in order to solve a problem that can be broken down into smaller problems.

function recursive(parameter, result) {
  if (baseCase) {
    return result;
  } else {
    // modify parameter
    // modify result
    return recursive(parameter, result);
  }
}

It essentially includes:

1. A base case, which is the condition under which the function stops calling itself in order to prevent infinite recursion.
2. A recursive case, which is the condition under which the function calls itself with modified arguments, progressing towards the base case.

Example

📚 Definition: In mathematics, the factorial of a non-negative integer n (written n!) is the product of all positive integers less than or equal to n.

n! = 1 x 2 x ... x n

For example: 3! = 1 x 2 x 3 = 6

Let's consider this script, that uses a while loop to iteratively calculate the factorial of an integer:

function factorial(number) {
  let sum = 1;

  if (number < 0) {
    return null;
  }

  while (number > 1) {
    sum = sum * number;
    number = number - 1;
  }

  return sum;
}

console.log('4! = ', factorial(4));

When executed, it will:

1. Define a new function named factorial that takes as argument a variable named number representing an integer.
2. Define a new local variable named sum and initialize it with the integer 1, used to store the result of the factorial function.
3. Check if the variable number is inferior to 0 and terminate the function's execution by returning a null value if it evaluates to true.
4. Otherwise, start a while loop that runs until the variable number is inferior to 1.
5. Multiply the current value of the variable sum by the value of the variable number.
6. Decrease the value of the variable number by 1.
7. Repeat the while loop from step 5.
8. Return the value of the variable sum.

Which will produce this output:

4! = 24

💡 Tip: Here is a visual representation of what happens at each iteration of the while loop:

sum =  1 x 4
    =  4 x 3
    = 12 x 2
    = 24 x 1

Example

Let's consider this script, that uses a recursive function to calculate the factorial of an integer:

function factorial(number, sum = 1) {  
  if (number < 0) {
    return null;
  } else if (number <= 1) {
    return sum;
  } else {
    return factorial(number - 1, number * sum);
  }
}

console.log('5! = ' + factorial(5));

When executed, it will:

1. Define a new function named factorial that takes as argument a variable named number representing an integer and a variable named sum used to store the final result.
2. Check if the value of the variable number is less than 0 and immediately return null if it evaluates to true.
3. Otherwise, check if the value of the variable number is less than or equal to 1 and stop the recursion by returning the value of the variable sum.
4. Otherwise, recursively call the function factorial by decrementing the number by 1 and passing the number multiplied by the sum as the new sum.

Which will produce this output:

5! = 120

💡 Tip: Here is a visual representation of what happens at each call of the factorial function:

factorial(5, 1)
factorial(4, 5)
factorial(3, 20)
factorial(2, 60)
factorial(1, 120)