. Advertisement .
..3..
. Advertisement .
..4..
Objects in JavaScript act like a container for their keys (properties). Knowing what you can access through them is essential. In addition to finding empty objects, you can also check if a key exists in a JavaScript object.
How To Check If A Key Exists In A Javascript Object
Using The in Operator
The in operator can check whether a JavaScript owns a key (property), be it direct ownership or through the prototype chain.
Syntax:
<key> in <object>
The key parameter is a symbol or string representing the key name or its array index. The in operator returns a boolean value: true if the object has the mentioned key, and false otherwise.
This is a simple sample showcasing how this operator works in JavaScript:
const iphone13 = {
os: 'iOS',
version: '15.5',
release_year: 2014,
chipset: 'A15'
};
console.log('os' in iphone13);
Output:
true
Since we have defined the os key when declaring the iphone13 object, the in operator should return true.
This snippet shows other aspects of the in operator you should pay attention to:
const iphone13 = {
os: 'iOS',
version: '15.5',
release_year: 2014,
chipset: 'A15'
};
console.log('maker' in iphone13);
delete iphone13.os;
console.log('os' in iphone13);
iphone13.version = undefined
console.log('version' in iphone13);
Output:
false
false
true
The in operator returns false when checking a key we haven’t defined or doesn’t exist in the object’s prototype chain. This is also the case when you create and then delete a key, such as the os key above.
Remember that the in operator returns true for an undefined property, as long as you haven’t deleted it.
As this operator gives us a boolean value, you can incorporate it with if statements.
Example:
const iphone13 = {
os: 'iOS',
version: '15.5',
release_year: 2014,
chipset: 'A15'
};
if ('os' in iphone13 && 'version' in iphone13) {
console.log("You are using", iphone13.os, "version", iphone13.version);
}
Output:
You are using iOS version 15.5
Since both os and version keys belong to the iphone13 object, the condition is true.
Using hasOwnProperty()
The hasOwnProperty() method provides another option. Like the in operator, it also returns a boolean value that indicates if a specified key belongs to an object as its property.
Syntax:
<object>.hasOwnProperty(<key>)
The biggest difference between this method and the in operator is that hasOwnProperty() only checks for properties that are directly owned by the object. Even if it owns a key through inheritance, the hasOwnProperty() method still returns false.
We can rewrite the checks in the previous section using hasOwnProperty() instead of the in operator.
const iphone13 = {
os: 'iOS',
version: '15.5',
release_year: 2014,
chipset: 'A15'
};
console.log(iphone13.hasOwnProperty('os'));
console.log(iphone13.hasOwnProperty('maker'));
delete iphone13.os;
console.log(iphone13.hasOwnProperty('os'));
iphone13.version = undefined;
console.log(iphone13.hasOwnProperty('version'));
Output:
true
false
false
true
In these examples, the hasOwnProperty() method and the in operator produce the same results. However, we can see the difference when checking for keys inherited through the object’s prototype chain.
Example:
const iphone13 = {
os: 'iOS',
version: '15.5',
release_year: 2014,
chipset: 'A15'
};
console.log(iphone13.hasOwnProperty('toString'));
console.log(iphone13.hasOwnProperty('hasOwnProperty'));
console.log('toString' in iphone13);
console.log('hasOwnProperty' in iphone13);
Output:
false
false
true
true
As you can see, while the in operator checks for properties in the prototype chain like toString and hasOwnProperty, the hasOwnProperty() method doesn’t.
Conclusion
You can use either the in operator or the hasOwnProperty() method to check if a key exists in a JavaScript object. They don’t work in exactly the same way, however, which is something you should keep in mind when writing your applications.
Leave a comment