[번역] Ecma 인터네셔널에서 ECMAScript 2022를 승인했습니다. 새로운 기능은 무엇인가요?

원문 : https://2ality.com/2022/06/ecmascript-2022.html

2022년 6월 22일, 제123회 Ecma 총회에서 ECMAScript 2022 언어 사양을 승인했습니다. 이는 이제 공식적으로 표준이 됨을 의미합니다.

이 블로그 게시물은 새로운 기능에 대해 설명합니다.

1. ECMAScript 2022의 편집자

이 릴리스의 편집자는 다음과 같습니다.

• Shu-yu Guo
• Michael Ficarra
• Kevin Gibbons

2. ECMAScript 2022의 새로운 기능은 무엇입니까?

2.1 클래스의 새로운 멤버

class MyClass {
  instancePublicField = 1;
  static staticPublicField = 2;

  #instancePrivateField = 3;
  static #staticPrivateField = 4;

  #nonStaticPrivateMethod() {}
  get #nonStaticPrivateAccessor() {}
  set #nonStaticPrivateAccessor(value) {}

  static #staticPrivateMethod() {}
  static get #staticPrivateAccessor() {}
  static set #staticPrivateAccessor(value) {}

  static {
    // 정적 초기화 블록
  }
}

• 프로퍼티(퍼블릭 슬롯)은 이제 다음을 통해 생성할 수 있습니다.
  • 인스턴스 퍼블릭 필드
  • 정적 퍼블릭 필드
• 프라이빗 슬롯은 새로운 기능이며 다음을 통해 생성할 수 있습니다.
  • 프라이빗 필드 (인스턴스 프라이빗 필드 및 정적 프라이빗 필드)
  • 프라이빗 메소드와 접근자 (비-정적 및 정적)
• 정적 초기화 블록

2.2 in 연산자를 통해 프라이빗 슬롯 검사

프라이빗 슬롯 검사는 "프라이빗 필드를 위한 인체공학적 브랜드 검사"라고도 합니다. 아래의 표현식으로 검사를 진행하고 obj에 #privateSlot이 있는지 확인합니다.

#privateSlot in obj;

다음은 예입니다.

class ClassWithPrivateSlot {
  #privateSlot = true;
  static hasPrivateSlot(obj) {
    return #privateSlot in obj;
  }
}

const obj1 = new ClassWithPrivateSlot();
assert.equal(ClassWithPrivateSlot.hasPrivateSlot(obj1), true);

const obj2 = {};
assert.equal(ClassWithPrivateSlot.hasPrivateSlot(obj2), false);

선언된 스코프 내의 프라이빗 슬롯만 참조할 수 있는 것에 주의하세요.

프라이빗 슬롯 검사에 대한 추가 정보.

2.3 모듈에서 최상위(Top-level) await

이제 모듈에서 최상위(top-level) await를 사용할 수 있으며 더 이상 비동기 함수나 메서드를 입력할 필요가 없습니다.

// my-module.mjs
const response = await fetch("https://example.com");
const text = await response.text();
console.log(text);

top-level await에 대한 추가 정보.

2.4 error.cause

Error와 그 하위 클래스를 통해 현재 에러의 원인이 된 에러를 지정할 수 있습니다.

try {
  // Do something
} catch (otherError) {
  throw new Error("Something went wrong", { cause: otherError });
}

오류의 원인 err은 스택 추적에 표시되며 err.cause를 통해 접근할 수 있습니다.

error.cause에 대한 추가 정보.

2.5 인덱싱 가능한 값의 .at() 메서드

인덱싱 가능한 값에 .at() 메서드를 사용하면 지정된 인덱스(대괄호 연산자 []와 같이)의 요소를 읽을 수 있고 음수 인덱스(대괄호 연산자와는 다르게)를 지원합니다.

> ['a', 'b', 'c'].at(0)
'a'
> ['a', 'b', 'c'].at(-1)
'c'

아래의 "인덱싱 가능한" 유형에서 .at() 메서드를 지원합니다.

• string
• Array
• 모든 Typed Array 클래스: Uint8Array etc.

인덱싱 가능한 값의 .at() 메서드에 대한 추가 정보

2.6 RegExp match indicies

/d 플래그를 정규식에 추가하면 이를 사용하여 각 그룹 캡처의 시작 및 끝 인덱스를 기록하는 match 객체가 생성됩니다. (하단의 A 및 B 라인)

const matchObj = /(a+)(b+)/d.exec("aaaabb");

assert.equal(matchObj[1], "aaaa");
assert.deepEqual(
  matchObj.indices[1],
  [0, 4] // (A)
);

assert.equal(matchObj[2], "bb");
assert.deepEqual(
  matchObj.indices[2],
  [4, 6] // (B)
);

RegExp match indicies에 대한 추가 정보.

2.7 Object.hasOwn(obj, propKey)

