How to reverse a number in JavaScript

How to reverse a number in JavaScript:

This post will show you how to reverse a number in JavaScript. For example, if the number is 123, it will change it to 321.

Number reverse programs in different programming languages uses similar algorithms. We will discuss different ways to reverse a number in this post. You will learn how to use a while loop, how to use the modulo operation, and how to find the floor value of a number in JavaScript with these examples.

We will also write it with HTML/CSS to calculate the reverse of a number by getting the number as input from the user.

Method 1: Algorithm to reverse a number with a loop:

To reverse a number, we need to keep picking the last digit of a number, and that number can be appended to the rightmost digit of the reversed number. On each step, we will pick the last digit and remove it from the original number.

For example, if the number is 123, we will first get the last digit i.e. 3. Then 2 and finally 1. These numbers will be added to a result value to create the required reversed number 321. We can use the modulo operator, % to get the last digit of a number. 123%10 gives 3. Then we can convert 123 to 12 by changing it to the floor value of 123/10. On each step, we can append the last digit to the end of the final value to get the required reversed number.

The following algorithm can be used to reverse a number with a loop:

Run a loop until the value of the number is greater than 0. Initialize one result variable as 0.
On each step, use the modulo operator to find the last digit of the number.
Multiply the result by 10 and add the calculated last digit to the multiplied value. It will keep adding the last digit to the end of the result value.
Change the number to floor(number/10). It will remove the last digit of the number.

The above steps will keep repeating till the number becomes 0. At the end of the program, the result variable will hold the required reversed value.

JavaScript program to reverse a number by using a while loop:

The following program uses the above algorithm to reverse a number with a while loop:

let rev = 0;
let num = 123456;
let lastDigit;

while(num != 0){
  lastDigit = num % 10;
  rev = rev * 10 + lastDigit;
  num = Math.floor(num/10);
}

console.log("Reverse number : "+rev);

Here,

The variable rev is used to store the reversed value. It is initialized as 0. The num variable is the given number and the lastDigit variable is used to keep the last digit.
The while loop runs till the value of num is greater than 0. Inside the loop, we are calculating the last digit, appending it to rev as the rightmost digit and removing the last digit from the num variable.

If you run this program, it will print the below output:

Reverse number : 654321

Check it on GitHub

Method 2: By converting the number to a string:

We can also do this in only one line. We need to convert the number to a string, split the string and put all characters of the string in an array, reverse the array, convert that array to a string by joining all characters and that string can be converted back to a Number.

We need to use the following methods here:

parseInt to parse the value as an integer.
toString to convert the number to a string.
split() to split the characters of the string and add them to an array
reverse() to reverse the array
join() to join all characters to a string.

Below is the complete program:

let num = 123456;

let rev = parseInt(num.toString().split('').reverse().join(''));

console.log("Reverse number : "+rev);

It will give a similar result.

Check it on GitHub

Method 2(a): By using a separate function:

Let’s use a separate function to do the reversal.

function reverseNumber(num){
  return parseInt(num.toString().split('').reverse().join(''));
}

let num = 768493;
let rev = reverseNumber(num);

console.log("Reverse number : "+rev);

We created a new function reverseNumber that takes the number as its parameter and returns the reversed value. It will print:

Reverse number : 394867

Check it on GitHub

Method 2(b): Handling negative values:

The above methods will fail to handle negative numbers. For example, if you pass -123, it will print 321 as its reverse. Not -321. If you want to include negative numbers as well, you can multiply the result with the sign of the given number. The Math.sign method returns the sign.

function reverseNumber(num){
  return parseInt(num.toString().split('').reverse().join('')) * Math.sign(num);
}

let num = -123;
let rev = reverseNumber(num);

console.log("Reverse number : "+rev);

It will print -321.

Check it on GitHub

Method 2(c): Handling float values:

We are not handling floating numbers in the above example. The parseInt method will parse the result as an integer. So, if we pass 123.45, it will return 54, not 54.321. To handle float values, we can use the parseFloat method instead of parseInt:

function reverseNumber(num){
  return parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num);
}

let num = 123.45;
let rev = reverseNumber(num);

console.log("Reverse number : "+rev);

It will work with both floating point numbers and negative numbers.

Check it on GitHub

Reverse a user input number in HTML:

Let’s take the input from the user using HTML. We can execute JavaScript code from HTML. The JavaScript code is written inside the <script> block.

Create one file index.html with the below code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    button {
      background-color: #228ac2;
      border: none;
      color: white;
      padding: 15px 15px;
      text-decoration: none;
      cursor: pointer;
      border-radius: 12px;
      width: 200px;
      margin-top: 10px;
      height: 30px;
      line-height: 0;
    }
  </style>
  <script>
    function findReverse() {
      let number = Number(document.getElementById("input_number").value);

      let reverse = parseFloat(number.toString().split('').reverse().join('')) * Math.sign(number);

      document.getElementById("result").innerHTML = reverse;
    }
  </script>
</head>

<body>
  <h3>Reverse Number</h3>
  <input id="input_number" />
  <button onclick="findReverse()">Find Reverse</button>
  <h4 id="result">-----</h4>
</body>

</html>

If you open the .html file in a web browser, it will ask for a number as input from the user, and if you click on the button, it will show one alert with the reversed number.

It has one input component to take the user input.
Once the button is clicked, it calls the findReverse JavaScript method.
The findReverse method calculates the reversed value and assigns it to the result component.

It will look as below: