ZeroCho Blog

아직 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

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

at

그리고 배열과 문자열에 at 메서드가 추가되었습니다.

[1,2,3].at(2); // 3
[1,2,3].at(-1); // 3
'hello'.at(-1); // o

[-1]같은 마이너스 인덱스를 못 쓰던 한을 at으로 푸시면 됩니다. [-1]는 아마 컴파일러 한계때문에 도입되지 못한 것 같습니다.

hasOwn

Object에는 hasOwn 메서드가 추가되었습니다. 객체 자기 자신의 속성인지 체크합니다.

Object.hasOwn({ x: 3 }, 'x'); // true
Object.hasOwn({ x: 3 }, 'y'); // false
Object.hasOwn({ x: 3 }, 'toString'); // false

Error Cause

에러 객체에 좀 더 구체적인 원인을 적는 cause 속성이 추가되었습니다.

const e = new Error('에러', { cause: '원인' });
e.cause; // 원인