25: Functions and Recursion

In JavaScript you have the ability to do something called "recursion", but it's not a very safe thing to do. Recursion is where a function calls itself, and by doing that creates a loop. In JavaScript this causes a new function call, which means if you do it too much you run out of memory and cause a crash. However, if you are going to learn about "functional programming" you need to know how recursion works.

Consider this exercise a novelty that you shouldn't really use.

The Code

Recursion is very simple but many beginners get confused that it actually works. To them it seems odd that a function can call itself. There's nothing odd about it because you can usually combine features of a language, and calling a function is one of those features. Once you realize that this is possible you can create very complicated ways of looping that do not need for-of or while-loop style of processing.

In this code I simply loop over a range of numbers using recursion, and then do a more complex version that uses a callback.

View Source file code.js Only

// simple recursive counting function
const counter = (i, upto) => {
  if(i < upto) {
    console.log("counter", i, upto);
    counter(i+1, upto);
  }
}

// use counter to just print out 1-5
counter(1, 5);

// a more complex counter that can call a callback
const cb_counter = (i, upto, cb) => {
  if(i < upto) {
    cb(i, upto);
    cb_counter(i+1, upto, cb);
  }
}

// do the same thing but with a callback
cb_counter(1, 6, (i, j) => {
   console.log(i, j)
  });

I recommend you draw out how recursion works visually on a piece of paper, and try to write your own recursive functions to understand it.

What You Should See

When you run this you see the output of both functions:

counter 1 5
counter 2 5
counter 3 5
counter 4 5
1 6
2 6
3 6
4 6
5 6