프로퍼티 어트리뷰트가 뭔가요?

 

자바스크립트에는 프로퍼티 어트리뷰트(Property Attribute)라는 것이 있습니다.

이걸 그냥 보면 이해하기 어렵습니다.

객체지향 프로그래밍을 먼저 이해해야 프로퍼티 어트리뷰트가 왜 존재하는 것인지, 어떤 역할을 하는건지 감을 잡을 수 있어요.

 

객체지향 프로그래밍

OOP(Object Oriented Programming)라고도 불리는 객체지향 프로그래밍은 소프트웨어 개발 방식의 하나입니다.

모든 것을 객체로 보고, 그 객체들이 서로 협력하며 프로그램을 이루어냅니다.

 

객체지향이 뭐가 좋냐, 하면

현실 세계의 개념을 그대로 코드로 가져오기가 쉽습니다.

 

쇼핑몰 웹사이트를 만들어야 한다고 생각해볼까요?

현실 세계의 경우를 먼저 생각해봅시다.

소비자가 쇼핑몰에 가서 마음에 드는 상품을 카트에 담고 카운터로 가서 계산하겠죠.

이를 객체지향 방식으로 구현한다고 하면, 아래와 같은 객체들이 나올 겁니다.

 

User         - 소비자
ShoppingMall - 쇼핑몰
Product      - 상품
Cart         - 카트
Order        - 주문하는 곳(카운터)
Payment      - 결제

 

이런 식으로 역할에 맞게 객체를 나누면, 현실에서의 행동 흐름과 비슷한 방식으로 코드를 쓸 수 있습니다.

 

shoppingMall.carts = [new Cart(), new Cart()];    // 쇼핑몰에 카트를 비치합니다
shoppingMall.orders = [new Order(), new Order()]; // 쇼핑몰에 카운터도 비치합니다
shoppingMall.orders.forEach((order) => {
  order.payment = new Payment(); // 카운터마다 포스기도 하나씩 놓습니다
});

user.cart = shoppingMall.carts[0]; // 소비자가 쇼핑몰에서 카트를 하나 가져갑니다
user.cart.products.push(product);  // 소비자가 카트에 제품 하나를 담습니다

shoppingMall.orders[0].makeOrder(user.cart.products); // 소비자 카트에 담긴 것들을 0번 카운터에 가져가서 주문을 생성합니다
shoppingMall.orders[0].payment.pay(user.account); // 계산합니다

 

뭐 이런 식으로 쓸 수 있어요.

각 객체가 현실 세계의 물건(또는 사람) 하나와 매핑되기 때문에, 그 역할을 나누기가 쉽고, 코드를 이해하기도 쉽습니다.

 

이 객체지향 프로그래밍 방식이 유행하고 발전하면서, 이런 코드 작성 방식을 더욱 단단하게 만들기 위한 개념들이 등장했습니다.

 

그 중에서도 캡슐화라는 개념이 있는데, 이게 자바스크립트의 프로퍼티 어트리뷰트와 개념적으로 되게 비슷해요.

 

캡슐화란?

캡슐이 어떻게 생겼죠? 단단하게 보호막으로 싸여서, 외부에서 내부를 들여다보거나 사용할 수 없도록 되어 있습니다.

그러니까 캡슐화는 어떤 객체의 프로퍼티와 메서드에 직접 접근을 막고, 내부와 외부를 분리하는 설계라고 할 수 있습니다.

 

캡슐화를 하게 되면 해당 객체 내부에서만 쓰는 프로퍼티와 외부에 드러내는 프로퍼티를 분리할 수 있게 됩니다.

그러면 어떤 장점이 생기냐, 여러 장점이 있는데요.

그 중에서도 코드의 유지보수성이 증가한다는 장점이 있습니다. 왜냐!

내부에서만 쓰는 프로퍼티는 외부에 의해 변경되지 않는다는 보장이 되죠. 그래서 우리는 캡슐화된 내부 프로퍼티를 다룰 때 외부에 의한 변경을 신경쓸 필요가 없습니다. 인지적 부하가 감소하니까 코드를 변경하기가 더 쉽겠죠!

 

프로퍼티 어트리뷰트와 캡슐화의 연관성

그래서 이 글의 제목! 프로퍼티 어트리뷰트는 도대체 뭐고, 캡슐화랑은 무슨 연관이 있을까요?

프로퍼티 어트리뷰트와 캡슐화는 “객체의 프로퍼티를 어떻게 다룰 수 있게 할 것인가”라는 점에서 연결됩니다.

 

캡슐화가 객체의 내부와 외부를 나누는 설계라면, 프로퍼티 어트리뷰트는 자바스크립트에서 프로퍼티의 동작 방식을 세밀하게 정하는 장치입니다.

이게 무슨 말이냐,

어떤 프로퍼티는 외부에서 값을 바꾸지 못하게 하고,

어떤 프로퍼티는 반복문에 노출되지 않게 하고,

어떤 프로퍼티는 삭제하거나 재정의하지 못하게 만들 수 있습니다.

 

완전한 private 접근 제어와 같지는 않지만, 객체의 내부 구조를 보호하고 외부에 드러낼 부분을 조절한다는 점에서 캡슐화와 비슷한 역할을 합니다.

 

프로퍼티 어트리뷰트란?

프로퍼티 어트리뷰트는 자바스크립트 객체의 프로퍼티가 가지고 있는 내부 설정값입니다.

예를 들어 어떤 객체에 name이라는 프로퍼티가 있다고 해봅시다.

 

const user = {
  name: "woni"
};

 

우리가 보기에는 name이라는 키와 "woni"라는 값만 있는 것처럼 보입니다.

하지만 자바스크립트 내부에서는 이 프로퍼티를 더 자세히 관리합니다.

 

{
  value: "woni",
  writable: true,
  enumerable: true,
  configurable: true
}

 

여기서 value는 실제 값입니다.
writable은 값을 바꿀 수 있는지 정합니다.
enumerable은 반복문이나 Object.keys() 같은 곳에 노출되는지 정합니다.
configurable은 프로퍼티를 삭제하거나 설정을 다시 바꿀 수 있는지 정합니다.

이런 설정값을 직접 확인하고 싶으면 Object.getOwnPropertyDescriptor()를 사용할 수 있습니다.

 

const user = {
  name: "woni"
};

console.log(Object.getOwnPropertyDescriptor(user, "name"));

 

또 직접 설정하고 싶으면 Object.defineProperty()를 사용할 수 있습니다.

 

const user = {};

Object.defineProperty(user, "name", {
  value: "woni",
  writable: false,
  enumerable: true,
  configurable: false
});

user.name = "minami";

console.log(user.name); // "woni"

 

위 코드에서 writable을 false로 설정했기 때문에 name 값은 바뀌지 않습니다.

즉 프로퍼티 어트리뷰트는 객체의 프로퍼티를 그냥 값으로만 보는 것이 아니라, 그 값이 어떻게 읽히고, 변경되고, 노출되고, 삭제될 수 있는지까지 정하는 설정이라고 볼 수 있습니다.

 

---

 

자바스크립트 객체가 단순한 key-value 묶음이 아니죠?

내부적으로 꽤 정교한 규칙을 가지고 있습니다.

그리고 그 덕분에 객체지향의 캡슐화 비슷한 기능들.. 을 보장하게 되었다. 라고 이해하면 무리가 없을 것 같아요.