68

I was playing with below javascript code. Understanding of Object.defineProperty() and I am facing a strange issue with it. When I try to execute below code in the browser or in the VS code the output is not as expected whereas if I try to debug the code the output is correct

When I debug the code and evaluate the profile I can see the name & age property in the object But at the time of output, it only shows the name property

//Code Snippet 
let profile = {
  name: 'Barry Allen',
}

// I added a new property in the profile object.
Object.defineProperty(profile, 'age', {
  value: 23,
  writable: true
})

console.log(profile)
console.log(profile.age)

Now expected output here should be

{name: "Barry Allen", age: 23}
23

but I get the output as. Note that I am able to access the age property defined afterwards. I am not sure why the console.log() is behaving this way.

{name: "Barry Allen"}
23 
76

You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.

enumerable

true if and only if this property shows up during enumeration of the properties on the corresponding object.

Defaults to false.

Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console

let profile = {
    name: 'Barry Allen',
}

// I added a new property in the profile object.

Object.defineProperty(profile , 'age', {
    value: 23,
    writable: true,
    enumerable: true
})
console.log(profile)
console.log(profile.age)

All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.

To get all properties(including non-enumerable)Object​.get​OwnProperty​Names() .

let profile = {
    name: 'Barry Allen',
}

// I added a new property in the profile object.

Object.defineProperty(profile , 'age', {
    value: 23,
    writable: true,
    enumerable: false
})
for(let key in profile) console.log(key) //only name will be displayed.

console.log(Object.getOwnPropertyNames(profile)) //You will se age too

  • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false). – randomSoul Apr 19 at 5:48
  • @randomSoul I can't get what you mean. – Maheer Ali Apr 19 at 5:54
  • 1
    See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown. – randomSoul Apr 19 at 5:59
  • 7
    @randomSoul In Chrome console, you should see unenumerable properties colored a little bit transparent. – Yong Quan Apr 19 at 6:20
  • 3
    @randomSoul That's a debugging feature, not a language feature. If you change the example to use JSON.stringify it will behave consistently, and omit the non-enumerable properties. – Mike Caron Apr 19 at 16:16
19

By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you iterate over their Object.keys (which is what the snippet console does). (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)

See MDN:

enumerable

true if and only if this property shows up during enumeration of the properties on the corresponding object.

Defaults to false.

Make it enumerable instead:

//Code Snippet 
let profile = {
  name: 'Barry Allen',
}

// I added a new property in the profile object.
Object.defineProperty(profile, 'age', {
  value: 23,
  writable: true,
  enumerable: true
})

console.log(profile)
console.log(profile.age)

The reason you can see the property in the logged image is that Chrome's console will show you non-enumerable properties as well - but the non-enumerable properties will be slightly greyed-out:

enter image description here

See how age is grey-ish, while name is not - this indicates that name is enumerable, and age is not.

  • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently? – Maheer Ali Apr 19 at 6:11
  • 3
    Yes, that's a Chrome console behavior - it'll show you all properties, including non-enumerable ones, see edit. The non-enumerable properties (like age and __proto__) will be slightly greyed out. – CertainPerformance Apr 19 at 6:17
4

Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.

//Code Snippet 
let profile = {
  name: 'Barry Allen',
}

// I added a new property in the profile object.
Object.defineProperty(profile, 'age', {
  value: 23,
  writable: true,
  enumerable : true,
  configurable : true
})

console.log(profile)
console.log(profile.age)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.