What does dim highlighted properties of a JavaScript object signify in Chrome Dev tools?

Question

I wanted to know that some properties of the object when we see in scope variables or hover over them(in Chrome developer tools) appears to be dim highlighted. What does it signify?

//Sample Code

'use strict'
        function myClass(first, second) {
            //            this.pehla = first;
            var private_Var = 'i_am_private_variable';
            this.doosra = second;
            Object.defineProperty(this, 'pehla', { value: '_Haani_Constant', writable: false });

        };

        var instanceOfClass = new myClass('1', '2');

        console.log(instanceOfClass.pehla);
        console.log('Assigning value to pehla');
        console.log("instanceOfClass.pehla = 'SomeOtherText' ");

        try {
            instanceOfClass.pehla = 'SomeOtherText';                                   
        } catch (e) {
            console.log(e.message); 
        }

See image for reference

Answer 1

The properties that are not enumerable are shown as dimmed. The reason for confusion in another answer is that defineProperty sets enumerable to false by default. Hence the property defined with defineProperty is dimmed unless enumerable is explicitly set to true in the parameters.

Try running the following code to test how different properties look like in DevTools:

var test = {
   prop1:"test",
   prop2:"test",
   prop3:"test",
};
Object.defineProperty(test,"other",{
   enumerable:true
});
Object.defineProperty(test,"other1",{
   enumerable:false
});   
Object.defineProperty(test,"other2",{
   writeable:false
});    
Object.defineProperty(test,"other3",{
   configurable:false
});    
console.log(test);

And try also running the code below to see which properties are actually enumerable:

for (i in test) console.log(i)

Answer 2

the ones that are dimmed are properties that do not have the default descriptor properties, ie the configurable, writeable, enumerable properties, setting any of these to false will cause the property to be dimmed.

var test = {
   prop1:"test",
   prop2:"test",
   prop3:"test",
   prop4:"test",
   prop5:"test",
   prop6:"test",
   prop7:"test",
   prop8:"test",
   prop9:"test",
   prop10:"test",
};
Object.defineProperty(test,"other",{
   enumerable:true
});
Object.defineProperty(test,"other1",{
   enumerable:false
});   
Object.defineProperty(test,"other2",{
   writeable:false
});    
Object.defineProperty(test,"other3",{
   configurable:false
});    
console.log(test);

When you expand the object tree you will see other as not dimmed, and other1,other2,other3 as dimmed

Some exceptions:

//other1 will not be dimmed for the following
Object.defineProperty(test,"other1",{
   enumerable:true,
   writeable:false,
   configurable:true
});   
Object.defineProperty(test,"other1",{
   enumerable:true,
   writeable:false,
   configurable:false
});  

Answer 3

By simply echoing String.prototype on my company website, it seems dimmed are inherited/pre-generated properties & functions.

In this case, numberFormat, regexIndexOf and regexLastIndexOf are functions that we created to extend the class, and reuse later. It also explains why normally in JSON or JS objects you'd usually see them all fully colored.

Another example: