if (key in object) or if(object.hasOwnProperty(key)
JavascriptJavascript Problem Overview
Do the following two statements produce the same output? Is there any reason to prefer one way to the other?
if (key in object)
if (object.hasOwnProperty(key))
Javascript Solutions
Solution 1 - Javascript
Be careful - they won't produce the same result.
in
will also return true
if key
gets found somewhere in the prototype chain, whereas Object.hasOwnProperty
(like the name already tells us), will only return true
if key
is available on that object directly (its "owns" the property).
Solution 2 - Javascript
I'l try to explain with another example. Say we have the following object with two properties:
function TestObj(){
this.name = 'Dragon';
}
TestObj.prototype.gender = 'male';
Let's create instance of TestObj:
var o = new TestObj();
Let's examine the object instance:
console.log(o.hasOwnProperty('name')); // true
console.log('name' in o); // true
console.log(o.hasOwnProperty('gender')); // false
console.log('gender' in o); // true
Conclusion:
-
in operator returns true always, if property is accessible by the object, directly or from the prototype
-
hasOwnProperty() returns true only if property exists on the instance, but not on its prototype
If we want to check that some property exist on the prototype, logically, we would say:
console.log(('name' in o) && !o.hasOwnProperty('name')); //false
console.log(('gender' in o) && !o.hasOwnProperty('gender')); //true - it's in prototype
Finally:
So, regarding to statement that these two conditions ...
if (key in object)
if (object.hasOwnProperty(key))
...produce the same result, the answer is obvious, it depends.
Solution 3 - Javascript
in
will also check for inherited properties, which is not the case for hasOwnProperty
.
Solution 4 - Javascript
In summary, hasOwnProperty()
does not look in the prototype while in
does look in the prototype.
Taken from O'Reilly High Performance Javascript:
> You can determine whether an object has an instance member with a > given name by using the hasOwnProperty() method and passing in the > name of the member. To determine whether an object has access to a > property with a given name, you can use the in operator. For example:
var book = {
title: "High Performance JavaScript",
publisher: "Yahoo! Press"
};
alert(book.hasOwnProperty("title")); //true
alert(book.hasOwnProperty("toString")); //false
alert("title" in book); //true
alert("toString" in book); //true
> In this code, hasOwnProperty() returns true when “title” is passed in > because title is an object instance; the method returns false when > “toString” is passed in because it doesn’t exist on the instance. When > each property name is used with the in operator, the result is true > both times because it searches the instance and prototype.
Solution 5 - Javascript
You got some really great answers. I just want to offer something that will save you the need for checking "hasOwnProperty" while iterating an object.
When creating an object usually people will create it in this way:
const someMap = {}
// equivalent to: Object.create(Object.prototype)
// someMap.constructor will yield -> function Object() { [native code] }
Now, if you want to iterate through "someMap" you will have to do it this way:
const key
for(key in someMap ){
if (someMap.hasOwnProperty(key)) {
// Do something
}
}
We are doing so in order to avoid iterating over inherited properties.
If you intend to create a simple object that will only be used as a "map" (i.e. key - value pairs) you can do so like that:
const newMap = Object.create(null);
// Now, newMap won't have prototype at all.
// newMap.constructor will yield -> undefined
So now it will be safe to iterate like this:
for(key in cleanMap){
console.log(key + " -> " + newMap [key]);
// No need to add extra checks, as the object will always be clean
}
I learned this awesome tip here
Solution 6 - Javascript
> The other form (called for in) enumerates the property names (or keys) > of an object. On each iteration, another property name string from the > object is assigned to the variable. It is usually necessary to test > object.hasOwnProperty(variable) to determine whether the property name > is truly a member of the object or was found instead on the prototype chain.
for (myvar in obj) {
if (obj.hasOwnProperty(myvar)) { ... } }
(from Crockford's Javascript: The Good Parts)
Solution 7 - Javascript
As other answers indicated, hasOwnProperty
will check for an object own properties in contrast to in
which will also check for inherited properties.
New method 2021 - Object.hasOwn()
as a replacement for Object.hasOwnProperty()
Object.hasOwn()
is intended as a replacement for Object.hasOwnProperty()
and is a new method available to use (yet still not fully supported by all browsers like as you can see here - https://caniuse.com/?search=hasOwn
)
Object.hasOwn()
is a static method which returns true if the specified object has the specified property as its own property. If the property is inherited, or does not exist, the method returns false.
const person = { name: 'dan' };
console.log(Object.hasOwn(person, 'name'));// true
console.log(Object.hasOwn(person, 'age'));// false
const person2 = Object.create({gender: 'male'});
console.log(Object.hasOwn(person2, 'gender'));// false
It is recommended to this method use over the Object.hasOwnProperty()
because it also works for objects created by using Object.create(null)
and for objects that have overridden the inherited hasOwnProperty()
method. Although it's possible to solve these kind of problems by calling Object.prototype.hasOwnProperty()
on an external object, Object.hasOwn()
overcome these problems, hence is preferred (see examples below)
let person = {
hasOwnProperty: function() {
return false;
},
age: 35
};
if (Object.hasOwn(person, 'age')) {
console.log(person.age); // true - the remplementation of hasOwnProperty() did not affect the Object
}
let person = Object.create(null);
person.age = 35;
if (Object.hasOwn(person, 'age')) {
console.log(person.age); // true - works regardless of how the object was created
}
More about Object.hasOwn
can be found here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn
Browser compatibility - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility
Solution 8 - Javascript
The first version is shorter (especially in minified code where the variables are renamed)
a in b
vs
b.hasOwnProperty(a)
Anyway, as @AndreMeinhold said, they do not always produce the same result.