JavaScript 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,

  1. for..in loop

    This 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"]
    
  2. Object.keys() function

    This 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..in loop and Object.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"]
    
  1. Object.getOwnProperties() function

    This 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.