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 the same algorithm. We are going to use the same process here as well. You will learn how to use a while loop, how to use modulo operation,and finding the floor value of a number with this example.

I will show you the simple JavaScript program and how we can use it with HTML to get the user-input value.

Before moving to the program, let’s check the algorithm.

Algorithm to reverse a number:

To reverse a number, we need to remove the last digit of the number, and that number can be used to append to the right of a new value.

For example, if the number is 123, we will first get the last digit i.e. 3 from it. Then 2 and finally 1. These numbers will be added to a final value to create the required reverse number 321. We can use modulo, % to get the last digit. 123%10 gives 3. Then we can convert 123 to 12 by taking the floor value of 123/10. The same steps can be followed.

So,

  • Run a loop till the value of the number is greater than 0. Initialize one result variable as 0.
  • On each step, use modulo to find the last digit of the number.
  • Multiply result by 10 and add this digit to it. It will keep adding the digit to the right 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.

JavaScript program to reverse a number:

Below is the complete program:

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,

  • rev is used to store the reverse value. It is initialized as 0.num is the given number and lastDigit is used to keep the last digit.
  • The while loop runs till the value of num is more than 0. Inside the loop, we are getting the last digit, adding it to rev as the last digit and changing the num by removing its last digit.

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

Reverse number : 654321

By converting the number to a string:

We can also do this in only one line. We can 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 three methods here:

  • 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 rev = 0;
let num = 123456;

rev = Number(String(num).split('').reverse().join(''));

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

It will give a similar result.

Reverse a user input number in HTML:

Let’s take the input from the user using html. We can call JavaScript from html. Create one file index.html with the below code:

<input type="number" id="input_number" placeholder="Enter the number">
<input type="button" value="Find" id="input_button" >
<script>
function findReverse(){
    let number = Number(document.getElementById("input_number").value);

    let reverse = Number(String(number).split('').reverse().join(''));

    alert("Reverse : "+reverse);
}


let button=document.getElementById("input_button");
button.onclick=findReverse;
</script>

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

You might also like: