parseInt() and parseFloat() are JavaScript functions used to convert strings into numbers. Although both functions parse numeric values from strings, they are designed for different purposes. parseInt() returns an integer by removing the decimal portion, while parseFloat() returns a floating-point number and preserves the decimal portion. Understanding the difference between these functions helps developers choose the correct method when working with numeric strings, user input, and data received from external sources.

Table of Contents

---

What are parseInt() and parseFloat()?

parseInt() and parseFloat() are built-in JavaScript functions that read a number from the beginning of a string and return a numeric value.
The main difference is that parseInt() returns an integer, while parseFloat() returns a floating-point number.

Example:

// JavaScript program to demonstrate parseInt and parseFloat
let value = "25.75";
let integerValue = parseInt(value);
let decimalValue = parseFloat(value);
console.log(integerValue);
console.log(decimalValue);

Output:

25
25.75

Here, parseInt() removes the decimal portion, while parseFloat() preserves it.

What is parseInt() in JavaScript?

The parseInt() function parses a string and returns an integer. It reads the numeric portion from the beginning of the string and stops when it encounters a character that cannot be part of the number.

Syntax:

parseInt(string, radix)

The string represents the value that needs to be parsed. The optional radix specifies the number system to use, such as base 10 for decimal numbers.

Example of parseInt()

The following example converts a string containing a whole number into an integer.

// JavaScript program to demonstrate parseInt
let value = "150";
let number = parseInt(value);
console.log(number);
console.log(typeof number);

Output:

150
number

The string "150" is converted into the number 150.

What is parseFloat() in JavaScript?

The parseFloat() function parses a string and returns a floating-point number. It preserves the decimal portion when the string contains a valid decimal number.

Syntax:

parseFloat(string)

The string represents the value that needs to be parsed.

Example of parseFloat()

The following example converts a decimal string into a floating-point number.

// JavaScript program to demonstrate parseFloat
let value = "150.75";
let number = parseFloat(value);
console.log(number);
console.log(typeof number);

Output:

150.75
number

The decimal portion .75 is preserved by parseFloat().

Difference Between parseInt() and parseFloat()

The main difference between parseInt() and parseFloat() is how they handle decimal values.

Feature	parseInt()	parseFloat()
Purpose	Parses an integer from a string.	Parses a floating-point number from a string.
Decimal portion	Removes the decimal portion.	Preserves the decimal portion.
Example	parseInt("25.75")	parseFloat("25.75")
Result	25	25.75
Radix parameter	Supports an optional radix.	Does not use a radix parameter.

parseInt() with Decimal Values

When parseInt() receives a string containing a decimal number, it returns only the integer portion.

Example:

// JavaScript program to demonstrate parseInt with a decimal value
let value = "45.89";
let result = parseInt(value);
console.log(result);

Output:

45

The decimal portion .89 is not included in the result.

parseFloat() with Decimal Values

parseFloat() preserves the decimal portion when parsing a valid decimal string.

Example:

// JavaScript program to demonstrate parseFloat with a decimal value
let value = "45.89";
let result = parseFloat(value);
console.log(result);

Output:

45.89

The complete decimal value is returned.

Parsing Strings with Text

Both functions can parse a valid numeric value at the beginning of a string and stop when they encounter an invalid character.

Using parseInt():

// JavaScript program to demonstrate parseInt with text
let value = "100px";
let result = parseInt(value);
console.log(result);

Output:

100

Using parseFloat():

// JavaScript program to demonstrate parseFloat with text
let value = "12.5kg";
let result = parseFloat(value);
console.log(result);

Output:

12.5

In these examples, both functions read the valid numeric portion at the beginning of the string and stop when they reach the text.

Parsing Strings with Spaces

Both parseInt() and parseFloat() can ignore leading whitespace before parsing a number.

Example:

// JavaScript program to demonstrate parsing a string with spaces
let value1 = "   100";
let value2 = "   25.50";
console.log(parseInt(value1));
console.log(parseFloat(value2));

Output:

100
25.5

The leading spaces do not prevent the values from being parsed.

Handling Invalid Strings

