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 **in**made 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.