16. 프로퍼티 어트리뷰트

브리·2022년 6월 15일
0

✔️ 내부 슬롯과 내부 메서드

자스 엔진의 구현 알고리즘을 설명하기 위한 의사프로퍼티, 의사 메서드를 뜻한다. [[...]] 이처럼 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드~
이는 자스 엔진 내부에서 실제로 동작하지만 개발자가 직접 접근하거나 호출할 수 있는 방법을 제공하지는 않는다.
다만 간접적으로 접근할 수 있는 수단을 제공하는데 [[Prototype]]을 __proto__ 로 접근할 수 있는 것이 그 예이다.

✔️ 프로퍼티 어트리뷰트

자스 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 자동 생성한다.
프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.

const person={
	name:'Lee'
}

person.age=20;//동적 추가

console.log(Object.getOwnPropertyDefcriptors(person));
/*
{
  name:{value:"Lee", writable:true, enumerable:true, configurable: true},
  age:{value:20, writable:true, enumerable:true, configurable: true}
}
*/
  • Object.getOwnPropertyDefcriptors 를 사용하면 객체의 모든 프로퍼티 애트리뷰트의 정보를 알 수 있음.
  • Object.getOwnPropertyDefcriptor 를 사용하면 하나의 프로퍼티 애트리뷰트의 정보를 알 수 있음.

📎 1. 데이터 프로퍼티

키-값으로 이루어진 평소에 우리가 볼 수 있는 프로퍼티

  • [[Value]] : 프로퍼티 값
  • [[Writable]] : 프로퍼티 값을 수정 가능 여부
  • [[Enumerable]] : 열거 가능 여부(for..in, keys 등을 사용할 수 있는지)
  • [[Configurable]] : 프로퍼티 어트리뷰트 자체 수정 가능 여부

위의 코드에서 볼 수 있듯이 프로퍼티가 생성될 때, 동적 추가 모두 writable, enumerable, configurable 모두 true 로 초기화 된다.

📎 2. 접근자 프로퍼티

값이 직접 할당되지 않고 다른 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티

  • [[Get]] : 데이터 읽기
  • [[Set]] : 데이터 저장하기
  • [[Enumerable]] : 열거 가능 여부(for..in, keys 등을 사용할 수 있는지)
  • [[Configurable]] : 프로퍼티 어트리뷰트 자체 수정 가능 여부

getter/setter 함수로도 불리는데, 접근자 프로퍼티는 둘 다 정의/하나 정의 가능하다.

const person = {
  first: "jihye",
  last: "park",

  get fullName() {
    return `${this.first} ${this.last}`;
  },
  set fullName(name) {
    [this.first, this.last] = name.split(" ");
  },
};

console.log(person.fullName());

위 코드에서 first, last 는 일반적인 데이터 프로퍼티고 fullName 은 접근자 프로퍼티다.

🛠 접근자 프로퍼티 동작과정

  1. 프로퍼티 키가 유효한지 확인(문자열 혹은 심벌이어야 함.)
  2. 프로토타입 체인에서 프로퍼티 검색
  3. 데이터인지 접근자인지 확인
  4. 접근자이면 getter 함수 호출, setter 함수 호출

프로퍼티 정의

명시적으로 정의하거나 재정의하는 것임! writable, enumerable, configurable 값을 직접 변경하는것임.

🛠 형식

definedProperty(객체이름, 프로퍼티 이름, {
  value: ~~,
  writable:false,
  enumerable:true,
  configurable:true            
})

person.lastName="Kim"//위에서 writable:false로 정의했기 때문에 이 식은 무시된다. 단, 에러는 발생 안함.

☄️ 여기서 값을 지정안해주면 동적 추가, 자동 추가 했을 때와 다르게 기본값이 false 값으로 들어간다!

객체 변경 방지

  1. preventExtensions
  2. seal
  3. freeze

추가하기, 읽기, 쓰기, 삭제하기, 어트리뷰트 재정의가 있다고 침

1.preventExtensions

이름에서 알 수 있듯 추가를 막음
읽기 쓰기 삭제 재정의 다 가능하다.

const person={name:'Lee'}

Object.preventExtensions(person);
console.log(Object.isExtensible(person));//false

person.age=20;//무시됨. strict mode 면 에러나긴 함

2. seal

추가, 삭제, 재정의 금지
읽기랑 쓰기만 가능 / 프로퍼티 값 갱신이 가능

const person={name:'Lee'}

Object.seal(person);
console.log(Object.isSeal(person));//false

person.name="Park";//됨
person.age=20;//무시됨. strict mode 면 에러나긴 함
delete person.name;//무시됨. strict mode 면 에러나긴 함

3. freeze

읽기 빼고 다 안됨.
읽기만 가능

const person={name:'Lee'}

Object.freeze(person);
console.log(Object.isFrozen(person));//false

person.name="Park";//무시됨. strict mode 면 에러나긴 함
person.age=20;//무시됨. strict mode 면 에러나긴 함
delete person.name;//무시됨. strict mode 면 에러나긴 함

참고로 변경 방지 메서드는 얕은 변경 방지라서 객체 안에 또 객체가 있고 그 객체의 프로퍼티가 있다면 걔한테는 적용 안댐.

profile
무럭무럭

0개의 댓글