Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Recursion example in JavaScript to display numbers is descending order?
In this article, we will display numbers in descending order using recursion in JavaScript. Recursion is a programming technique where a function calls itself to solve smaller instances of the same problem.
Input-Output Scenario
Let's look at an input-output scenario where we need to print numbers in descending order from a given number to 1:
Input = 10 Output = 10 9 8 7 6 5 4 3 2 1
What is Recursion?
The process of a function calling itself is called recursion. The function which calls itself is known as a recursive function.
Syntax
Following is the syntax of a recursive function in JavaScript:
function recursion() {
// code
recursion(); // function calls itself
// code
}
recursion();
The recursive function will be called infinite times if it doesn't have a condition to stop calling itself.
The function will stop calling itself when a base condition is met.
To avoid infinite function calls, we use condition statements like if-else to control when the function should stop.
Now let's look at examples demonstrating how to display numbers in descending order using recursive functions in JavaScript.
Using Basic Recursion
In this example, we create a recursive function that prints numbers in descending order. The function stops when the number becomes less than or equal to 0:
<!DOCTYPE html>
<html>
<head>
<title>Display numbers in Descending order</title>
</head>
<body>
<button onclick="displayDescending()">Display Numbers</button>
<div id="result"></div>
<script>
function displayDescending() {
var number = 10;
var output = "";
function descendingOrder(num) {
if (num <= 0) {
return; // Base condition
} else {
output += num + " ";
descendingOrder(num - 1); // Recursive call
}
}
descendingOrder(number);
document.getElementById("result").innerHTML = output;
}
</script>
</body>
</html>
10 9 8 7 6 5 4 3 2 1
Alternative Recursive Approach
Here's another way to implement the same functionality with a slightly different structure:
<!DOCTYPE html>
<html>
<head>
<title>Display numbers in Descending order</title>
</head>
<body>
<div id="output"></div>
<script>
var number = 15;
var result = "";
function descendingOrder(num) {
result += num + " ";
var nextNumber = num - 1;
if (nextNumber <= 0) {
return;
} else {
descendingOrder(nextNumber);
}
}
descendingOrder(number);
document.getElementById("output").innerHTML = result;
</script>
</body>
</html>
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1
Console-Based Recursive Function
For Node.js environment or console output, here's a clean recursive implementation:
function printDescending(num) {
// Base condition
if (num <= 0) {
return;
}
// Print current number
console.log(num);
// Recursive call with decremented value
printDescending(num - 1);
}
// Call the function
printDescending(8);
8 7 6 5 4 3 2 1
Key Points
Base Condition: Essential to prevent infinite recursion. In our case, it's when the number becomes 0 or less.
Recursive Call: The function calls itself with a modified parameter (num - 1).
Call Stack: Each recursive call is added to the call stack until the base condition is met.
Conclusion
Recursion provides an elegant solution for displaying numbers in descending order. The key is defining a proper base condition and ensuring the recursive call moves toward that condition. This technique is fundamental in many algorithmic solutions.
1K+ Views
