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">

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

button {
background-color: #228ac2;
border: none;
color: white;
text-decoration: none;
cursor: pointer;
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>

<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:

Check it on GitHub