Recursion Example in JavaScript to Display Numbers in Descending Order

In this article, the given task is to display the numbers in descending order by using recursion. Let's get an understanding of the task by looking into the input-output scenarios.

Input-Output scenario

Let's look into an input-output scenario, where there is an input number and we need to print the numbers in descending order from the given number to 1.

Input = 10;
Output = 10 9 8 7 6 5 4 3 2 1

What is recursion?

The process of calling itself is called recursion. The function which will call itself is known as a recursive function.

Syntax

Following is the syntax of recursive function in JavaScript ?

function recursion() {
   // code
   recursion()
   // code
}
recursion();

  • The recursive will be called infinite times if it doesn't have a condition to stop calling itself.

  • The function will stop calling itself, whenever the condition is met. This is known as the base condition.

  • To avoid function calling infinite times, we can use the condition statements like (if-else, while). Where one condition will call the recursive function and another condition doesn't.

Now let's look into the examples one by one where we displayed the numbers in descending order using the recursion function in JavaScript.

Example 1

In the following example below,

  • We have displayed the numbers in descending order by a recursive function.

  • The recursive function will call itself unless the input number is less than or equal to 0.

  • The function will stop whenever the number is less than or equal to 0.


<!DOCTYPE html>
<html>
<head>
   <title>Display numbers in Descending order</title>
   <button onClick="rec()">Display numbers in descending</button>
</head>
<body>
   <script>
      function rec() {
         var number = 10;
         function DescendingOrder(number) {
            if (number <= 0) {
               return;
            } else {
               document.write(number, "<br>");
               DescendingOrder(number - 1);
            }
         }
         DescendingOrder(number);
      };
   </script>
</body>
</html>

As we can see in the output, the input number we've given is 10 and the recursive function called itself until the number is less than or equal to 0.

Example 2

In this example below, we've achieved the task to display the numbers in descending order by a recursive function.


<!DOCTYPE html>
<html>
<head>
   <title>Display numbers in Descending order</title>
</head>
<body>
   <script>
      var numb = 15;
      function DescendingOrder(numb) {
         document.write(numb, "<br>");
         var Number = numb - 1;
         if (Number <= 0) {
            return;
         } else {
            DescendingOrder(Number);
         }
      };
      DescendingOrder(numb);
   </script>
</body>
</html>

In the output, we've printed the numbers in descending order by using a recursive function.

Example 3

In the following example below, we've performed printing the numbers in descending order by using the while condition in the recursion function.


<!DOCTYPE html>
<html>
<head>
   <title>Display numbers in Descending order</title>
   <button onClick="rec()"> Click! </button>
</head>
<body>
   <script>
      function rec() {
         const number = 10

         function DescendingOrder(number) {
            let i = 0;
            while (number > i) {
               document.write(number + "<br>");
               number--;
            }
         }
         DescendingOrder(number);
      };
   </script>
</body>
</html>

The while condition in the recursion function is displaying the numbers in descending order.

Updated on: 2022-11-08T08:20:18+05:30

899 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements