Because you can never know too many micro-optimizations...
In JavaScript, when you need to know if a property is present on an object, you have a couple of options. For a long time, I've used the following idiom:
if ('undefined' !== typeof obj['prop']) { /* do something */ }
Recently, I came upon some code using the following:
if ('prop' in obj) { /* do something */ }
I like the clarity of the syntax. There is also a native method for this kind of thing.
if (obj.hasOwnProperty('prop')) { /* do something */ }
Read the updates at the bottom of the page for a few considerations when choosing from the above. This page is here to answer the burning question, "Which is faster?" Let's find out!
function eq_(exists, iters, val) {
var start, obj, result;
start = new Date;
do {
obj = {};
if (exists) obj.prop = val;
result = ('undefined' !== typeof obj.prop);
} while (--iters);
showResult('eq', new Date - start, result);
}
Result: ---
Duration: ---
function in_(exists, iters, val) {
var start, obj, result;
start = new Date;
do {
obj = {};
if (exists) obj.prop = val;
result = ('prop' in obj);
} while (--iters);
showResult('in', new Date - start, result);
}
Result: ---
Duration: ---
function hs_(exists, iters, val) {
var start, obj, result;
start = new Date;
do {
obj = {};
if (exists) obj.prop = val;
result = obj.hasOwnProperty('prop');
} while (--iters);
showResult('hs', new Date - start, result);
}
Result: ---
Duration: ---
Update 1: Diego Perini points out on Twitter that in may throw an exception in certain edge cases. E.g., Internet Explorer doesn't like the following:
(function () {
for (var i in window.external) {
alert(i);
}
})();
The moral of the story here is (as always) understand and test your code!
Update 2: Peter van der Zee wisely asked on Twitter whether some of the benefit of in was due to the JavaScript engine caching the result of the lookup. To mitigate this, I've changed the code (original here) to create a new object on each iteration. This does, indeed, make in a bit slower. On Safari/Mac, in is about 2.5x faster. Peter reports that in is ~25% slower on Firefox/Win. YMMV!
Update 3: HB Stone brought up a point I'd hoped to gloss over, the case where the property exists, but has the value undefined. In this case, === may return a different result than the other 2 idioms. I've updated the code to allow you to set the value of the property to test this effect. As I replied on Twitter, in is the truer test of whether the property exists.
Update 4: Dmitry Soshnikov brought up an important point on Twitter. Both my in and === examples will do a scope chain lookup if the property is not found on the object itself. This could lead to some, shall we say, unexpected results. The hasOwnProperty method might be a safer bet in most cases, but even that can "lie" in some cases. E.g., in recent versions of Firefox, the global object inherits from Object.prototype. So, consider the following example:
Object.prototype.x = 10;
alert(x); // 10
alert("x" in window); // true
alert(window.hasOwnProperty("x")); // true
Crazy! Again, this just reinforces the need to test your code, in all of your target implementations and with expected and unexpected inputs. Thanks, Dmitry!
Update 5: I have added a test using the hasOwnProperty method for comparison's sake. It appears (on Safari and Firefox on Mac OS X, at least) that it performs almost as well as in. The difference is small enough that speed should not be the deciding factor when choosing your property detection poison.