Optional chaining:
Optional chaining has made life of javaScript
programmer easy by handling the checks using the syntax ?.
However, here we are NOT to discuss how awesome it is, rather solving a issue how of to safely use it.
no-unsafe-optional-chaining
no-unsafe-optional-chaining is an amazing eslint
rule, which help us identify what are we doing wrong with optional chaining and disallows use of optional chaining in contexts where the undefined
value is not allowed.
I have one case where I need to perform a sort
operation on id
which could be in string
type which make sense to throw error because it could result in NaN
, if order
is not a number as follows:
The issue
const sortComparer = (a, b) => (+a?.order) - (+b?.order)
My solution
However, if i do handle no-unsafe-optional-chaining
as follow it still throws error and does not work:
const sortComparer = (a, b) => (+a.order || 0) - (+b.order || 0),
The way it worked
The only way to make it work is like this:
const sortComparer = (a, b) => (a?.order ? +a.order : 0) - (b?.order ? +b.order : 0),
Question ? :S
Does anyone know how to fix this in a better way to avoid this issue ?
Regards.
Top comments (11)
Umm.. this is interesting.
Would you like to share what
~~
does in the solution above and how does it fix the unsafe optional chaining ?~
is a bitwise NOT operator - flipping all the bits in a number. Flipping them twice gets you back to the original number. Using it withundefined
(what you'll get from the optional chain iforder
is missing) or any falsy value - is the same as using it with 0I am making the presumption here that
order
will be an integer. The solution I suggest will also remove the decimal part from anyorder
valuePresumably you are using optional chaining here as you are expecting
a
orb
to possibly beundefined
ornull
? If this is not the case, you don't even need optional chaining and could simply use:Hey Jon, yes I am assuming the values to null or undefined, and that's the reason why I am using optional changing..
However, using your approach wouldn't
~~undefinded
break the code ? 🤔As I said,
~~undefined
gives0
umm, interesting way.. never used it though, however not sure if this is the best practise or not..
Best practises should always be challenged and questioned
Agreed, there's always more then one to do the stuff, whatever works best !
For someone interested for the answers,
One of the solution I got from stackOverflow was: