DEV Community

Cover image for βœ”||🀒 Commit or Vomit | + cast

βœ”||🀒 Commit or Vomit | + cast

Photo by Mika Baumeister on Unsplash

Another βœ”||🀒, casting to number with +;

Actually found this one in the angular documentation at some point.


// example: numberInputField.value = "3"
const startValue: number = +numberInputField.value;

Enter fullscreen mode Exit fullscreen mode

casting to number with + βœ”||🀒

❀: Commit (something I could commit)
🏷: Vomit (I'd never commit this)
πŸ¦„: I like your post please continue this series!

Let's vote! 😊

Top comments (10)

Collapse
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

I'll start myself. Came across something like this in the Angular docs, didn't like it because it is too easy mis, so Vomit. 🀒

Collapse
 
frontendengineer profile image
Let's Code • Edited

it is a yuck for me, perhaps something more readable

Number('1')
parseInt('1', 10)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
faraazahmad profile image
Syed Faraaz Ahmad

same

Collapse
 
edave64 profile image
edave64

This implicit cast is equal to Number(numberInputField.value), not parseInt or parseFloat, like some in the comments suggest. Since all of javascripts typing is odd, this has some interesting edge cases, e.g:

+"0x4" //=> 4
parseFloat("0x4") //=> 0

+[] //=> 0
parseFloat([]) //=> NaN

+null //=> 0
parseFloat(null) //=> NaN

+[12] //=> 12
parseFloat([12]) //=> 12

+[12, 12] //=> NaN
parseFloat([12, 12]) //=> 12

+{} //=> NaN
parseFloat({}) //=> NaN

+{ valueOf () { return 12 } } //=> 12
parseFloat({ valueOf () { return 12 } }) //=> NaN

+Symbol("12") //=> TypeError: Cannot convert a Symbol value to a number
parseFloat(Symbol("12")) //=> TypeError: Cannot convert a Symbol value to a string
Enter fullscreen mode Exit fullscreen mode

However, you are using TypeScript, so I might actually let this slip! Once your codebase is explicitly properly typed, explicit casts can be considered redundant information.

In this specific case, I tend to say: Neither. Use a custom cast, that validates the value fits your specific number format, since parseFloat just silently ignores garbage, which could lead to an unintended result. Which cast you use in that function at the end is fairly irrelevant.

Collapse
 
malikkillian profile image
MalikKillian • Edited

A lot of people take issue with the fact it's uncommon. The operator is being used as intended so it doesn't bother me. However, it seems like this conversion is done from a free-form text field. Some sanitization needs to happen, so if that's done in the UI (like an input mask) this will work. If there is no sanitization then this code needs more logic so it can be resilient to garbage.

So, under the right circumstances I would commit this.

Collapse
 
jackmellis profile image
Jack

Yuck. This is something I would've done everywhere as a junior dev having just found about it 🀦 Not at all obvious and more likely someone would see this and assume it was a mistake and remove it

Collapse
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

...
too much

🀣🀣

Collapse
 
johnkazer profile image
John Kazer

Make it explicit and also tell us what to do if the type doesn't match

Collapse
 
natalia_asteria profile image
Natalia Asteria

It's unorthodox, but it's a much better way to convert something into a number.

Collapse
 
jankapunkt profile image
Jan KΓΌster

ALWAYS use Number.parseInt and add the radix or you may end up in an undetermined state. developer.mozilla.org/en-US/docs/W...