Question: 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

```js
//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 

```

Answer: 
You should set `enumerable` to `true`. In `Object.defineProperty` its `false` by default. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description).

> 
> **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

```js
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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames).

```js
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
```
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty):

> 
> **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:

```js
//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](https://pasteboard.co/IaOxMqB.png) 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](https://i.stack.imgur.com/1k4zA.png)](https://i.stack.imgur.com/1k4zA.png)

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