모던 자바스크립트 : 프로퍼티 어트리뷰트

1. 내부 슬롯과 내부 메서드

• 내부슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드
• ECMAScript 사양에 등장하는 이중 대괄호([[..]])로 감싼 이름들이 내부 슬롯과 내부 메서드
• ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 자바스크립트 엔진의 내부 로직이라 직접 접근이나 호출 방법이 없음 => 단 일부 내부 슬롯과 내부 메서드에 한해 간접적 접근 수단 제공
• 모든 객체는 [[Prototype]]이라는 내부 슬롯 가짐 => __proto__ 통해 간접 접근 가능

 

2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

a. 프로퍼티 상태와 프로퍼티 어트리뷰트

• 자바스크립트 엔진은 프로퍼티 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함
• 프로퍼티의 상태 : 프로퍼티의 값, 값의 갱신여부, 열거 가능 여부,  재정의 가능여부를 아우르는 말
• 프로퍼티 어트리뷰트 : 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯
  • ex) [[Value]], [[Writable]],[[Enumerable]],[[Configurable]]

b. Object.getOwnPropertyDescriptor 메서드 

• 프로퍼티 어트리뷰트에 직접 접근 할수 없지만 Object.getOwnPropertyDescriptor 메서드 사용해 간접 확인 가능
  • Object.getOwnPropertyDescriptor 메서드를 호출할 때 첫번째 매개변수에는 객체의 참조 전달, 두번째 매개변수에는 프로퍼티 키를 문자열로 전달
  • Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체 반환
  • 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립트 요구 시 undefined 반환
• Object.getOwnPropertyDescriptors 메서드
  • Object.getOwnPropertyDescriptor 메서드는 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체 반환
  • ES8 Object.getOwnPropertyDescriptors 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보 제공하는 프로퍼티 디스크립터 객체 반환

 

3. 데이터 프로퍼티와 접근자 프로퍼티

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

• 데이터 프로퍼티 : 키와 값으로 구성된 일반적이 프로퍼티
• 접근자 프로퍼티 : 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티

b. 데이터 프로퍼티

b-1. 데이터 프로퍼티의 어트리뷰트는 자바스크립트 엔진이 프로퍼티 생성할 때 자동 정의

b-2. Object.getOwnPropertyDescriptor 메서드

• Object.getOwnPropertyDescriptor 메서드가 반환한 프로퍼티 디스크리버 객체를 살펴보면 value 프로퍼티의 값은 'Lee'
  • 프로퍼티 어트리뷰트 [[Value]]의 값 ='Lee'
• writable, enumerable, configurable 프로퍼티 값은 모두 true
  • [[Writable]], [[Enumerable]], [Configurable]] 값이 true
  • 프로퍼티가 생성될 때 [[Value]]의 값은 프로퍼티 값으로 초기화되며 [[Writable]], [[Enumerable]], [Configurable]] 값이 true로 초기화
  • 프로퍼티를 동적 추가해도 마찬가지

c. 접근자 프로퍼티

c-1. 접근자 프로퍼티

• 접근자 프로퍼티 : 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티

• 접근자 함수는 getter/setter 함수라고도 부름
• 접근자 프로퍼티는 getter, setter 함수를 모두 정의할 수도 있고 하나만 정의할 수도 있음

• person 객체의 firstName과 lastName 프로퍼티는 일반적인 데이터 프로퍼티
• 메서드 앞에 get, set이 붙은 메서드는 getter, setter 함수
• getter, setter 함수의 이름 fullName이 접근자 프로퍼티
• 접근자 프로퍼티는 자체적으로 값 (프로퍼티 어트리뷰트 [[Value]])를 가지지 않으며 데이터 프로퍼티 값을 읽거나 저장만 관여

c-2. 접근자 fullName으로 프로퍼티 값에 접근하면 내부적으로 [[Get]] 내부 메서드 호출되었을 때 동작 과정

1. 프로퍼티 키가 유효한지 확인
   • 프로퍼티키는 문자열 또는 심벌이어야하며 프로퍼티 키 fullName은 문자열이라 유효한 프로퍼티 키