If a string does not begin with a valid numeric value, both functions return NaN.
NaN means Not-a-Number.

Example:

// JavaScript program to demonstrate invalid values with parseInt and parseFloat
let value = "Hello";
console.log(parseInt(value));
console.log(parseFloat(value));

Output:

NaN
NaN

Since "Hello" does not begin with a valid numeric value, both functions return NaN.

Using Radix with parseInt()

The second argument of parseInt() is called the radix. It specifies the number system in which the string should be interpreted.
For decimal numbers, a radix of 10 is commonly used.

Example:

// JavaScript program to demonstrate radix with parseInt
let value = "101";
let decimalValue = parseInt(value, 10);
let binaryValue = parseInt(value, 2);
console.log(decimalValue);
console.log(binaryValue);

Output:

101
5

With radix 10, "101" is interpreted as a decimal number. With radix 2, it is interpreted as a binary number, which has the decimal value 5.

Checking the Result with typeof

The typeof operator can be used to verify that the result returned by parseInt() or parseFloat() is a number.

Example:

// JavaScript program to check the data type returned by parse functions
let integerValue = parseInt("100");
let decimalValue = parseFloat("50.75");
console.log(typeof integerValue);
console.log(typeof decimalValue);

Output:

number
number

Both functions return values with the JavaScript number data type.

Complete Example of parseInt() vs parseFloat()

The following program demonstrates the difference between the two functions using several values.

// JavaScript program to demonstrate parseInt and parseFloat
let value1 = "100.50";
let value2 = "250.75";
let integerResult = parseInt(value1);
let floatResult = parseFloat(value2);
console.log("parseInt result:", integerResult);
console.log("parseFloat result:", floatResult);
console.log(typeof integerResult);
console.log(typeof floatResult);

Output:

parseInt result: 100
parseFloat result: 250.75
number
number

parseInt() returns the integer portion of the value, while parseFloat() preserves the decimal portion.

Advantages of Understanding parseInt() and parseFloat()

1. Correct Number Conversion: Understanding both functions helps developers select the appropriate method for converting numeric strings.
2. Decimal Handling: parseFloat() can preserve decimal values when they are required for calculations.
3. Integer Handling: parseInt() is useful when only the whole-number portion of a value is required.
4. Useful for Input Processing: Both functions can be useful when processing numeric values received as strings.
5. Better Data Handling: Knowing how these functions behave helps developers avoid unexpected results when working with mixed or formatted data.

Common Beginner Mistakes

1. Using parseInt() When Decimals Are Required: Beginners may use parseInt() for decimal values and unintentionally lose the decimal portion.
2. Confusing parseInt() with parseFloat(): Beginners may assume that both functions return the same result for decimal strings, but parseInt() removes the decimal portion.
3. Forgetting the Radix: Beginners may use parseInt() without specifying a radix when parsing values where the number system matters.
4. Ignoring NaN: Beginners may not check the result when the input string does not contain a valid numeric value.
5. Assuming All Text Can Be Converted: These functions can parse a numeric value at the beginning of a string, but they do not make arbitrary text into a valid number.

Conclusion

parseInt() and parseFloat() are useful JavaScript functions for parsing numeric values from strings. parseInt() returns an integer and removes the decimal portion, while parseFloat() preserves the decimal portion and returns a floating-point number. Both functions can parse numeric values at the beginning of a string and return NaN when no valid number can be found. Understanding their differences helps developers handle numeric data correctly and choose the appropriate function for each situation.

FAQs

1. What is the main difference between parseInt() and parseFloat()?

parseInt() returns an integer, while parseFloat() returns a floating-point number and preserves the decimal portion.

2. What does parseInt("25.75") return?

parseInt("25.75") returns 25 because it keeps only the integer portion.

3. What does parseFloat("25.75") return?

parseFloat("25.75") returns 25.75 because it preserves the decimal portion.

4. What happens when parseInt() or parseFloat() receives an invalid string?

Both functions return NaN when the string does not begin with a valid numeric value.

5. What is the radix parameter in parseInt()?

The radix parameter specifies the number system used to interpret the string, such as 10 for decimal or 2 for binary.