Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript object detection: dot syntax versus 'in' keyword

I have seen two ways of detecting whether a UA implements a specific JS property: if(object.property) and if('property' in object).

I would like to hear opinions on which is better, and most importantly, why. Is one unequivocally better than the other? Are there more than just these two ways to do object property detection? Please cover browser support, pitfalls, execution speed, and such like, rather than aesthetics.

Edit: Readers are encouraged to run the tests at jsperf.com/object-detection

like image 831
Nicholas Shanks Avatar asked Aug 24 '11 11:08

Nicholas Shanks


People also ask

What is dot syntax in JavaScript?

JavaScript provides two notations for accessing object properties. The first, and most common, is known as dot notation. Under dot notation, a property is accessed by giving the host object's name, followed by a period (or dot), followed by the property name.

Why dot is used in JavaScript?

The dot notation and bracket notation both are used to access the object properties in JavaScript. The dot notation is used mostly as it is easier to read and comprehend and also less verbose.

What is keyword object in JavaScript?

The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

What is the difference between JavaScript object and variable?

You have already learned that JavaScript variables are containers for data values. Objects are variables too. But objects can contain many values. The values are written as name:value pairs (name and value separated by a colon).


1 Answers

  • if(object.property)

    will fail in cases it is not set (which is what you want), and in cases it has been set to some falsey value, e.g. undefined, null, 0 etc (which is not what you want).

    var object = {property: 0}; if(object.isNotSet) { ... } // will not run if(object.property) { ... } // will not run 
  • if('property' in object)

    is slightly better, since it will actually return whether the object really has the property, not just by looking at its value.

    var object = {property: 0}; if('property' in object) { ... } // will run if('toString' in object) { ... } // will also run; from prototype 
  • if(object.hasOwnProperty('property'))

    is even better, since it will allow you to distinguish between instance properties and prototype properties.

    var object = {property: 0}; if(object.hasOwnProperty('property')) { ... } // will run if(object.hasOwnProperty('toString')) { ... } // will not run 

I would say performance is not that big of an issue here, unless you're checking thousands of time a second but in that case you should consider another code structure. All of these functions/syntaxes are supported by recent browsers, hasOwnProperty has been around for a long time, too.


Edit: You can also make a general function to check for existence of a property by passing anything (even things that are not objects) as an object like this:

function has(obj, prop) {     return Object.prototype.hasOwnProperty.call(obj, prop); } 

Now this works:

has(window, 'setTimeout'); // true 

even if window.hasOwnProperty === undefined (which is the case in IE version 8 or lower).

like image 64
pimvdb Avatar answered Oct 14 '22 12:10

pimvdb