The operator && is not the problem here. In the example of the article you linked, he's using Array.length as the left operand of the operator. But obviously the 0 is falsy and you return 0, so a zero is shown.
You could just do myArray.length > 0 && <yourJsx>. Which is more readable.
Always pay attention when you are using the truthiness of an Integer alone.
It's just the same as if you wanted to conditionaly do something related to a score for example :
constscore:number|undefined=0;if(score){// do something with the score "because it's defined"}
This code is incorrect and should check score !== undefined instead.
Agreed! Kent points this out in his article too that his downfall was using contacts.length in his code rather than contacts.length > 0 or !!contacts.length or Boolean(contacts.length), not necessarily the usage of the && operator.
agree, but I think it is not worth to have think every time how and why you use one pattern or the other. I prefer to reduce the amount of things I need to keep in mind (given they are already countless) and stick with one pattern that works for all
Yeah but all the gotchas the article is speaking about are misuses of the operator &&. If you really know the operator and just don't throw it everywhere without thinking one second (which you should always do, like in any language, especially in JavaScript), then you'll never have any problem.
Plus this shortcut is really readable. Most of the time, you don't ask yourself if it works.
For the length thing, I think you should basically never use the shortcut where you simply test its truthiness to know if the array is empty or not.
And for the error about returning undefined with { error } as a function argument, you just have to know that object destructuring can return undefined.
Anyway, do what you want, but I always use it without any issue.
If you really know the operator and just don't throw it everywhere without thinking one second
React's entire development philosophy (at least how it appears to me) is to craft an API that prevents developers from shooting themselves in the foot. Sidebar: Google could learn a thing or two from them.
Best practices are best practices for all levels of developers, not just the experts.
Hey there 👋 . I'm Dima Portenko. I'm doing software development for over a decade. Right now I'm sticking with React Native development. Follow my YouTube channel and Twitter account to learn more.
I agree. As Kent C. Dodds said it's abuse of usage && rather than clean code. Also this article provides 0 arguments and just direct you this is good and this is bad.
Some day usage of && in render function will lead you to stackoverflow.com/questions/523683.... Probably you'll not be who wrote it but you have to fix it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
"Use the && operator instead." not sure about this. see kentcdodds.com/blog/use-ternaries-...
also very bad idea for react native, which crashes if you don't return
null
I don't like the shortcut where you just evaluate the truthiness of
myArray.length
to know if an array is empty or not...The operator && is not the problem here. In the example of the article you linked, he's using
Array.length
as the left operand of the operator. But obviously the 0 is falsy and you return 0, so a zero is shown.You could just do
myArray.length > 0 && <yourJsx>
. Which is more readable.Always pay attention when you are using the truthiness of an Integer alone.
It's just the same as if you wanted to conditionaly do something related to a score for example :
This code is incorrect and should check
score !== undefined
instead.Agreed! Kent points this out in his article too that his downfall was using
contacts.length
in his code rather thancontacts.length > 0
or!!contacts.length
orBoolean(contacts.length)
, not necessarily the usage of the&&
operator.agree, but I think it is not worth to have think every time how and why you use one pattern or the other. I prefer to reduce the amount of things I need to keep in mind (given they are already countless) and stick with one pattern that works for all
Yeah but all the gotchas the article is speaking about are misuses of the operator &&. If you really know the operator and just don't throw it everywhere without thinking one second (which you should always do, like in any language, especially in JavaScript), then you'll never have any problem.
Plus this shortcut is really readable. Most of the time, you don't ask yourself if it works.
For the
length
thing, I think you should basically never use the shortcut where you simply test its truthiness to know if the array is empty or not.And for the error about returning undefined with
{ error }
as a function argument, you just have to know that object destructuring can return undefined.Anyway, do what you want, but I always use it without any issue.
React's entire development philosophy (at least how it appears to me) is to craft an API that prevents developers from shooting themselves in the foot. Sidebar: Google could learn a thing or two from them.
Best practices are best practices for all levels of developers, not just the experts.
I agree. As Kent C. Dodds said it's abuse of usage && rather than clean code. Also this article provides 0 arguments and just direct you this is good and this is bad.
Some day usage of && in render function will lead you to stackoverflow.com/questions/523683.... Probably you'll not be who wrote it but you have to fix it.