게시글

강좌29 - ECMAScript - 5달 전 등록

ES2022의 변화

아직 2021년인데 벌써 ES2022로 확정된 게 있는 모양입니다. 다만 여러분들이 이미 많이 쓰고 계셔서 어, 이게 아직도 공식 스펙이 아니었어? 라고 의문을 표하실 수도 있겠네요.

전부 다 클래스 속성 관련된 것들입니다. 메서드가 아닌 클래스 속성을 다음과 같이 쓸 수 있게 되었습니다.

class ZeroCho {
  name = '조현영';
  #age = 28;
  static isHuman = false;
}
new ZeroCho().age; // undefined
new ZeroCho().name; // '조현영'
ZeroCho.isHuman // false;

먼저 속성들을 더 이상 constructor 안에 쓰지 않아도 됩니다. 그냥 클래스 안에 위와 같이 선언하면 됩니다. 이미 안 쓰고 있었다고요? 그건 브라우저가 미리 지원해줘서 그랬지 정식 스펙은 아니었던 겁니다. 다만 생성자로부터 매개변수를 사용해야할 때는 여전히 constructor 함수를 사용해야 합니다.

private 속성이 추가되었습니다. 클래스 내부에서만 쓸 수 있는 속성이죠. 앞에 #만 붙이면 됩니다. 따라서 앞으로 private 속성을 가지기 위해 IIFE(즉시호출함수표현식)을 쓰지 않아도 됩니다.

static 속성은 앞에 static을 붙이면 됩니다. static 속성은 new를 사용하지 않고 쓰는 속성을 의미합니다. Array.isArray 같은 메서드가 있습니다.

static 속성도 앞에 #을 붙여서 private으로 만들 수 있습니다. 클래스 내부에서만 쓸 수 있게 됩니다. computed 속성들도 생겼습니다. 다만 computed 속성인 경우는 private이 안 되는 걸로 보입니다. computed 속성은 [] 안에 식을 적어주면 됩니다.

const a = 'fo';
const b = 'mo';
class ZeroCho {
  name = '조현영';
  #age = 28;
  static isHuman = false;

  static #isAlien = true;
  static [a + b] = 'yeah';
  [b + a] = 'wow'
}
ZeroCho.isAlient; // undefined
ZeroCho.fomo; // yeah
new ZeroCho().mofo // wow

마지막으로 private 메서드와 private static 메서드가 추가되었습니다. getter와 setter도 가능합니다. 

class ZeroCho {
  static #is(type) {
    return type === 'alien';
  }
  #isHuman() {
    return ZeroCho.#is('human');
  }
  isMan() {
    return this.#isHuman();
  }
}
new ZeroCho().isHuman // undefined
ZeroCho.is // undefined
new ZeroCho().isMan() // false

아직은 #이 어색하지만 언젠가 익숙해지는 날이 오겠죠.

혹시나 2022년 스펙에 더 추가되는 게 있으면 업데이트 하도록 하겠습니다.

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

아직 댓글이 없습니다.