객체 프로퍼티

황성호·2021년 3월 20일
0
post-custom-banner

객체 프로퍼티는 값(value) 과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 가짐

writable – true이면 값을 수정할 수 있습니다. 그렇지 않다면 읽기만 가능합니다.
enumerable – true이면 반복문을 사용해 나열할 수 있습니다. 그렇지 않다면 반복문을 사용해 나열할 수 없습니다.
configurable – true이면 프로퍼티 삭제나 플래그 수정이 가능합니다. 그렇지 않다면 프로퍼티 삭제와 플래그 수정이 불가능합니다.

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

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

let user = {
  name: "John"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/* property descriptor:
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Object.defineProperty
플래그를 변경

Object.defineProperty(obj, propertyName, descriptor)

obj, propertyName
설명자를 적용하고 싶은 객체와 객체 프로퍼티
descriptor
적용하고자 하는 프로퍼티 설명자

let user = {};

Object.defineProperty(user, "name", {
  value: "John"
});

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */

Object.defineProperties
프로퍼티 여러 개를 한 번에 정의

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


Object.defineProperties(user, {
 name: { value: "John", writable: false },
 surname: { value: "Smith", writable: false },
 // ...
});

Object.getOwnPropertyDescriptors
프로퍼티 설명자를 전부 한꺼번에 가져옴

getter와 setter

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

예시

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

접근자 프로퍼티 설명자
get – 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함
set – 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨
enumerable – 데이터 프로퍼티와 동일함
configurable – 데이터 프로퍼티와 동일함

접근자 프로퍼티 예시

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // John Smith

for(let key in user) alert(key); // name, surname

한 프로퍼티에 get과 value를 동시에 설정하면 에러가 발생

profile
개발!
post-custom-banner

0개의 댓글