Here is the original example of recursion in JavaScript from FreeCodeCamp:
Recursion For Kids: Robots That Help Smaller Robots
Intro
Okay, let’s imagine this in story mode so even an 8-year-old can follow.
The idea
Think of a recursive function as a little robot that knows how to do a job.
But instead of finishing the job all by itself, sometimes it says:
“Hey, smaller robot, can you do the same job but a little smaller?”
That smaller robot then asks an even smaller robot… and so on… until one of them says:
“Okay, this job is so small I can finish it right now.”
Then they all pass their answers back up the chain.
The code
function countup(n) {
if (n < 1) {
return [];
} else {
const countArray = countup(n - 1);
countArray.push(n);
return countArray;
}
}
console.log(countup(5));
Now, let’s break it down.
1. function countup(n)
This is the robot.
It takes one number (n) and tries to count from 1 up to that number.
2. if (n < 1) { return []; }
This is the “smallest job” rule, also called the base case.
If the number is less than 1, the robot says:
“I can’t count anything, so here’s an empty list.”
And it stops asking smaller robots.
3. const countArray = countup(n - 1);
If the number is bigger than 1, the robot doesn’t finish right away.
It calls a smaller robot with one less (n - 1).
Example: If n = 5, it asks: “Hey, can you count up to 4?”
4. countArray.push(n);
When the smaller robot finishes, it hands back a list like [1, 2, 3, 4].
The bigger robot says: “Cool, now I’ll just add myself (5) to the end.”
So the list becomes [1, 2, 3, 4, 5].
5. return countArray;
The robot returns the finished list back up the chain.
What happens step by step for countup(5)
countup(5) calls countup(4).
countup(4) calls countup(3).
countup(3) calls countup(2).
countup(2) calls countup(1).
countup(1) calls countup(0).
At countup(0), the robot says: “Base case! Here’s [].”
Now they all come back.
countup(1) takes [], adds 1 → [1].
countup(2) takes [1], adds 2 → [1, 2].
countup(3) takes [1, 2], adds 3 → [1, 2, 3].
countup(4) takes [1, 2, 3], adds 4 → [1, 2, 3, 4].
countup(5) takes [1, 2, 3, 4], adds 5 → [1, 2, 3, 4, 5].
Boom!
We’ve counted up to 5.
Key concepts (kid-friendly names)
Recursion = robots asking smaller robots for help.
Base case = the smallest job where the robot can stop.
Recursive call = asking a smaller robot (countup(n - 1)).
Stacking answers = each robot adds its number back into the list.
Do you want me to also show you a picture-style diagram (like robots in a line passing answers back) so it’s super visual?
Picture-style diagram (story mode)
Perfect — let’s draw this out in a story picture way.
Imagine robots in a line, each one holding a number.
Each robot asks the next smaller one for help, until the last one finishes the job.
Then they all add their numbers on the way back.
Step 1: Call countup(5)
烙 (robot 5):
“Hey robot 4, can you count up to 4 for me?”
Step 2: Call countup(4)
烙 (robot 4):
“Sure, but first I’ll ask robot 3.”
Step 3: Call countup(3)
烙 (robot 3):
“Let me check with robot 2.”
Step 4: Call countup(2)
烙 (robot 2):
“I’ll ask robot 1.”
Step 5: Call countup(1)
烙 (robot 1):
“I’ll ask robot 0.”
Step 6: Base case
烙 (robot 0):
“I can’t count below 1, so here’s an empty list: []”.
Now they pass answers back up
Robot 1 takes [], adds itself → [1].
Robot 2 takes [1], adds itself → [1, 2].
Robot 3 takes [1, 2], adds itself → [1, 2, 3].
Robot 4 takes [1, 2, 3], adds itself → [1, 2, 3, 4].
Robot 5 takes [1, 2, 3, 4], adds itself → [1, 2, 3, 4, 5].
Final Picture (robots in a chain)
countup(5) → countup(4) → countup(3) → countup(2) → countup(1) → countup(0)
↑ ↑ ↑ ↑ ↑
[1,2,3,4,5] [1,2,3,4] [1,2,3] [1,2] [1]
They all stack their numbers back into the list like climbing back up a ladder.
Would you like me to make a cartoon-style image of these robots passing lists so it’s visual like a comic?
(Previous image generation result included in the conversation)
This 2D illustration portrays five cartoon robot characters in a diagonal progression, each symbolizing a step in the recursive function countup(n).
From right to left, each robot, numbered from 0 to 5, holds a speech bubble showing an array and is connected by curved arrows to depict the sequence of recursive calls.
Key concepts (short)
Recursion means a function calls itself to solve a smaller version of the same problem.
Base case is the tiny job where we stop calling ourselves and just return an answer.
Recursive call is the ask to a smaller robot such as countup(n - 1).
Stacking answers is the trip back where each robot adds its number to the list.
Why The Output Is [1, 2, 3, 4, 5]
Each smaller robot builds part of the list and the bigger robot appends its number at the end.
When we return to the first robot we have the full list from 1 to 5.
Comments
Post a Comment