[JS] 프로퍼티 플래그를 (특별한 방식으로)추가 / 변경 / 얻는 방법

속성	설명
Object.getOwnPropertyDescriptor()	주어진 객체 자신의 속성에 대한 속성 설명자(descriptor)를 반환한다.
Object.getOwnPropertyDescriptors()	주어진 객체의 모든 속성 설명자를 반환한다.
Object.defineProperty()	객체에 직접 새 속성을 정의하거나 객체의 기존 속성을 수정하고 객체를 반환한다.
Object.defineProperties()	Object.defineProperty()와 동일한 기능 한번에 여러 개의 프로퍼티를 정의/수정 할 수 있다.

---

getOwnPropertyDescriptor() 프로퍼티 설명자를 얻는 방법

Object.getOwnPropertyDescriptor(obj, propertyName);

• obj: 정보를 얻고자 하는 객체
• propertyName: 정보를 얻고자 하는 객체 내 프로퍼티

[예제]

let user = {
  numbers : {
    num1 : 1,
    num2 : 2
  }
};

Object.getOwnPropertyDescriptor(user, 'numbers');

"평범한 방식"으로 프로퍼티를 만들었기 때문에 플래그는 모두 "true"이다.

 

Q. "평범한 방식"으로 객체 프로퍼티를 만들었다는것이 무슨 뜻이죠?

아래와 같은 방법으로 만드는 것이 평범한 방식으로 프로퍼티를 만드는 방법입니다.

let user = {
  name : 'mill'
};

// 평범한 추가
user.age = 18;
user['blood'] = 'B';

user; // {name: "mill", age: 18, blood: "B"}

---

getOwnPropertyDescriptors() 프로퍼티 설명자를 한꺼번에 가져오는 방법 

Object.getOwnPropertyDescriptors(obj)

[예제]

let user = {
  name : 'mill',
  age : 15
};

Object.getOwnPropertyDescriptors(user);

---

defineProperty() 플래그를 (특별한 방식)추가/변경 하는 방법 

Object.defineProperty(obj, propertyName, descriptor)

• obj: 적용할 객체 선택
• propertyName: 설명자를 적용하고 싶은 객체 프로퍼티
• descriptor: 적용하고자 하는 프로퍼티 설명자

[propertyName]

객체에 key값이 있을 경우 => 객체의 값이 수정된다.

객체에 key값이 없을 경우 => 새로운 프로퍼티를 만든다.

 

[descriptor]

descriptor의 플래그 설정을 생략하면 값은 자동으로 "false"가 된다.

 

[예제]

let user = {
  name : 'mill'
};

// age 프로퍼티 추가
Object.defineProperty(user, "age", {
  value : 18, // 프로퍼티의 값 설정
  
  // 프로퍼티의 플래그 설정
  writable : true 
  // enumerable 생략
  // configurable 생략
  // 생략된 플래그 값은 false로 설정된다.
})

// 설명자 확인
Object.getOwnPropertyDescriptor(user, 'age')

"평범한 방식"이 아닌 "특별한 방식"으로 프로퍼티를 추가 했음으로 플래그의 기본 값이 false로 정의됐다.

---

defineProperties() 프로퍼티 여러 개를 한번에 정의하는 방법

Object.defineProperties(obj, {
  prop1 : descriptor1,
  prop2 : descriptor2
  // ...
})

[예제]

플래그는 값(value)에 포함돼 있기 때문에 descriptor에 객체 형태로 함께 작성한다.

let user = {};

Object.defineProperties(user, {
  name : {value : 'mill', writable: true},
  age : {value: 15, configurable: true}
});

---

프로퍼티 설명자를 한꺼번에 복사하는 방법

Q. for...in을 사용하면 되지 않나요? for...in은 플래그는 복사하지 않습니다.

[for...in이 플래그를 복사하는지 확인해 봅시다.]

//빈 객체를 만든다.
let user = {};

//defineProperties를 사용해서 프로퍼티 추가와 플래그 설정을 한다.
Object.defineProperties(user, {
  name : {value:'mill', enumerable:true, configurable:true},
  age : {value:15, writable:true, enumerable:true}
})

//잘 설정됐는지 확인
Object.getOwnPropertyDescriptors(user)

//복사할 빈 객체를 만들어 준다.
let forCopy = {};

//for...in을 사용해서 복사한다.
for(let key in user){
  forCopy[key] = user[key];
}

Object.getOwnPropertyDescriptors(forCopy)

값이 모두 true로 변경 돼 있다. 즉, for...in은 평범한 방식으로 값을 복사했다는 것을 알 수 있다.

Q. 그렇다면 플래그는 어떻게 복사하나요?

Object.getOwnPropertyDescriptors(obj)메서드를 Object.defineProperties와 함께 사용한다.

let 저장할 객체 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(복사할 객체));

[예제 (이전의 검증코드를 이어서 작성할 것)]

//flagCopy에 복사하기
let flagCopy = Object.defineProperties({}, Object.getOwnPropertyDescriptors(user));

//플래그가 복사됐는지 확인
Object.getOwnPropertyDescriptors(flagCopy)

---

[공부 좌표]

Object.getOwnPropertyDescriptor()

 

[기본 지식]

프로퍼티 플래그와 설명자

 

[참고]

객체 순환 fon...in / 배열 순환 for...of

프로퍼티 플래그 - writable, enumerable, configurable