How to Convert Int to Float in JavaScript?

If you are new to JavaScript (JS) and want to know how to convert int data type into float data type, then this article is surely for you. Keep reading. 👇

As a fresh developer, you know int and float are two different data types, but how does JavaScript handle both of them how can we convert int into a float? In this article, we will answer all these questions with examples in detail.

Before we start solving mysteries about conversions, we should know the difference between int and float types. 

What is The Difference Between Int And Float?

An int is a number without a decimal point, also known as a whole number, on the other hand, a float is a number with a decimal point, also known as a real number. For example, 4 is an integer, and 4.20 is a floating point.

Numerical Data Types of Programming Languages

Following are some number data types that most programming languages have in common:

Numerical Data Types in JavaScript

JavaScript just has two data types to handle numbers which are:

How Does JavaScript Handle Int and Float Data Types?

JavaScript has just a number data type to handle both whole numbers and real numbers. It handles integers and floats with the help of number type.BigInt is the latest data type introduced in 2020 to handle large integer values. Now let’s understand how JavaScript handles int and float with the following example:

Code

console.log("Example of int and float");

// declare an integer number

let x= 20;

// declare a float number

let y=30.15;




console.log("x=",x);

console.log("y=",y);

Output

Example of int and float

x= 20

y= 30.15

Why Do We Need to Convert Int into Float in JavaScript?

When we are handling data of different types and want to present data in a specific type, for example, if a user enters data in string type or integer type, and we want to present it in float data type, then we have to use some conversion method to do so.

Methods Used to Convert Int to Float in JavaScript

We have to use the following two methods to convert int into a float

1. toFixed
2. parseFloat

Now see the detail of both methods on how we can convert an integer into a float:

Method 1: Use of toFixed()

We can use the toFixed method to convert a number into a string with fixed point notation. For example:

Code

console.log("Example of toFixed method");

// declare an integer number

let x= 20;




console.log("Value of x=",x);

// we pass number digits toFixed method

// this example round up till two decimal points

console.log("Value of x with toFixed()=",x.toFixed(2));

Output

Example of toFixed method

Value of x= 20

Value of x with toFixed()= 20.00

The toFixed() method takes a digit 0 to 100 from us and returns a string with a specified number of digits after the decimal point. If we pass a digit more than 100 or less than 0 it will cause a RangeError.

Method 2: Use of parseFloat()

The parseFloat method takes a string as an argument and parses it into a float(real number). If the passed string is not a number or the first character is not a number, this function will return NaN(not a number). In the following example, we use the typeof operator to check which data type is returned by the parseFloat method: 

Code

console.log("Example of parseFloat method");

// declare a string containing a floating point number

let x= "20.15";




console.log("type of x=",typeof x);

// we pass a string to the parseFloat method

console.log("type of value returned by parseFloat()=",typeof parseFloat(x));

Output

Example of parseFloat method

type of x= string

type of value returned by parseFloat()= number

How to Convert Int into Float in JavaScript?

We can convert int into a float with the help of toFixed and parseFloat methods. The toFixed method return string later, which we convert into float. Now understand this concept with the help of the following example:

Code

console.log("Example of converting int to float type");

// declare an integer

var x= 55;

var convertedValue = parseFloat(x).toFixed(2);

console.log("Original Value=",x);

console.log("Converted Value=",convertedValue);

Output

Example of converting int to float type

Original Value= 55

Converted Value= 55.00

The above example explains how to convert int to float type in JavaScript. It is the beauty of JavaScript that it handles all the number types with just one data type number to reduce complexity in your coding. 

Conclusion

To summarize this article on how to convert int to float in JavaScript, we’ve discussed the int and float data types in detail. We have explained the toFixed and parseFloat methods in detail and also explained how both methods help in the conversion of int into float type.

Let’s have a quick review of the topics discussed in this article.

1. Difference between int and float data type.
2. Number data types of most of the programming languages.
3. Number of data types of JavaScript
4. How does JavaScript handle int and float types?
5. When do we need to convert int into float type?
6. Methods used to convert int to float type.
7. How to convert int to float type?

Thank you for reading! If you found this article beneficial, don’t forget to share and comment below👇. 

Happy coding. 👍