An introduction to recursion in Javascript

Photo by Tine Ivanič on Unsplash

If you’re exploring functional programming, then it is worth learning how to loop, as looping is a key tool you’ll find your self using throughout your projects. There’s no way to really avoid it in this industry, that is unless you just write very small apps with no repetitive elements.

If you’re familiar with for, while, and forEach ways of looping, in functional programming, you should put that behind you as those are for (no pun intended) the OOP/Imperative paradigm. Definitely don’t forget them though. After all, functional programming isn’t a religion, it’s simply a way of writing code, that is mostly dependent on what your project requires.

Don’t tell the others I said that though, they may consider that a form of blasphemy. *cough*.

At it’s heart, recursion is just a function calling its self from within (or an higher order function calling an lower-order function x amount of times).

Let’s look at a simple recursive function.

const rebelScum = (times, index = 0) => {
   if (index === times) return;
   console.log('You rebel scum.');
   rebelScum(times, index + 1);
};

This will, as you can probably guess, output “You rebel scum.” x amount of times to the console. At its heart, this is more or less how a for loop works. These are some simple guidelines to building a recursive function:

1. Must have a counter parameter.
2. Must have an exit condition.

That’s pretty much it. Simple right? Yep! A recursive function can:

• Have multiple counters for nth dimensional arrays/objects.
• Dynamically alter how many times it loops.
• Make espresso (or not).

Let’s look at a more practical recursive function:

Recursive compound function

We get an output of:

Output

Here’s what happens:

• First, it checks to see if index is equal to the period. If it is, it returns (skips to the end) and then returns the array.
• The else statement fires first, as the index is not greater than 0, compounding the starting principle and adding it as the first element in the array.
• The function calls its self, passing its self the updated content as arguments and proceeds through all the if statements once again.
• As index is now greater than 0, it compounds the last array element and pushes that to the array.
• On the last go around, index is now equal to T and thus makes a scoped return, skipping to the end of the function and returning the array.

If we don’t provide the first check, or put it last, we get an infinite loop otherwise known as a stack overflow or in JS, maximum call stack exceeded. The loop may actually not be infinite (although it certainly could be), but the function is called so many times that it exceeds either browser or system memory available.

Here’s another example that creates an array of rgb colors:

This is not the only way to do recursion though. You could also use a recursive function to call a regular function using the same principles above.

Let’s recap:

• Recursion is when a function calls its self or another function until it reaches a conditional exit (or crashes your IDE).
• You should ALWAYS implement a way for a recursive function to exit.
• Recursive functions are most often used in functional programming.
• It could be considered a mortal sin to some to use for and while loops in functional programming so recursion is a must have skill.
• Despite the above…functional programming isn’t a religion 😏.