A Simple Primer in JavaScript Recursion

Follow us on LinkedIn for our latest data and tips!

, ,

A Simple Primer in JavaScript Recursion

Recursion is a concept that is not unique to JavaScript. It is used in all programming languages. Though it is an important part of Javascript that sometimes gets muddled or overtly complex. Recursion is simply when a function calls itself.

A function that calls itself is comparable to a loop. Both of these methods are executing their code multiple times. They also both require a condition to stop an infinite loop or infinite recursion. A simple example of recursion is seen through factoring.

Factorial Recursion

The mathematical concept of a factorial is a perfect case to use recursion. A factorial is represented by (n!). For example, n! = 1×2×3×4×..×n is the main formula. The following examples show the start of a factorial table.

1! = 1
2! = 1×2 = 2
3! = 1×2×3 = 6
4! = 1×2×3×4 = 24
5! = 1×2×3×4×5 = 120
6! = 1×2×3×4×5×6 = 720

The underlying concept of recursion is doing the same thing over and over again. Factorials demonstrate this and can be programmed into a recursive function. The following code is an example of this.

function factorial( n ) {
if ( n === 1 ) {
return 1;
return n * factorial( n - 1 );

This code fits the correct parameters for recursion. The function is calling upon itself and it has a condition — return, to stop itself from entering into an infinite recursion. This is the simplest demonstration of the concept.

Loop to Recursion

Another great example of recursion can be seen from converting a loop. Take, for example, this simple countdown while loop.

var countdown = 5;
while(countdown > 0) {

When this loop executes, countdown’s value changes with each print out of the subsequent number. This same while loop can be written using a recursive function.

var counter = function(amount) {
if (amount > 0) {
return counter(amount - 1);
} else {
return amount;

The counter is called upon inside the definition of counter function. Each time counter is executed the engine tracks where it’s being called from. The major difference is that this function hasn’t modified the state of the internal variables inside the function. It executes them one after the other. It doesn’t store them and let them stack up on one another.

Tail Call Optimisation

When a function calls itself recursively in Javascript it creates a new stack. A stack is a block of memory that keeps track of the function’s information. Creating a stack causes the JavaScript engine to work much harder and drain memory. This can cause an error if not coded correctly. Herein lies the next example.

function factorial(n, register) {
if (n === 1) {
return register
return factorial(n — 1, n * register)
factorial(6, 1) // == 720

A tail call function returns the value from the original return value. The last return factorial(n — 1, n * register) line is the tail call. This is a standard way to prevent a recursion from stacking onto themselves repeatedly and draining away all the memory. Recursive functions in JavaScript need to track where they’ve been called every time.

Tail call optimization has become standard in ES6 and they makes sure that each recursion cycle is called one after the other. This avoids stacked up memory. Tail call optimization is considered one of the more difficult methods to learn about. But it is an essential tool in creating or deconstructing a recursion function.

Overall, all of these examples can help guide a developer’s understanding of recursion functions. They are helpful for factoring, looping more efficiently and executing anything repetitive that calls upon itself.