[JavaScript] ES2022

ES2022

ECMAScript 2022 자바스크립트 업데이트 기능 소개

ㅁ TOP LEVEL AWAIT

• 모듈의 비동기 함수 외부에서 기다림
• 기존 비동기 함수 외부에서 await 키워드를 선언할 수 없었지만, 비동기 함수 및 클래스 외부에서 await 연산자를 선언해 동기화 문제 해결

//as-is
(async function () {
  await startServer();
})();

//to-be
await startServer();

ㅁ ERROR CUASE

• 오류의 원인을 설명해 개선된 오류 메시지 제작

//as-is
new Error("Error!!");

//to-be
const err = new Error("A better Error!!", {cause: "Error Cause"});

err.message; //A better Error!!
err.cause; //Error Cuase

ㅁ .at()

• 양수 및 음수 인덱스를 모두 사용한 문자열 인덱싱
• -1을 이용한 뒤로 검색으로 []와의 차이

const nums = ["1","2","3","4","5"]

nums.at(2); //3
nums.at(-1); //5

ㅁ CLASS FIELDS

• JS의 OOP화(?)
• Private#, static 메서드 및 속성
• constructor 불필요

//private 메서드나 속성을 위해 #기호를 접두사로 선언
class Message {
  #destruct() {
    console.log("Hi");
  }
}

const btn = new Messege();
btn.#destruct(); //작동X

//as-is
class Message {
  constructor() {
    this.text = "Hi";
  }
}

//to-be
class Message {
  #text = "Hi";
}

//static 메서드
//as-is
class Message {
}
Message.build(){}

//to-be
class Message{
  static build(){}
}

class Message{
  static #build(){} //비공개
}