Recursive functions for beginners in javascript

Fractal Image of Pete Linforth by Pixabay

As a non mathematician, creating your first recursive functions can be overwhelming.

You tried to emulate the exercises that you saw in the internet but “maximum call stack” errors are always poping in your brain 😵 and on the console of your IDE too.

Well, recursive functions are a skill.

As with all the other skills, if you want to master it, you’ll have to pratice it first. There is no other way.

That said, you may have a easier life if you use a simple 3 steps technique.

A recursive function is a function that calls itselft (recurses) until it reaches the base case. So the trick to build any simple recursive function is to divide the function in 3 parts:

• Side effect
• Base case (which can also be called terminating case)
• Recurse case

For better understanding of this 3 parts concept let’s make the following exercise:

Let’s develop a recursive function that prints in the console, every value, starting from the argument of the function, inclusive, until the number “5”, as the following example shows:

printEveryValueUntil5(1);
// 1
// 2
// 3
// 4

In first place let’s write the function structure:

function printEveryValueUntil5(value){
  // side effect
  // terminating case
  // recurse case
}

After that let’s define the single most important thing in a recursive function: The terminating case or base case, which is what will tell your function when to stop and avoid an infinite loop.

In this case you want the function to stop when you reach 5 or when the argument is equal or greater than 5.

function printEveryValueUntil5(value){
  // side effect
  // terminating case
  if (value >= 5) {
    return value;
  }
  // recurse case
}

The next step is to write the side effect function. The sideEffect responsability, in every recursive function, is to execute the work that is pretended and generate the argument to the next recurse call. In this case the side effect will print the current value of the argument and increment it to pass it as argument to the recurse call.

function printEveryValueUntil5(value){
  // side effect
  function sideEffect() {
    console.log('value: ' + value);
    value = value + 1;
  };
  // terminating case
  if (value >= 5) {
    return value;
  }
  // recurse case
}

The last step, the recurse case, is the most simple and is always the same. You execute the sideEffect function that you defined earlier and call the recursive function (or recurse in other words).

function printEveryValueUntil5(value){
  // side effect
  function sideEffect() {
    console.log('value: ' + value);
    value = value + 1;
  };
  // terminating case
  if (value >= 5) {
    return value;
  }
  // recurse case
  sideEffect();
  return printEveryValueUntil5(value);
}

And that’s it! 🎉 You can extrapolate this technique to develop any simple recursive function that you may imagine, infallibly, guaranteed and with the bonus of avoiding to melt your brain while developping the function.

If you want examples of this technique working you may check the following repl.it.

If you liked the explanation, you can find more interesting articles at https://medium.com/boring-notebook