Using the “in” operator
The in
operator returns true
if the specified property is present in the specified object or in its prototype chain, otherwise it returns false
.
const app = { name: 'Instagram', type: 'Social Media' };
console.log('name' in app); // true
console.log('release_date' in app); // false
Using the Reflect.has() method
Reflect is a built-in object that provides some utility methods for JavaScript operations. The has()
method of this object returns true
if the specified property is present in the specified object or in its prototype chain, otherwise it returns false
. Syntax is:
Reflect.has(targetObject, propertyKey);
Let’s use it in one example.
const app = { name: 'Instagram', type: 'Social Media' };
console.log(Reflect.has(app, 'name')); // true
console.log(Reflect.has(app, 'release_date')); // false
Using the hasOwnProperty() method
This method is present in the object prototype. So any object which is not created with Object.create(null)
, has access to this method. This method returns true
if the specified property is present in the object (not inherited), otherwise, it returns false
.
const app = { name: 'Instagram', type: 'Social Media' };
console.log(app.hasOwnProperty('type')); // true
console.log(app.hasOwnProperty('founder_name')); // false
By accessing the property and comparing it with “undefined”
If we access any property that doesn’t exist on the object, it returns undefined
. This way, we can access the property and compare its value with undefined
to know whether it exists or not.
const app = { name: 'Instagram', type: 'Social Media' };
console.log(app['name'] === undefined); // false
console.log(app['founder_name'] === undefined); // true
// or simply use an if block without comparing to undefined
if (app['founder_name']) {
// do your work
}
We can’t determine the existence of a property with this approach when a property exists in the object and has a value of undefined
.
const auth = { token: undefined };
console.log(auth['token'] === undefined); // true
console.log(auth['timestamp'] === undefined); // true
The Object.hasOwn() method (ES2022 update)
This method returns true
if the specified property is present in the object (not inherited), otherwise it returns false
.
const app = { name: 'Instagram', type: 'Social Media' };
console.log(Object.hasOwn(app, 'type')); // true
console.log(Object.hasOwn(app, 'founder_name')); // false
Apart from the hasOwnProperty()
and hasOwn()
method, the other three ways work fine in the case of inherited properties. Let’s see one example of that.
function square(side) {
this.side = side;
}
square.prototype.getArea = function () {
return Math.pow(this.side, 2);
}
const sq = new square(5);
console.log(sq); // { side: 5 };
console.log(sq.getArea()); // 25
/*
Here "side" will be part of own object whereas
"getArea" will be inherited through prototype chain.
*/
// checking with 'in'
console.log('side' in sq); // true
console.log('getArea' in sq); // true
// checking with 'Reflect.has()'
console.log(Reflect.has(sq, 'side')); // true
console.log(Reflect.has(sq, 'getArea')); // true
// checking with 'hasOwnProperty()'
console.log(sq.hasOwnProperty('side')); // true
console.log(sq.hasOwnProperty('getArea')); // false
// comparing with 'undefined'
console.log(sq['side'] !== undefined); // true
console.log(sq['getArea'] !== undefined); // true
// checking with 'hasOwn()'
console.log(Object.hasOwn(sq, 'side')); // true
console.log(Object.hasOwn(sq, 'getArea')); // false
Conclusion
The first two approaches (in
operator and Reflect.has()
method) is more prominent while the other three come with some limitations.
- As the name suggests, the
hasOwnProperty()
andhasOwn()
methods work only for the object’s own properties and not for inherited properties. - The
hasOwnProperty()
method is not available for objects created withObject.create(null)
. - The “comparing with
undefined
” approach works fine unless the specified property exists but hasundefined
as value.
You may also like
- Object.freeze() vs Object.seal() vs Object.preventExtensions()
- Map in JavaScript and when it's a better choice than Object
- JavaScript Set object to store unique values
- The Pipe and Compose utility methods in JavaScript
- Generator functions in JavaScript
- A brief guide to Object.defineProperty() method
- The Vibration API in JavaScript
- JavaScript Fetch API to make HTTP requests
- A brief guide to Promises in JavaScript
- 20+ JavaScript shorthand coding tricks
Thanks for your time ❤️
Find more of my writings on web development at jscurious.com
Top comments (1)
Those code snippets are good thanks for sharing them.