- read

The Presence of Object Property in JavaScript

The Software Line 64

Photo by Alesia Kazantceva on Unsplash

When we need to check if JavaScript object contains specific property we can use several methods including JavaScript operators, specific static methods from Object class, object instance methods, array instance methods and custom JavaScript function.

Below you can find all of them with examples, so let’s start.

1. In operator

The in operator returns true if the specified property is present inside the object or inside its prototype chain. Operator also works for the objects created with Object.create() static method.

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

const hasLocation = 'location' in person;
if (hasLocation) {
console.log("We have the location data");
} else {
console.log("We don't have the location data")
}

// result
// We don't have the location data

const user = Object.create({ name: 'Donald' });
console.log('name' in user); // true

2. Object.prototype.hasOwnProperty() method

Here, we can use object instance method hasOwnProperty() to check if an object contains a specific property.

Although Object.prototype.hasOwnProperty() has been in JavaScript specification for quite a time, it has some drawbacks. hasOwnProperty() does not work for objects created using Object.create(null) as it does not inherit from Object.prototype, which makes the hasOwnProperty() unreachable for the created object. Using hasOwnProperty(), the object will throw an exception.

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

const hasName = person.hasOwnProperty('name');
if (hasName) {
console.log(`We have name property, value ${person.name}`);
} else {
console.log("We don't have name property");
}

// result
// We have name property, value John

const user = Object.create({ name: 'Paul' });
console.log(user.hasOwnProperty('name')); // false

3. Object.hasOwn() method

As the part of the ECMAScript 2022 version, we have static hasOwn() method inside the Object class. Object.hasOwn() is recommended over hasOwnProperty(), in browsers where it is supported.

Object.hasOwn() is the intended alternative for the Object.prototype.hasOwnProperty() method.

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

const hasAge = Object.hasOwn(person, 'age');
if (hasAge) {
console.log(`We have age property, value ${person.age}`);
} else {
console.log("We don't have age property");
}

// result
// We have age property, value 41

const user = Object.create({ name: 'Jorge' });
console.log(Object.hasOwn(person, 'name')); // true

4. Check for undefined value

When we try to access to the non-existent property of an object, then we have undefined value as the result. So we can use approach and do something only when property value is not undefined.

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

if (person.location !== undefined) {
// do some operation
} else {
console.log('Location property is not present on person object');
}

5. Object.keys() and Array.prototype.some() methods

This approach is using Object.keys() and Array.prototype.some() methods.
Basically, we are converting the object to the array of properties, and then we have some method with predicate function where we are checking the presence of the target property name. This method has the same drawback as the Object.prototype.hasOwnProperty() because we can’t find the object property if the object is created with Object.create() method.

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

const hasSurname = Object.keys(person).some(key => key === 'surname');
console.log(hasSurname); // true

const user = Object.create({ name: 'Thomas' });
const hasName = Object.keys(user).some(property => property === 'name');
console.log(hasName); // false

6. Custom JavaScript util function

This hasKey() function accepts object and target property name arguments and if both arguments are defined we have for-in loop through the object and inside each iteration we have a check if current property key is equals to the target one (input parameter).

const person = {
name: 'John',
surname: 'Doe',
age: 41
};

const user = Object.create({ name: 'Kevin' });

function hasKey(object, target) {
if (object && target) {
for (const key in object) {
if (key === target) {
return true;
}
}
return false;
} else {
return false;
}
}

console.log(hasKey(person, 'name')); // true
console.log(hasKey(person, 'location')); // false
console.log(hasKey(user, 'name')); // true

Conclusion

In general, being proficient with JavaScript objects is essential in Web Development.

As you can see, we have a lot of options when we need to check the presence of the property inside the specific JavaScript object. From my experience, “in” operator and Object.hasOwn() method are the methods we need to stick to in our every day work. Also, if we don’t have ECMAScript 2022 version from some reason we can use “in” operator or check for undefined value.

Thanks for reading.
I hope you enjoyed the article and learned something.