DEV Community

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

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

🐀πŸ₯‡ Jasper de Jager
Loves the human side of programming | Makes difficult things seem easy
・1 min read

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! 😊

Discussion (12)

Collapse
technoglot profile image
Amelia Vieira Rosado 🐣✨

Oh boy, I'm not familiar with this one but I can say with great certainty that:

its a no from me

Collapse
technoglot profile image
Collapse
jmdejager profile image
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
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager Author

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
angelomiranda profile image
Angel • 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
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
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...

Collapse
nefomemes profile image
Nefomemes

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

Collapse
johnkazer profile image
John Kazer

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

Forem Open with the Forem app