"ES2022" 태그로 연결된 1개 게시물개의 게시물이 있습니다.

여러 제안이 기존 JavaScript 클래스 문법을 새로운 기능으로 확장합니다. 이 글은 V8 v7.2와 Chrome 72에서 새로운 공용 클래스 필드 문법, 그리고 곧 출시될 비공용 클래스 필드 문법에 대해 설명합니다.

IncreasingCounter라는 이름의 클래스 인스턴스를 생성하는 코드 예시는 다음과 같습니다:

const counter = new IncreasingCounter();
counter.value;
// 로그 출력: '현재 값을 가져오는 중!'
// → 0
counter.increment();
counter.value;
// 로그 출력: '현재 값을 가져오는 중!'
// → 1

value 접근 시 코드를 실행한 후 결과를 반환합니다(즉, 메시지가 로그에 출력됩니다). 그렇다면 이 클래스를 JavaScript로 어떻게 구현할 수 있을까요? 🤔

ES2015 클래스 문법​

IncreasingCounter를 ES2015 클래스 문법을 사용하여 구현하는 방법은 다음과 같습니다:

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('현재 값을 가져오는 중!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

클래스는 value getter와 increment 메소드를 프로토타입에 설치합니다. 더 흥미로운 것은, 클래스가 생성자인데, 이는 인스턴스 속성 _count를 생성하고 초기값을 0으로 설정합니다. 현재는 언더스코어 접두사를 사용하여 _count를 소비자가 직접 사용하지 않도록 권장합니다. 하지만 이것은 단지 관례일 뿐이며, 언어에 의해 특별한 의미가 부여된 “비공용” 속성은 아닙니다.