5 ways to check if the property exists in JavaScript Object

Tags: javascript, webdev, programming
Published: 2020-12-08 10:05:35

When I started my journey with programming, there were many problems that took time for me to understand. *JavaScript Objects* was one of them. However I learnt it gradually over the time after I started using it frequently. I am sure it is different topics for different people.

So today, I would like to write about how to check if the property exists in the object since it is one of the common things we deal with frequently.

![Object Example](https://miro.medium.com/max/1050/1*uJBko1sY_04MuzgqWYQuew.png)

##1. Using Object method hasOwnProperty()

The most common solution would be to use `hasOwnProperty()` which is one of the common object methods. This method returns a *boolean* indicating whether the object has the specified property.
```javascript
var favAuthor = {
  name: 'Dan Brown',
  favBook: 'Lost Symbol',
  favCharacter: 'Robert Langdon'
}
if(favAuthor.hasOwnProperty('favCharacter')) // true
{console.log('The property exists')}
else {
  console.log('The property does not exist')
}
```
##2. in Operator
The `in` operator returns *true* if the specified property is in the specified object.

```javascript
var favAuthor = {
  name: 'Dan Brown',
  favBook: 'Lost Symbol',
  favCharacter: 'Robert Langdon'
}
if('name' in favAuthor) // true
{console.log('The property exists')}
else {
  console.log('The property does not exist')
}
```
##3. Using typeof and compare it with undefined
If the property doesn’t exist, the type of the property should be `’undefined'` and hence we can use `typeof` operator and comparing it with `’undefined'` .

```javascript
var favAuthor = {
  name: 'Dan Brown',
  favBook: 'Lost Symbol',
  favCharacter: 'Robert Langdon'
}
if(typeof favAuthor.name !== 'undefined') // true
{console.log('The property exists')}
else {
  console.log('The property does not exist')
}
```
##4. Using !! operator (double-bang operator)
This is the least known method to check the property in the object. In JavaScript, every value has an associated *boolean*, *true* or *false*. For example, a null value has an associated *boolean* value of *false*. A string value, such as `abc` has an associated *boolean* value of *true*.

You can find the list of `truthy` values [here](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and the `falsy` values [here](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

Null is a `falsy` value.
```
!!null // false
```

So we can take advantage of that by the name of the property we want to check using the `!!` operator. If the key to the property value is not null, it will return *true*
```javascript
var favAuthor = {
  name: 'Dan Brown',
  favBook: 'Lost Symbol',
  favCharacter: 'Robert Langdon'
}
if(!!favAuthor.name) // true
{console.log('The property exists')}
else {
  console.log('The property does not exist')
}
```

##5. Using Optical Chaining
You can return *true* or *false* by using optical chaining. It returns `undefined` if the property does not exist which we can take advantage of. 

```javascript
var favAuthor = {
  name: 'Dan Brown',
  favBook: 'Lost Symbol',
  favCharacter: 'Robert Langdon'
}
if(favAuthor?.name != undefined) {
  console.log('Property exists')
}
else {
  console.log('Property does not exist')
}

```
Comment below if you know any other ways. 

Thank You