<ES2022> ES2022 Features

 

1. 소개

 - 올해는 작년보다 많은 기능이 추가되었다. 특히 객체지향을 위한 클래스의 기능들이 눈에 띈다. TS나 바벨을 기존에 사용했던 개발자들이라면 이미 쓰고 있었던 기능이라 새삼스러울 수도 있지만 정식 스펙으로 채택된 건 ES2022이다.

 

https://github.com/tc39/proposals

 - ES2022외의 다른 버전의 스펙이 궁금하다면 필자의 다른 글도 참고해보길 바라며, ES2022의 기능들에 대해 알아보자.

 

2. 기능

* Class Fields

 - 클래스 필드에 많은 기능이 추가 되었다. tc39에 표기되어있는 바로는 Private instance methods and accessors, Class Public Instance Fields & Private Instance Fields, Static class fields & Private Static Methods 가 있다. 

 

 - 사실 이미 많은 JS개발자들이 편리해서 쓰고 있었던 기능이긴 하지만 그래도 간단하게 알아보자면 다음의 코드가 바로 요약본이다.

 

class CloneHarry {
  name = 'Harry';
  #birth = 990909;
  static gender = 'man';
  
  static #hello(friend) {
    console.log(`hello ${friend} I am Harry!`);
  }
  
  static helloJarry() {
    CloneHarry.#hello('Jarry');
  }
};

const harry1 = new CloneHarry();
harry1.#birth; // SyntaxError
harry1.name; // 'Harry'
CloneHarry.gender; // 'man'
CloneHarry.helloJarry();
// hello Jarry I am Harry!

 

 - 첫 줄 부터 살펴보자면, 속성들을 constructor가 아닌 외부에서 선언이 가능하도록 개선되었다. 물론 매개변수를 받아서 사용하려면 constructor함수를 사용해야 한다.

 

 - 다음으로는 드디어 private 속성이 정식 스펙이 되었다. 지금까지 관습에 따라 _를 사용했다면 더 이상 그럴필요가 없다. priavte속성은 클래스 내부에서만 사용할 수 있는 안전 장치와 같다.

 

 - static 속성이 도입되었다. 이는 인스턴스가 아닌 클래스 자체의 속성 또는 메서드를 지원하도록 하는 것이다.

 

 - 위의 것들을 조합하여 static private 속성과 메서드도 만들 수 있다.

 

* at

 - 필자는 기존에 파이썬을 사용했던 적이 있다. JS를 하면서 파이썬이 가장 부러웠던 것 중하나가 마이너스 인덱스를 지원하는 것이다. JS는 배열의 가장 마지막 요소를 선택하기위해 다음과 같이 작성한다.

 

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]; // 5

// if python
arr[-1]

 

 - 굳이 길이를 작성하고 거기에 -1까지 해줘야한다. 하지만 파이썬의 경우 마이너스인덱스로 뒤에서부터 인덱싱을 할 수 있도록 추상화하였다. 

 

 - JS는 기존 스펙때문에 완전히 동일하게 도입되지는 않았지만 at이라는 메서드를 통해 우회적으로 이를 가능케하였다. 

 

const arr = [1, 2, 3, 4, 5];
arr.at(-1); // 5

 

* Top-level await

 - 프로젝트를 만들다 보면 비동기로직이 상당히 많다. 흔히 async await를 사용하여 이를 처리하는데, 종종 async 없이 모듈 최상단에서 await를 쓰고 싶을 때가 있다.

 

 - 지금까지는 굳이 async를 감쌌어야 했다. ES2022부터는 Top-level await라는 이름에서도 감이 왔겠지만, 최상단에서 async없이 await를 사용할 수 있다.

 

* Error Cause

 - 개발을 하면서 마주치는 문제 중 하나가 에러 핸들링이다. 다음 작업은 어떤 raw한 리소스를 받고, 이를 이용하여 어떤 작업을 한후 업로드 하는 함수이다.

 

async function doJob() {
  const rawResource = await fetch('/domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed');
    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('/domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed');
    });
}

 

 - 위의 함수를 try catch문을 이용하여 실행한다고 가정하자. 만약 다운로드 중 에러가 발생한다면 에러 객체를 다음과 같이 표시할 것이다.

 

Error: Download raw resource failed

 

 - 업로드 중 문제가 발생하면 업로드 실패가 출력될 것이다. 이것만 보면 큰 문제가 없다고 생각할 수 있다. 하지만 서버측에서 보낸 에러는 어떻게 할 것인가? 그 메세지가 에러원인일텐데 원인은 현재 어디에도 표시되어 있지 않다. 그래서 추가된 것이 cause 이다.

 

async function doJob() {
  const rawResource = await fetch('/domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed', { cause: err });
    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('/domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed', { cause: err });
    });
}

try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Error: Upload job result failed
// Caused by TypeError: Failed to fetch

 

 - 위와 같이 에러 객체의 옵션으로 cause를 담을 수 있게 되었다.

 

 - 위의 기능 외에도 정규표현식과 관련된 RegExp Match Indices 이나 객체와 관련된 Accessible hasOwnProperty 기능도 있으니 관심있다면 참고해보길 바란다.

 

 

---

참고

 

GitHub - tc39/proposals: Tracking ECMAScript Proposals

https://www.zerocho.com/category/ECMAScript/post/60b493850ffe7b0004bf001b

What's new in ES2022? 🤔