DEV Community

Cover image for ✔||🤢 Commit or Vomit | + cast
 🐤🥇 Jasper de Jager
🐤🥇 Jasper de Jager

Posted on

✔||🤢 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 (12)

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. 🤢

frontendengineer profile image
Let's Code • Edited

it is a yuck for me, perhaps something more readable

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


edave64 profile image

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.

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.

jackmellis profile image

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

jmdejager profile image
🐤🥇 Jasper de Jager

too much


johnkazer profile image
John Kazer

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

natalia_asteria profile image
Natalia Asteria

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

jankapunkt profile image
Jan Küster

ALWAYS use Number.parseInt and add the radix or you may end up in an undetermined state.