Which is better, number(x) or 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.