(ECMAScript) ESNext stage-3(Candidate)

강좌21 - ECMAScript - 5년 전 등록 / 일 년 전 수정

ESNext stage-3(Candidate)

이 글은 아직 준비중입니다. 예고편이라고 보시면 됩니다. 가끔 실시간으로 업데이트되는 모습을 볼 수 있습니다!

안녕하세요. 이번 시간에는 ES2019로 채택될 유력 후보인 stage-3에 대해 알아보겠습니다!

stage-3이란 이름에서 유추할 수 있듯, stage-2도 있고, stage-1도 있습니다. stage-4와 stage-0도 있습니다. 각각의 stage가 무엇을 의미하는 지 궁금하시죠? 각각의 stage에는 이름이 붙어 있습니다.

stage-4는 Finished(종료), stage-3는 Candidate(후보), stage-2는 Draft(초안), stage-1은 Proposal(제안), stage-0은 Strawman(허수아비)입니다. 허수아비라는 이름이 재미있네요. 언제든지 스펙 후보에서 탈락할 위험에 처해있는 것들입니다.

stage-4는 정식 채택된 친구들입니다. stage-3인 얘들이 정식 채택된다면 stage-4로 이동되어 내년에 나오는 ES2021가 될 겁니다. stage-3은 가장 유력한 후보들인 것이죠. stage-2, stage-1의 것들은 한 두 단계를 더 올라와야 가능합니다.

보시다시피 현재 대부분의 브라우저가 지원하지 않습니다. 표는 http://kangax.github.io/compat-table/esnext/ 에 있습니다. 따라서 이 번 시간의 예제들은 콘솔에 치지 마시고 눈으로만 봐 주세요. 그냥 이런 기능이 내년에 추가되겠구나 하시면 됩니다.

WeakRef

instance class fields && static class fields && private fields

클래스의 속성을 더이상 constructor 안에 넣지 않아도 됩니다. 그냥 class 안에 선언하듯 적어주면 됩니다. 리액트를 쓰는 분들은 익숙할 것입니다.

추가로 private 속성도 생겼습니다. 객체 지향적인 부분이 강해지네요. 그동안 자바스크립트에 private 속성 지정이 없어서 다른 방법으로 흉내냈어야 했죠. 바벨에서도 class properties는 되지만 private 필드는 지원하지 않아 실험해볼 수가 없었습니다. 하지만 이제는 자바스크립트 자체에 곧 도입될 것으로 보입니다.

class ZeroCho {
  #weight;
  constructor(w) {
    this.#weight = w;
  }
  year = 1994;
  getWeight() {
    return this.#weight;
  }
}

new ZeroCho().year; // 1994
new ZeroCho(68).getWeight(); // 68

#으로 이 속성이 private임을 나타냅니다. constructor를 통해 private 속성에 값을 지정하는 것을 볼 수 있습니다. private 속성이기 때문에 ZeroCho.#weight으로 직접 접근은 불가능하고요. getWeight같은 getter 메소드를 통해서만 값을 가져올 수 있습니다. 또는 #weight = 68; 이렇게 class properties를 사용해 처음부터 값을 넣어줄 수도 있습니다.

숫자의 변화(numeric separators)

숫자 자료형에서 신기한 변화가 많이 추가되었습니다. 자바스크립트에서는 숫자가 크면 자리수 구별이 어려웠는데요. 다음과 같이 할 수 있습니다.

1_000_000.000_001 === 1000000.000001

조금 요상하기는 하지만, 훨씬 보기는 좋네요.

replaceAll

Promise.any

Logical Assignment

Hashbang

다음 시간에는 stage-2에 대해 알아보겠습니다!

조회수:

ZeroCho Blog

게시글