DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 5 ways to check if a key exists in an object in JavaScript
Amitav Mishra
Amitav Mishra

Posted on • Originally published at jscurious.com

5 ways to check if a key exists in an object in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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() and hasOwn() methods work only for the object’s own properties and not for inherited properties.
  • The hasOwnProperty() method is not available for objects created with Object.create(null).
  • The β€œcomparing with undefined” approach works fine unless the specified property exists but has undefined as value.

You may also like


Thanks for your time ❀️
Find more of my writings on web development at jscurious.com

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Those code snippets are good thanks for sharing them.

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

The hasOwnProperty ideally should be used like this:

const app = { name: 'Instagram', type: 'Social Media' };
console.log(Object.prototype.hasOwnProperty.call(app, 'type')); // true
console.log(Object.prototype.hasOwnProperty.call(app, 'founder_name')); // false
Enter fullscreen mode Exit fullscreen mode

This is because the dev could create its own hasOwnProperty method. This is the reason why we got Object.hasOwn.

Cheers!

🌚 Life is too short to browse without dark mode