Javascript Object #3

From the last Post We have seen what is Object and How to access the properties inside of them.while we went through the chapter two about Object we have discussed about two methods of accessing the Object Properties and we also concluded with what is …


This content originally appeared on DEV Community and was authored by sams-engine

From the last Post We have seen what is Object and How to access the properties inside of them.while we went through the chapter two about Object we have discussed about two methods of accessing the Object Properties and we also concluded with what is best on my opinion.Well,most of you may like easy and non-tricky method Dot-Notation but we have a drawback with that method.we can't completely nullify the issue,but we can do something to Prevent the error occuring while accessing them.

In the Post we are going to see,how to check wheater the Property is present in the Object or not.

JavaScript provides you with three common ways to check if a property exists in an object:

  • Use the hasOwnProperty() method.

  • Use the in operator.

  • Compare property with undefined.

  1. hasOwnProperty()

The Javascript Object.Prototype has a method called hasOwnProperty() that returns true if the Property we are looking for exist,otherwise it will return False.

The Basic Syntax is,

let result = targetObject.hasOwnProperty(propertyName);

here targetObject is our Object and PropertyName is the specific Property name we are searching for,

let's see this with an example

`let person = {
   firstName: 'Sam',
   lastName: 'r'
};`

we can check it by,

`let result = person.hasOwnProperty('firstName');
console.log(result); // true`

`let result = person.hasOwnProperty('age');
console.log(result); // false`

Note that the hasOwnProperty() looks for the property in the own properties of the object.

All Object Inherit a Property called toString of the Object,the hasOwnProperty() will not detact it as a property,

`let result = person.hasOwnProperty('toString'); 
console.log(result); // false`

2.the in operator

The in operator returns true if a property exists in an object. If a property does not exist in the object, it returns false.

The Syntax is,

propertyName in targetObject

let's have an example using the in operator.

`let person = {
   firstName: 'Sam',
   lastName: 'r'
};

let result = 'firstName' in person; 
console.log(result); // true

result = 'age' in person;
console.log(result); // false`

Both in operator and the hasOwnProperty() looks similar,but there is a key difference in it.that was,while checking for Object inherited method 'toString' in Object hasOwnProperty() will not detect that but in operator will detatct that,

`let person = {
   firstName: 'Sam',
   lastName: 'Rachael'
};

let result = 'toString' in person;
console.log(result); // true`

3.Comparing the property with undefined

When you access a non-existing property of an object, you will get undefined. Therefore, you can compare the property with the undefined to check if a property exists in an object.

`let person = {
   firstName: 'Sam',
   lastName: 'Rachael'
};

let result = person.firstName !== undefined;
console.log(result); // true`

uphere,we have checked for the 'not equal to undefined'.And in our Case yes firstName Property do exist and it's not equal to Undefined and retured True.

But there's an another problem in these method,

If an object has a property whose value is undefined, then comparing the property with undefined will return an incorrect result. For example

`let person = {
   firstName: 'Sam',
   lastName: 'Rachael',
   age: undefined
};

let result = person.age !== undefined;
console.log(result); // false`

In this example, the age property does exist in the person object. However, its initial value is undefined. Therefore, comparing the person.age with undefined returns false , which is not expected.
Yes,That's for now.

In the meantime, thanks for your time ...
Sam


This content originally appeared on DEV Community and was authored by sams-engine


Print Share Comment Cite Upload Translate Updates
APA

sams-engine | Sciencx (2023-03-30T04:37:29+00:00) Javascript Object #3. Retrieved from https://www.scien.cx/2023/03/30/javascript-object-3/

MLA
" » Javascript Object #3." sams-engine | Sciencx - Thursday March 30, 2023, https://www.scien.cx/2023/03/30/javascript-object-3/
HARVARD
sams-engine | Sciencx Thursday March 30, 2023 » Javascript Object #3., viewed ,<https://www.scien.cx/2023/03/30/javascript-object-3/>
VANCOUVER
sams-engine | Sciencx - » Javascript Object #3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/30/javascript-object-3/
CHICAGO
" » Javascript Object #3." sams-engine | Sciencx - Accessed . https://www.scien.cx/2023/03/30/javascript-object-3/
IEEE
" » Javascript Object #3." sams-engine | Sciencx [Online]. Available: https://www.scien.cx/2023/03/30/javascript-object-3/. [Accessed: ]
rf:citation
» Javascript Object #3 | sams-engine | Sciencx | https://www.scien.cx/2023/03/30/javascript-object-3/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.