JavaScript에서 Object.defineProperty ()의 이상한 동작

JavaScript에서 Object.defineProperty ()의 이상한 동작

---

나는 아래의 자바 스크립트 코드로 놀고 있었다. 에 대한 이해 Object.defineProperty()와 나는 그것에 대해 이상한 문제에 직면하고 있습니다. 브라우저 또는 VS 코드에서 아래 코드를 실행하려고하면 출력이 예상과 다르지만 코드를 디버그하려고하면 출력이 정확합니다.

코드를 디버깅하고 프로필을 평가하면 name & age객체 의 속성을 볼 수 있지만 출력시에는 name속성 만 표시 됩니다.

//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)

이제 여기서 예상되는 출력은

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

그러나 나는 출력을 얻습니다. age나중에 정의 된 속성 에 액세스 할 수 있습니다 . 나는 왜 console.log()이런 식으로 행동 하는지 잘 모르겠습니다 .

{name: "Barry Allen"}
23 

---

로 설정해야 enumerable합니다 true. 에서 Object.defineProperty의 false에 의해 기본. MDN 에 따르면 .

true이 속성이 해당 개체의 속성을 열거하는 동안 표시되는 경우에만 열거 가능 합니다.

기본값은 false입니다.

열거 불가능은 속성이 콘솔에 표시되지 Object.keys()않거나 for..in반복되지 않음을 의미합니다.

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)

prototype내장 클래스의 객체에 대한 모든 속성과 메서드 는 열거 할 수 없습니다. 그것이 인스턴스에서 호출 할 수 있지만 반복하는 동안 나타나지 않는 이유입니다.

모든 속성 (열거 불가 포함)을 가져옵니다 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

---

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:

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

---

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)

참고URL : https://stackoverflow.com/questions/55757089/strange-behavior-of-object-defineproperty-in-javascript