JavaScript Type Coercion: Unary Plus(+), Number(), parseInt() Explained

Choosing the Right Conversion Technique for Precision and Readability

Photo by Volkan Olmez on Unsplash

In Javascript generally we see three ways to convert a string value to number.

+"21"; // 21
Number("21"); // 21
parseInt("21"); // 21

Out of these three Number() and Unary Plus(+) works exactly same.

So now we are left with Number(x) and parseInt(x).

Below are the major differences between Number constructor function and parseInt.

1. Number(x) does type coercion to number, while parseInt(x) does parsing.

When we invoke Number function on any value, Number function will try to convert it to numerical value, if we pass any value that can not be converted into a valid numeric, number function will return NaN.

Whereas, parseInt() parses the provided value, it tries to extract out the valid numeric from the provided value, only things is that the valid number should be present in the starting of the string.

Number("75JS"); // NaN

parseInt("75JS"); // 75

Now this is the reason for below output. Both first convert the passed value to string, but the difference lies in

Number([]); becomes Number("")// 0
Number([4]); becomes Number("4"); // 4
Number([4,5]); becomes Number("4,5"); //NaN


parseInt([]); // becomes parseInt("") NaN
parseInt([4]); // becomes parseInt("4") 4
parseInt([4,5]); // becomes parseInt("4,5") valid part is 4. hence o/p is 4

2.Number works well with Scientific Numbers

Number can interpret a value in scientific notation.

Number("83e4"); // 830000
Number("2e2"); // 200

parseInt fails to identify scientific values. It simply extracts out valid numeric part from the provided value.

parseInt('4e3'); // 4

3. Empty, Nullish value handling is different.

Number will also lead to odd situations that parseInt doesnt; it will interpret empty-ish values (null, false, “”, etc) as 0’s, and true as 1. (parseInt returns NaN for all of those)
Number constructor function will convert empty values null, false, "", [] to 0 and true to 1.

Number(""); // 0
Number(false); // 0
Number(null); // 0
Number([]); // 0

Number(true); // 1

Number({}); // NaN

While parseInt() returns NaN for such values.

parseInt(""); // NaN
parseInt(null); // NaN
parseInt(false); // NaN
parseInt([]); // NaN

parseInt(true); // NaN

parseInt(undefined); // NaN
parseInt({}); // NaN

4. Number() can’t differentiate different Number System, but parseInt can with radix argument.

We have different Number systems, like binary, octal, hexadecimal and decimal.

With Number constructor function, there is no way to specify which Number System we want to use, but with parseInt we can pass radix as a second argument which specifies the type of Number system we want to use.

parseInt(value, radix);

parseInt(10,8)// Octal conversion - output 8
parseInt(101,2)// Binary conversion - output 5

However there is a caveat with parseInt radix argument.

If we miss to pass radix parameter, then JavaScript assumes following thigns:

• If the string starts with “0x”, the
  radix is 16 (hexadecimal)
• If the string starts with “0”, the radix is 8 (octal). This feature
  is deprecated
• If the string begins with any other value, the radix is 10 (decimal)

Similarity:

They both also ignore whitespace:

const foo = "    6  ";
console.log(parseInt(foo)); // 6
console.log(Number(foo)); // 6

Thanks for reading, I hope this made you learn something new.