Search 6,000+ tutorials Forum Donate

Learn to code — free 3,000-hour curriculum

AUGUST 22, 2017 / #JAVASCRIPT

How Recursion Works — Explained with

Flowcharts and a Video
Beau Carnes

Illustration (and all in this article) by Adit Bhargava

“In order to understand recursion, one must rst understand

recursion.”

Recursion can be tough to understand — especially for new programmers. In

its simplest form, a recursive function is one that calls itself. Let me try to
explain with an example.

Imagine you go to open your bedroom door and it’s locked. Your three-year-
old son pops in from around the corner and lets you know he hid the only key
in a box. (“Just like him,” you think.) You're late for work and you really need to
get in the room to get your shirt.

You open the box only to nd… more boxes. Boxes inside of boxes. And you
don’t know which one has the key! You need to get that shirt soon, so you
have to think of a good algorithm to nd that key.

There are two main approaches to create an algorithm for this problem:
iterative and recursive. Here are both approaches as ow charts:

Which approach seems easier to you?

The rst approach uses a while loop. While the pile isn’t empty, grab a box and
look through it. Here’s some JavaScript-inspired pseudocode that shows what
is happening. (Pseudocode is written like code, but meant to be more like
human speech.)

function look_for_key(main_box) {
let pile = main_box.make_a_pile_to_look_through();
while (pile is not empty) {
box = pile.grab_a_box();
for (item in box) {
if (item.is_a_box()) {
pile.append(item)
} else if (item.is_a_key()) {
console.log("found the key!")
}
}
}}

The second way uses recursion. Remember, recursion is where a function

calls itself. Here’s the second way in pseudocode.

function look_for_key(box) {
for (item in box) {
if (item.is_a_box()) {
look_for_key(item);
} else if (item.is_a_key()) {
console.log("found the key!")
}
}
}

Both approaches accomplish the same thing. The main purpose for using the
recursive approach is that once you understand it, it can be clearer to read.
There is actually no performance bene t to using recursion. The iterative
approach with loops can sometimes be faster. But mainly the simplicity of
recursion is sometimes preferred.

Also, since a lot of algorithms use recursion, it’s important to understand how
it works. If recursion still doesn’t seem simple to you, don’t worry: I’m going to
go over a few more examples.

Base case and recursive case

Something you have to look out for when writing a recursive function is an
in nite loop. This is when the function keeps calling itself… and never stops
calling itself!

For instance, you may want to write a count down function. You could write it
recursively in JavaScript like this:

// WARNING: This function contains an infinite loop!

function countdown(i) { console.log(i) countdown(i - 1)}

countdown(5); // This is the initial call to the function.

This function will keep counting down forever. If you do accidentally run code
with an in nite loop you can press “Ctrl-C” to kill your script. (Or, if you
sometimes use CodePen like me, you have to add “?turn_off_js=true” to the
end of the URL.)

A recursive function always has to say when to stop repeating itself. There
should always be two parts to a recursive function: the recursive case and the
base case. The recursive case is when the function calls itself. The base case is
when the function stops calling itself. This prevents in nite loops.

Here is the countdown function again, with a base case:

function countdown(i) {
console.log(i) if (i <= 1) { // base case
return;
} else { // recursive case
countdown(i - 1);
}
}

countdown(5); // This is the initial call to the function.

It may not be obvious exactly what is happening in this function. I’ll walk
through what happens when you call the countdown function passing in “5”.

We start by printing out the number 5 using console.log . Since ve is not

less than or equal to zero, we go to the else statement. There we call the
countdown function again with the number four (5–1=4 ?).

We log the number 4. Again, i is not less that or equal to zero so we go to the
else statement and call countdown with 3. This continues until i equals zero.
When that happens, we log the number zero and then i is less than or equal
to zero. We nally get to the return statement and pop out of the function.

The Call Stack

Recursive functions use something called “the call stack.” When a program
calls a function, that function goes on top of the call stack. This similar to a
stack of books. You add things one at a time. Then, when you are ready to take
something off, you always take off the top item.

I will show you the call stack in action with the factorial function. factoria
l(5) is written as 5! and it is de ned like this: 5! = 5 * 4 * 3 * 2 * 1. Here is a
recursive function to calculate the factorial of a number:

function fact(x) {
if (x == 1) {
return 1;
} else {
return x * fact(x-1);
}
}

Now let’s see what happens if you call fact(3) The illustration bellow shows
how the stack changes, line by line. The topmost box in the stack tells you
what call to fact you’re currently on.

Image credit: Adit Bhargava

Notice how each call to fact has its own copy of x . This is very important to
making recursion work. You can’t access a different function’s copy of x.

Did you find the key yet?

Let’s brie y go back to the original example about looking in nested boxes for
a key. Remember, the rst method was iterative using loops. With that
method, you make a pile of boxes to search through, so you always know what
boxes you still need to search.

But there is no pile in the recursive approach. How does your algorithm know
which boxes you still have to look though? The “pile of boxes” is saved on the
stack. This is a stack of half-completed function calls, each with its own half-
complete list of boxes to look through. The stack keeps track of the pile of
boxes for you!

And thanks to recursion, you can nally nd the key and get your shirt!

You can also watch this 5-minute video I made about recursion. It should
reinforce these recursion concepts.

Conclusion
I hope this article brought you more clarity about recursion in programming.
This article is based on a lesson in my new video course from Manning
Publications called Algorithms in Motion. The course (and also this article) is
based on the amazing book Grokking Algorithms by Adit Bhargava. He’s the
one who drew all the fun illustrations in this article.

If you learn best through books, get the book! If you learn best through
videos, consider buying my course.

Get 39% off my course by using code ‘39carnes’!

And nally, to truly understand recursion, you must read this article again. ?

Beau Carnes
I'm a teacher and developer with freeCodeCamp.org. I run the freeCodeCamp.org YouTube channel.

If you read this far, tweet to the author to show them you care.
Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped
more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonpro t Trending Guides

organization (United States Federal Tax Identi cation Number: 82-
10 to the Power of 0 Recursion Inductive VS Deductive
0779546)
Git Reset to Remote ISO File JavaScript Empty Array
Our mission: to help people learn to code for free. We accomplish this
R Value in Statistics ADB Best Instagram Post Time
by creating thousands of videos, articles, and interactive coding
What is Economics? MBR VS GPT Garbage Collection in Java
lessons - all freely available to the public. We also have thousands of
Module Exports Debounce Auto-Numbering in Excel
freeCodeCamp study groups around the world.
Python VS JavaScript Helm Chart JavaScript Keycode List
Donations to freeCodeCamp go toward our education initiatives and
Model View Controller 80-20 Rule JavaScript Reverse Array
help pay for servers, services, and staff.
React Testing Library OSI Model How to Screenshot on Mac

ASCII Table Chart HTML Link Code How to Reverse Image Search
You can make a tax-deductible donation here.
Data Validation SDLC Ternary Operator JavaScript

About Alumni Network Open Source Shop Support Sponsors Academic Honesty Code of Conduct Privacy Policy Terms of Service Copyright Policy