Object.hasOwn(obj, propKey)는 객체 obj에 propKey 키가 있는 고유(비상속) 속성이 있는지 확인하는 안전한 방법을 제공합니다.

const proto = {
  protoProp: "protoProp",
};
const obj = {
  __proto__: proto,
  objProp: "objProp",
};

assert.equal("protoProp" in obj, true); // (A)

assert.equal(Object.hasOwn(obj, "protoProp"), false); // (B)
assert.equal(Object.hasOwn(proto, "protoProp"), true); // (C)

in은 상속된 속성(행A)을 검출하지만 Object.hasOwn()은 자체 속성(행B 및 C)만 알아내는 것에 주의해 주세요.

Object.hasOwn()에 대한 추가 정보.

3. FAQ

3.1 JavaScript와 ECMAScript의 차이점은 무엇입니까?

• 간단하게 설명하면 다음과 같습니다.
  • JavaScript는 다양한 플랫폼(브라우저, Node.js, Deno 등)에서 구현되는 프로그래밍 언어입니다.
  • ECMAScript는 ECMAScript 언어 사양에서 설명된 것처럼 표준입니다.
• 더 자세한 설명은 "참을성 없는 프로그래머를 위한 자바스크립트"의 "자바스크립트 표준화" 섹션을 참조하십시오.

3.2 누가 ECMAScript를 설계합니까? TC39 – Ecma 기술 위원회 39

ECMAScript는 Ecma 국제 표준 조직의 기술 위원회 39(TC39)에서 설계했습니다.

이곳의 멤버는 엄밀히 말하면 Adobe, Apple, Facebook, Google, Microsoft, Mozilla, Opera, Twitter 등의 회사입니다. 즉, 일반적으로 서로 경쟁관계에 있는 회사들이 JavaScript에서 함께 작업하고 있습니다.

TC39는 두 달에 한 번씩 멤버가 임명한 대표자와 초청된 전문가가 참석하는 회의를 갖고 있습니다. 이러한 회의록은 GitHub 리포지토리에 공개됩니다.

회의 외에도 TC39는 JavaScript 커뮤니티의 다양한 구성원 및 그룹과도 협력합니다.

3.3 ECMAScript에 기능이 어떻게 추가됩니까? 그들은 TC39 프로세스의 단계를 거칩니다.

새로운 ECMAScript 기능은 TC39에 제안되어야 합니다. 그들은 다음과 같은 단계를 거칩니다.

• 0단계부터(TC39가 제안에 대해 논평할 수 있음)
• 4단계까지 (제안된 기능은 ECMAScript에 추가할 준비가 되었습니다)

기능이 4단계에 도달하면 ECMAScript에 추가가 예정되게 됩니다. ECMAScript 버전 기능 세트는 보통 매년 3월에 동결됩니다. 그 기한 이후 4단계에 도달하는 기능은 내년 ECMAScript 버전에 추가됩니다.

자세한 내용은 "참을성 없는 프로그래머들"을 위한 "TC39 프로세스" 섹션을 참조하십시오.

3.4 ECMAScript 버전은 얼마나 중요하나요?

TC39 프로세스가 도입된 이후로 ECMAScript 버전의 중요성은 많이 감소했습니다. 이제 정말 중요한 것은 제안된 기능이 어느 단계에 있느냐입니다. 일단 4단계에 도달하면 안전하게 사용할 수 있습니다. 하지만, 해당 기능이 당신이 원하는 엔진에서 지원하는지 확인해야 합니다.

3.5 [내가 가장 좋아하는 기능에 대한 제안서]의 현황은 어떠한가요?

다양한 제안 기능이 어떤 단계에 있는지 궁금하다면 TC39 제안 리포지토리를 참조하세요.

3.6 특정 ECMAScript 버전에서 추가된 기능은 어디서 찾을 수 있습니까?

ECMAScript 각 버전의 새로운 기능을 살펴볼 수 있는 곳이 몇 군데 있습니다.

• "참을성 없는 프로그래머를 위한 JavaScript"에는 각 ECMAScript 버전의 새로운 기능을 나열하는 섹션이 있습니다. 설명과도 연결됩니다.
• TC39 리포지토리에는 어떤 ECMAScript 버전이 도입되었는지(또는 도입될) 설명하는 완성된 제안표가 있습니다.
• ECMAScript 언어 사양의 "소개" 섹션에는 각 ECMAScript 버전의 새로운 기능이 나열되어 있습니다.
• ECMA-262 저장소에는 릴리스가 있는 페이지가 있습니다.

4. JavaScript에 대한 무료 책

JavaScript에 관한 내 책은 온라인에서 무료로 읽을 수 있습니다.

• “참을성 없는 프로그래머를 위한 JavaScript (ES2022 edition)”는 ECMAScript 2022를 포함하여 JavaScript를 다룹니다.
• “Deep JavaScript: 이론과 기술”에서는 언어 기초를 더 깊이 다룹니다.