📖 프로퍼티 어트리뷰트(feat. 내부 슬롯, 내부 메소드)

이번 포스팅에서는 프로퍼티 어트리뷰트에 대해 알아본다.

이 포스팅은 이옹모님의 자바스크립트 deep dive 16장을 참조하여 작성하였습니다.

본문 중 틀린 내용이 있다면 댓글을 통해 알려주시면 감사하겠습니다. 😊

내부 슬롯 , 내부 메서드

프로퍼티 어트리뷰트에 대해 얘기 하기 전에, 원활한 이해를 위해 먼저 자바스크립트의 내부 슬롯과 내부 메소드에 대해 살펴보자.😁😁

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 동작을 설명하기 위해 ECMAScript에서 정의한 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)이다.

즉 ECMAScript 사양에 등장하는 [[...]]로 감싼 이름들이 내부 슬롯과 내부 메서드이다.

조금 쉽게 이야기 하면 ECMAScript 문서에서 자바스크립트 내부 동작의 설명을 위해 정의해 놓은 가상 메소드라고 이해하면 될 듯 하다.

They are defined by this specification purely for expository purposes.

However, each object within an implementation of ECMAScript must behave as specified by the internal methods associated with it.

The exact manner in which this is accomplished is determined by the implementation.

ECMAScript 문서에서 발췌한 내부 슬롯 정의인데, 해석해 보면 '내부 슬롯은 설명을 목적으로 정의되었지만 실제로 내부에서 관련 메서드에 의해 명시된 대로 동작한다' 라고 써있다.

그러니까 실제로는 없지만 비슷한건 있는( 🤷‍♂️ ?) 존재라고 이해하면 될 것 같다.

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는것이 원칙이나, [[prototype]]과 같은 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공한다. (ex : object.__proto__)

이제 사전지식을 학습했으니, 본격적으로 프로퍼티 어트리뷰트에 대해 알아보자!

프로퍼티 어트리뷰트

객체가 갖는 프로퍼티의 종류는 데이터 프로퍼티, 접근자 프로퍼티로 두가지가 있다.

프로퍼티 어트리뷰트란 이러한 객체 내부의 각각의 프로퍼티들에 대해서 자바스크립트 엔진이 관리하는 속성값이다.

해당 프로퍼티가 데이터 프로퍼티냐, 접근자 프로퍼티냐에 따라 연관된 내부 슬롯이 달라진다.

데이터 프로퍼티(Data property)

자바스크립트 엔진은 객체의 데이터 프로퍼티가 생성될때 자동으로 프로퍼티의 속성값들을 정의한다.

구체적인 값으로는 객체의 프로퍼티에 대해 값을 갱신 가능하도록 할 것인지([[writable]]), 열거 가능하도록 할 것인지([[enumarable]]), 재정의 가능하도록 할 것인지([[configurable]])가 있다.

말로 설명해 놓으니 좀 어려운데, Object.getOwnPropertyDescriptor 메서드를 사용하면 간접적으로 확인 해볼 수 있다. 코드를 통해 살펴보자.

const person = {
  name: "Lee",
};

console.log(Object.getOwnPropertyDescriptor(person, "name"));
// { value: 'Lee', writable: true, enumerable: true, configurable: true }

위 코드의 실행 결과를 보면 person 객체에 name 프로퍼티에 대한 데이터 프로퍼티를 확인해 볼 수 있다. (자바스크립트 엔진이 자동적으로 value, writable, enmuerable, configurable attribute를 정의한다는 사실도 같이 확인 할 수 있다!)

데이터 프로퍼티 어트리뷰트가 갖는 각각의 속성에 대해 조금 더 자세히 살펴보면 다음과 같다.

Object.defineProperty라는 메서드를 사용하면 해당 프로퍼티에 대한 속성값을 직접 정의할 수 있다. 그렇다면 정말 수정이나 삭제가 안되게 만들 수 있는지 한번 실험해보자!

const test = {};

Object.defineProperty(test, "cannotEdit", {
  value: "cannotEdit",
  writable: false,
  enumerable: true,
  configurable: false,
});

console.log(test); // { cannotEdit: 'cannotEdit' }

test.cannotEdit = "try edit..."; // 변경 시도
console.log(test); // { cannotEdit: 'cannotEdit' }

delete test.cannotEdit; // 삭제 시도
console.log(test); // { cannotEdit: 'cannotEdit' }

위와 같이 실제로 writable을 false로 정의하면, cannnotEdit이란 property의 value를 수정해도 수정되어지지 않고 무시된다.

접근자 프로퍼티(Accessor property)

두번째로 살펴볼 접근자 프로퍼티는 접근자 함수로 구성된 프로퍼티로, 자체적으로는 값을 갖지 않으며 데이터 프로퍼티의 값을 읽거나 변경할 때 사용된다.

데이터 프로퍼티와 마찬가지로, 접근자 프로퍼티도 우리가 직접 정의할 수 있다. 접근자 프로퍼티의 set과 get을 직접 정의해서 사용해보며 이해해보자!

test = {
  first: "java",
  second: "script",

  get firstPlusSecond() {
    // get을 직접 정의
    return `${this.first}${this.second}`;
  },

  set firstPlusSecond(name) {
    // set을 직접 정의
    [this.first, this.second] = name.split(" ");
  },
};

descriptor = Object.getOwnPropertyDescriptor(test, "firstPlusSecond");
console.log("firstPlusSecond", descriptor);

/* firstPlusSecond {
  get: [Function: get firstPlusSecond],
  set: [Function: set firstPlusSecond],
  enumerable: true,
  configurable: true
} */

console.log(test.firstPlusSecond); 
// [[get]]이 호출되어 javascript를 반환한다.

test.firstPlusSecond = "Type script";
// [[set]]이 호출되어 first와 second의 값을 변경한다.

console.log(test.firstPlusSecond); 
// [[get]]이 호출되어 Typescript를 반환한다.

접근자 프로퍼티 get과 set을 정의하여 first와 second에 직접 접근해 보고 변경해보았다.

이처럼 객체에 접근자 프로퍼티 함수인 get과 set을 정의해 놓으면, 해당 프로퍼티에 값을 가져올때는 get 을 호출하고, 해당 프로퍼티에 값을 저장할때는 set을 호출 한다!

정리

내부 슬롯 & 내부 메소드부터 프로퍼티 어트리뷰트까지 내용이 좀 많았다.
마지막으로 한번 정리해보자.

• 내부 슬롯과 내부 메소드는 자바스크립트의 내부 동작방식을 설명하는 의사코드이다.
• 프로퍼티의 종류는 데이터 프로퍼티가 있고, 접근자 프로퍼티가 있다.
• 데이터 프로퍼티의 어트리뷰트(속성값)는 객체의 해당 프로퍼티에 대한 삭제, 추가, 변경등의 가능 여부에 대해 정의한다.
• 객체에 새로운 프로퍼티가 추가될 때마다 자바스크립트 엔진은 내부적으로 프로퍼티 어트리뷰트를 자동으로 정의한다.
• 접근자 프로퍼티는 접근자 함수로 구성된 프로퍼티로, 다른 데이터 프로퍼티의 값을 읽거나 변경할때 쓰인다.

---

마치며

이번 포스팅은 내부 슬롯, 프로퍼티 어트리뷰트등 생소한 개념이 나와서 조금 이해가 어려웠다.
그래도 포스팅을 작성하면서 헷갈렸던 내용들이 조금 정리가 된 기분이다!

자바스크립트의 핵심인 객체인 만큼 숨겨진 개념들이 많은 것 같다. 차근차근 공부하며 정복해 봐야지.