[javascript] 생성자 안에서 인스턴스 변수 초기화

배경

https://ko.javascript.info/event-delegation

이벤트 위임

<div id="menu">
  <button data-action="save">저장하기</button>
  <button data-action="load">불러오기</button>
  <button data-action="search">검색하기</button>
</div>

<script>
  class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    save() {
      alert('저장하기');
    }

    load() {
      alert('불러오기');
    }

    search() {
      alert('검색하기');
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

  new Menu(menu);
</script>

이벤트 위임을 공부하던 중, 낯선 class 개념이 나왔다. 

 

  class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

생성자 안에서 두번째 statement는 elem의 onclick을 현재 객체에 있는 onClick함수에 바인딩하기 위함이라고 이해했다. 

this._elem = elem;

그렇지만 첫번째 statement는 대체 무슨 역할을 하는 걸까? _elem이란 변수를 쓰지도 않는데 ..

 

답변

1. 일단 언더바(_)는 java에서도 그랬듯이 바깥에서 말고 클래스 내부에서만 접근할 수 있는 속성, 인스턴스 변수를 뜻한다. javascript는 클래스의 속성을 생성자 내에서 초기화하지 않고도 외부에서 직접 할당이 가능한데, 그냥 개발자들끼리의 약속 같은 거다.

 

2. 객체 지향 프로그래밍의 핵심 원칙을 따르는 것

받은 인수를 클래스 내부에 저장하고, this._elem을 사용함으로써

1) 객체의 상태를 객체 내부에 캡슐화

2) 해당 상태에 접근하거나 수정할 수 있는 메서드를 제공함으로써 객체의 상태와 행동을 하나로 묶어 관리할 수 있다

 

ex.

class Example {
  constructor(elem) {
    this._elem = elem;
  }

  // _elem을 사용하는 메서드
  printElem() {
    console.log(this._elem);
  }
}

인스턴스의 _elem 속성으로 저장되며, printElem 메서드 등 클래스 내부의 다른 메서드에서 사용될 수 있다

 

결론

외부 인자를 내부에서 캡슐화 하기 위해 this._elem이란 내부 인자에 저장한 후, 클래스 내부의 다른 메소드에서 갖다 쓸 수 있음