✔||🤢 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;

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

Comments

[🐤🥇 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. 🤢

[Let's Code]

it is a yuck for me, perhaps something more readable

Number('1')
parseInt('1', 10)

[Syed Faraaz Ahmad]

same

[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

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]

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.

[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

[🐤🥇 Jasper de Jager]

...

🤣🤣

[John Kazer]

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

[Natalia Asteria]

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

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