Article Categories

Selected Reading

Referring JavaScript function from within itself

Javascript Web Development Object Oriented Programming

In JavaScript, a function can call itself from within its own body, which is known as recursion. This technique is useful for tasks like calculating factorials, traversing nested structures, or repeating operations until a condition is met.

What is Recursion?

Recursion occurs when a function calls itself. Every recursive function needs two key elements: a base case (condition to stop) and a recursive case (function calling itself with modified parameters).

Basic Example: Factorial Function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recursion Example</title>
</head>
<body>
    <h1>JavaScript Function Recursion</h1>
    <div id="result"></div>
    <button onclick="calculateFactorial()">Calculate 5!</button>
    
    <script>
        function factorial(n) {
            // Base case
            if (n === 0 || n === 1) {
                return 1;
            }
            // Recursive case - function calls itself
            return n * factorial(n - 1);
        }
        
        function calculateFactorial() {
            let result = factorial(5);
            document.getElementById("result").innerHTML = "5! = " + result;
        }
    </script>
</body>
</html>

5! = 120

How Recursion Works

When factorial(5) is called:

factorial(5) returns 5 * factorial(4)
factorial(4) returns 4 * factorial(3)
factorial(3) returns 3 * factorial(2)
factorial(2) returns 2 * factorial(1)
factorial(1) returns 1 (base case)

Countdown Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Recursion</title>
</head>
<body>
    <h1>Recursive Countdown</h1>
    <div id="countdown"></div>
    <button onclick="startCountdown()">Start Countdown</button>
    
    <script>
        function countdown(num) {
            let display = document.getElementById("countdown");
            
            if (num < 0) {
                display.innerHTML += "Blast off! <br>";
                return;
            }
            
            display.innerHTML += num + "<br>";
            
            // Function calls itself after 1 second
            setTimeout(() => {
                countdown(num - 1);
            }, 1000);
        }
        
        function startCountdown() {
            document.getElementById("countdown").innerHTML = "";
            countdown(5);
        }
    </script>
</body>
</html>

5
4
3
2
1
0
Blast off!

Key Points

Component	Purpose	Example
Base Case	Stops recursion	`if (n === 1) return 1;`
Recursive Case	Function calls itself	`return n * factorial(n - 1);`
Modified Parameter	Moves toward base case	`n - 1` in each call

Common Use Cases

Mathematical calculations (factorial, Fibonacci)
Tree traversal (DOM elements, file systems)
Parsing nested data structures
Implementing algorithms like quicksort

Conclusion

Recursion allows JavaScript functions to call themselves, making complex problems easier to solve. Always ensure you have a proper base case to prevent infinite loops and stack overflow errors.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

197 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next