Why you shouldn’t use ‘in’ in javascript

How it works

the in operator returns true if the specified property is in the specified object. source: MDN

So? .. it checks if property exists not the value of it. then what can go wrong ?

Why

I always had something against in, mainly because it sounds a bit over promising. The first time I used it I was expecting a behavior more like includes, just because the word “in” is very suggestive to inform you whether is something in something else that contains it.

So don’t get me wrong, its existence is essential in the language but how it sounds and how some of developer are using is the

I met lots situations where I didn’t like the usage of inbut I just bumped into another situation where browser implementation was a bit misleading. and using inmade it even more confusing.

firefox console

Check the way Modernizer is detecting touch device here , we have the same approach implemented in our website and I was debugging that some of the mouse events weren’t firing on Firefox.

More or less here is the key part of detection, ontouchstart in window

The funny part is that in chrome it’s undefined, and Firefox it’s null.
Edit: it turned out to be not that funny, it was a bug in Firefox that under some certain circumstances it shows this particular value ontouchstart
as null. ref: https://github.com/Modernizr/Modernizr/issues/1731

Check out the following and try to play around with it in your console to grasp the idea.

I know …

the implementation is consistent with the specs, but from my point of view, I just hate words that can imply different meanings! I would just avoid using (unless you’re using it knowing what your doing) and won’t consider it to be used to check existance of a property.

Edit & Correction:

Thanks to

Jason Rogers

he pointed out very valid points check it here in the comments.
#1: I think is the most and I totally missed up on it, which that browser vendors design their APIs that way and Modernizer was doing it the right way. it was a bug on Firefox bug and some other browsers.

#2: window.onload for example it will be undefined on the beginning because no handler was assigned yet.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!