2. 프로토타입 체인에서 프로퍼티 검색
   • person 객체에 fullName 프로퍼티 존재
3. 검색된 fullName 프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인
   • fullName 프로퍼티는 접근자 프로퍼티
4. 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값 즉 getter 함수 호출해 결과 반환
   • 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값은 Object.getOwnPropertyDescriptor 메서드가 반환하는 프로퍼티 디스크립터 객체의 get 프로퍼티 값과 같음

d. 프로토 타입 

• 프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체
  • 프로토타입은 하위 객체에게 자신의 프로퍼티와 메서드를 상속
  • 프로토타입 객체의 프로퍼티나 메서드를 상속받은 하위 객체는 자신의 프로퍼티 또는 메서드인것처럼 자유롭게 사용 가능
• 프로토 타입 체인은 프로토 타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조
  • 객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메서드가 없다면 프로토타입 체인을 따라 프로토타입의 프로퍼티나 메서드를 차례대로 검색

e. 접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법

• Object.getOwnPropertyDescriptor 메서드가 반환한 프로퍼티 어트리뷰트를 객체로 표현한 프로퍼티 디스크립터 객체가 다름
• 접근자 프로퍼티와 데이터 프로퍼티의 프로퍼티 디스크립터 객체의 프로퍼티가 다름

 

4. 프로퍼티 정의

a. 프로퍼티 정의

• 프로퍼티 정의 : 새로운 프로퍼티 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의 하는 것
• 프로퍼티 값을 갱신 가능하도록 할것인지 프로퍼티를 열거 가능하도록 할것인지, 프로퍼티를 재저으이 가능하도록할 것 인지 정의 가능
• 이를 통해 객체의 프로퍼티가 어떻게 동작해야하는지 명확히 정의 가능

b. Object.defineProperty 메서드

• Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트 정의 가능
• 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체 전달

c. 프로퍼티 디스크립터 객체의 프로퍼티 일부 생략 가능

• Object.defineProperty 메서드로 프로퍼티 정의할 때 프로퍼티 디스크립터 객체의 프로퍼티 일부 생략 가능
• 생략된 어트리뷰트는 기본 값 적용

d. Object.defineProperties 메서드

• Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의 가능
• Object.defineProperties 메서드 사용 시 여러개 프로퍼티 한번에 정의 가능

 

5. 객체 변경 방지

자바스크립트의 객체

• 객체는 변경 가능한 값 =>  재할당 없이 직접 변경 가능
• 프로퍼티 추가 삭제 가능, 프로퍼티 값 갱신 가능

객체 변경 방지 메소드

• Object.defineProperty 또는 Object.defineProperties 메서드 사용해 프로퍼티 어트리뷰트 재정의 가능
• 자바스크립트는 객체의 변경 방지하는 다양한 메서드 제공
• 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다름

a. 객체 확장 금지 (Object.preventExtensions 메서드)

• Object.preventExtensions 메서드는 객체의 확장 금지
• 객체 확장 금지 = 프로퍼티 추가 금지
• 프로퍼티는 프로퍼티 동적 추가와 Object.defineProperty 메서드로 추가 모두 금지
• 확장 가능 여부는 Object.isExtensible 메서드로 확인

b. 객체 밀봉 (Obgect.seal 메서드)

• Obgect.seal 메서드는 객체 밀봉
• 객체 밀봉 : 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지 = 읽기와 쓰기만 가능
• 밀봉 객체 여부는 Object.isSealed 메서드로 확인

c.객체 동결 (Object.freeze 메서드)

• Object.freeze 메서드는 객체 동결
• 객체 동결 : 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지 = 읽기만 가능
• 동결 객체 여부는 Object.isFrozen 메서드로 확인

d. 불변 객체

• 위 내용들은 얕은 변경 방지로 직속 프로퍼티만 변경 방지되고 중첩 객체는 영향이 없음
• 객체의 중첩 객체까지 읽기전용의 불변 객체로 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드 호출해야함

 

 

 

 

모던 자바스크립트 딥다이브 책을 정리한 내용입니다!!!!