프로퍼티 어트리뷰트

 

모던 자바스크립트 Deep Dive 참고하여 작성하였습니다.

 

 

[16장]-프로퍼티 어트리뷰트

모든 객체는 prototype이라는 내부 슬롯을 갖는다.

또한 프로퍼티를 생성할 때 , 상태(value,writable,,,등)를 나타내는 프로퍼티 어트리뷰트를 기본값으로 정의한다.

이때 __proto__를 통해 간접적으로 접근할 수 있다.

프로퍼티 어트리뷰트에 간접적으로 접근하기 위해서는 

Object.getOwnPropertyDescriptor 메서드를 이용하여 확인 가능하다. 

 

const person = {
  name: "Lee",
};
//첫번째 매개변수: 객체 참조 
//두번째 매개변수: 객체 키값(string)
console.log(Object.getOwnPropertyDescriptor(person, "name"));

//{value: 'Lee', writable: true, enumerable: true, configurable: true}

 

 

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분된다. 

 

데이터 프로퍼티

• key,value으로 구성된 일반적인 프로퍼티

[[Value]]	value	프로퍼티 키를 통해 프로퍼티 값에 접근 시 반환되는 값
[[Writable]]	writable	값의 변경 가능 여부를 나타내며 false인 경우 해당 프로퍼티는 읽기 전용 프로퍼티가 된다.
[[Enumerable]]	eumerable	값의 열거 가능 여부를 나타내며 false인 경우 for...in문이나 Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	configurable	프로퍼티 재정의 가능 여부를 나타내며 false인 경우 프로퍼티 삭제 및 프로퍼티 어트리뷰트 값의 변경이 금지된다. 단, [[Writable]]이 true인 경우 값 변경 및 [[Writable]]을 false로 변경하는 것은 허용된다.

 

const person = {
  name: "Lee",
};
person.age = 24;
console.log(Object.getOwnPropertyDescriptors(person));

//
age: {value: 24, writable: true, enumerable: true, configurable: true}
name: {value: 'Lee', writable: true, enumerable: true, configurable: true}

 

접근자 프로퍼티

• 자체적으로 값을 갖지 않지만, 프로퍼티 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 property (접근자 함수)
• 흔히들 알고있는 getter함수setter함수이다.

[[Get]]	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수
[[Set]]	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수
[[Enumerable]]	enumerable	데이터 프로퍼티의 [[Enumerable]]과 동일
[[Configurable]]	configurable	데이터 프로퍼티의 [[Configurable]]과 동일

 

 

const person = {
  firstName: "Lee",
  lastName: "soso",

  get fullName() {
    return `${this.name}`;
  },
  set fullName(name) {
    return ([this.firstName, this.lastName] = name.split(" "));
  },
};
person.age = 24;

person.fullName = "sun Jeon"; //접근자 프로퍼티에 값을 저장하면 setter함수 호출
console.log(person.firstName); //접근하면 getter함수가 호출 //sun

 

 

프로토타입 

어떤 객체의 상위 객체 역할을 한다. 상위 객체가 갖고 있는 것을 하위 객체는 상속받고, 상속받은 객체의 프로퍼티나 메서드를

자유롭게 사용 할 수 있다.

 

 

 

프로퍼티 정의

Object.defineProperties()사용

const person = {};
Object.defineProperties(person, {
  fistName: {
    value: "sun",
    writable: true,
  },
  lastName: {
    value: "Jeon",
    enumerable: true,
  },
  fullName: {
    get() {
      return `${this.fistName}`;
    },
    set(name) {
      [this.fistName, this.lastName] = name.split(" ");
    },
  },
});

person.fullName = "replace Suna";
console.log(Object.getOwnPropertyDescriptors(person));

 

 

객체 변경 방지

• 객체 확장 금지 
  • Object.preventExtensions
  • 프로퍼티 동적 추가 및 Object.defineProperty를 통한 프로퍼티 추가가 금지됨 -> Object.isExtensible로 확장 가능한 객체인지 여부 확인 가능
• 객체 밀봉
  • Object.seal
  • 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 수정이 금지됨, 즉 읽기 및 쓰기(값 갱신)만 가능 -> Object.isSealed로 밀봉된 객체인지 여부 확인 가능
• 객체 동결
  • Object.freeze
  • 프로퍼티 값 갱신도 불가능하며, 오로지 읽기만 가능 -> Object.isFrozen으로 동결된 객체인지 여부 확인 가능

 

 

cf) 프로퍼티와 어트리뷰트의 정의

프로퍼티

• key와 value로 이루어짐 
• 객체가 가지고 있는 실질적인 데이터 그 자체.

const user = {
  name: "Sun", //name: 프로퍼티 key, "Sun": 프로퍼티 값
  age: 25,
};

 

어트리뷰트 

• 프로퍼티를 설명하는 속성 정보
• [Value]]   : 실제 값
  [[Writable]]  : 값 변경 가능 여부
  [[Enumerable]] : 열거 가능 여부(for-in 등에서 보이게 할지)
  [[Configurable]]  : 삭제·재정의 가능 여부
• 어트리뷰트는 객체 프로퍼티를 만들 때 내부적으로 자동 설정됨.