What is the difference between Unary Plus/Number(x) and parseFloat(x)?

Question

I'm asking this just for the sake of shaving a few bytes.

I know I can use +x (unary plus) instead of Number(x). Is there a difference between those and parseFloat?

Answer 1

The difference between parseFloat and Number

parseFloat/parseInt is for parsing a string, while Number/+ is for coercing a value to a number. They behave differently. But first let's look at where they behave the same:

parseFloat('3'); // => 3
Number('3'); // => 3
parseFloat('1.501'); // => 1.501
Number('1.501'); // => 1.501
parseFloat('1e10'); // => 10000000000
Number('1e10'); // => 10000000000

So as long as you have standard numeric input, there's no difference. However, if your input starts with a number and then contains other characters, parseFloat truncates the number out of the string, while Number gives NaN (not a number):

parseFloat('1x'); // => 1
Number('1x'); // => NaN

In addition, Number understands hexadecimal input while parseFloat does not:

parseFloat('0x10'); // => 0
Number('0x10'); // => 16

But Number acts weird with empty strings or strings containing only white space:

parseFloat(''); // => NaN
Number(''); // => 0
parseFloat(' \r\n\t'); // => NaN
Number(' \r\n\t'); // => 0

On the whole, I find Number to be more reasonable, so I almost always use Number personally (and you'll find that a lot of the internal JavaScript functions use Number as well). If someone types '1x' I prefer to show an error rather than treat it as if they had typed '1'. The only time I really make an exception is when I am converting a style to a number, in which case parseFloat is helpful because styles come in a form like '3px', in which case I want to drop the 'px' part and just get the 3, so I find parseFloat helpful here. But really which one you choose is up to you and which forms of input you want to accept.

Note that using the unary + operator is exactly the same as using Number as a function:

Number('0x10'); // => 16
+'0x10'; // => 16
Number('10x'); // => NaN
+'10x'; // => NaN
Number('40'); // => 40
+'40'; // => 40

So I usually just use + for short. As long as you know what it does, I find it easy to read.

Answer 2

The difference is what happens when the input is not a "proper number". Number returns NaN while parseFloat parses "as much as it can". If called on the empty string Number returns 0 while parseFloat returns NaN.

For example:

Number("") === 0               // also holds for false
isNaN(parseFloat("")) === true // and null

isNaN(Number("32f")) === true
parseFloat("32f") === 32

Answer 3

In these examples you can see the difference:

Number('') = 0;
Number(false) = 0;
Number('1a') = NaN;

parseFloat('') = NaN;
parseFloat(false) = NaN;
parseFloat('1a') = 1;

parseFloat is a bit slower because it searches for first appearance of a number in a string, while the Number constuctor creates a new number instance from strings that contains numeric values with whitespace or that contains falsy values.

Answer 4

For empty string, they are different.

+"" and Number("") returns 0, while parseFloat("") returns NaN.

Answer 5

As far as I know, and this is only overheard from colleagues so might be entirely ill informed, that parseFloat is marginally faster.

Though on further researching, it would seem that this performance difference is browser dependant.

http://jsperf.com/parseint-vs-parsefloat/6

Have a look at these jsPerf results, and make you're call. (it includes +x tests as well)

As noted in @xdazz 's answer, +"" and Number("") return 0 while parseFloat("") returns NaN so Again I would go with parseFloat, because an empty string does NOT mean the number 0, only a string with the character "0" in it means 0;