More often we are struck with the simplest problem that can be solved very easily. We know the solution for the problem would be very easy, yet it is hard to come up with the solution. It gets overwhelming with all the new concepts and various things that are available online. This was one such problem for me when I started with JavaScript initially. So today I would like to list out the ways to check if the property exists in an object.
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.
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')
}
If the property does not exist, it will return false
console.log(favAuthor.hasOwnProperty('favVillain')) // false
2. in Operator
The in
operator returns true
if the specified property is in the specified object.
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')
}
If the property specified does not exist, the expression will return false
console.log('favVillain' in favAuthor) // false
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'
.
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')
}
If the property specified does not exist in the mentioned object, it will return false
console.log(typeof favAuthor.favVillain!== 'undefined') // false
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 and the falsy values here.
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
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')
}
If the property equals to null, which means the property does not exist, it will equate to false since null is falsy.
console.log(!!favAuthor.favVillain) // false
And that sums it up!
Thanks!