JavaScript Objects Retrieving properties from an object
Example
Characteristics of properties :
Properties that can be retrieved from an object could have the following characteristics,
- Enumerable
- Non - Enumerable
- own
While creating the properties using Object.defineProperty(ies), we could set its characteristics except "own". Properties which are available in the direct level not in the prototype level (__proto__) of an object are called as own properties.
And the properties that are added into an object without using Object.defindProperty(ies) will don't have its enumerable characteristic. That means it be considered as true.
Purpose of enumerability :
The main purpose of setting enumerable characteristics to a property is to make the particular property's availability when retrieving it from its object, by using different programmatical methods. Those different methods will be discussed deeply below.
Methods of retrieving properties :
Properties from an object could be retrieved by the following methods,
-
for..inloopThis loop is very useful in retrieving enumerable properties from an object. Additionally this loop will retrieve enumerable own properties as well as it will do the same retrieval by traversing through the prototype chain until it sees the prototype as null.
//Ex 1 : Simple data var x = { a : 10 , b : 3} , props = []; for(prop in x){ props.push(prop); } console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props = []; for(prop in x){ props.push(prop); } console.log(props); //["a","b"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props = []; Object.defineProperty(x, "b", {value : 5, enumerable : false}); for(prop in x){ props.push(prop); } console.log(props); //["a"] -
Object.keys()functionThis function was unveiled as a part of EcmaScript 5. It is used to retrieve enumerable own properties from an object. Prior to its release people used to retrieve own properties from an object by combining
for..inloop andObject.prototype.hasOwnProperty()function.//Ex 1 : Simple data var x = { a : 10 , b : 3} , props; props = Object.keys(x); console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props; props = Object.keys(x); console.log(props); //["a"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props; Object.defineProperty(x, "b", {value : 5, enumerable : false}); props = Object.keys(x); console.log(props); //["a"]
-
Object.getOwnProperties()functionThis function will retrieve both enumerable and non enumerable, own properties from an object. It was also released as a part of EcmaScript 5.
//Ex 1 : Simple data var x = { a : 10 , b : 3} , props; props = Object.getOwnPropertyNames(x); console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props; props = Object.getOwnPropertyNames(x); console.log(props); //["a"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props; Object.defineProperty(x, "b", {value : 5, enumerable : false}); props = Object.getOwnPropertyNames(x); console.log(props); //["a", "b"]
Miscellaneous :
A technique for retrieving all (own, enumerable, non enumerable, all prototype level) properties from an object is given below,
function getAllProperties(obj, props = []){
return obj == null ? props :
getAllProperties(Object.getPrototypeOf(obj),
props.concat(Object.getOwnPropertyNames(obj)));
}
var x = {a:10, __proto__ : { b : 5, c : 15 }};
//adding a non enumerable property to first level prototype
Object.defineProperty(x.__proto__, "d", {value : 20, enumerable : false});
console.log(getAllProperties(x)); ["a", "b", "c", "d", "...other default core props..."]
And this will be supported by the browsers which supports EcmaScript 5.
