ES2022 Javascript 신기능 4가지

📖 await

기존에 await 는 async 함수 내에서 사용해야 했다.
✍

(async function() {
  await sendServer() ;
})();

ES2022에서 그러한 규칙이 사라지고 async 함수 없이 await 를 모듈에서 사용할 수 있다고 발표하였다.
✍

await sendServer();

---

📖 Error cause

기존에는 오류를 만들 때 오류 메시지를 작성하는 것만 할 수 있었지만 오류의 원인을 설명하여 더 나은 오류 메시지를 만들 수 있다.
✍

new Error("Can't save Text");

바뀐 기능에서는 무엇이 오류를 발생시켜서 잘못된 것인지 구체적으로 알 수 있게 되었는데
동일한 오류 메시지를 사용해도 다른 원인으로 메시지를 작성할 수가 있다.
✍

new Error("Can't save Text", {cause: "Not allowed"});
new Error("Can't save Text", {cause: "Post not found"});
new Error("Can't save Text", {cause: "Database is full"});

const err = new Error("Can't save Text", {cause: "Not allowed"});
err.message;	// Can't save Text
err.cause;		// Not allowed

.message를 할 수 있듯이 .cause로 액세스 할 수 있다.

---

📖 .at()

.at()을 활용하면 배열의 모든 인덱스를 액세스 할 수 있다.
✍

const number = ["3", "4", "5", "6"];
number.at(1);	// 4

기존에도 대괄호를 사용하면 가능은 했다. number[1];
대괄호를 사용하는 것과의 차이점은 뒤로도 검색할 수 있다는 것이다.
✍

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

-1과 같이 사용할 수 있으며 배열의 끝부터 시작까지 뒤쪽으로 검색되기 때문에 마지막 항목이 표시 된다.

---

📖 Class Fields

이전에는 불가능했던 Private 매서드 및 속성을 가질 수 있고 static 메서드를 사용할 수 있다.
속성을 초기화하기 위해 constructor를 사용할 필요도 없어졌다.

🧐 Private

이전에는 Private 속성을 만들 수 없었고 속성을 초기화 하기 위해 constructor 를 사용해야 했다.
✍

class Text {
  constructor() {
    this.str = "Hello";
  }
}

Private 매서드나 속성을 만들려면 이름 앞에 # 기호를 사용하면 된다.
✍

class Text {
  #destruct() {
  	console.log("brrrrrrrrr!");
  }
}

const btn = new Text();
btn.#destruct();

위 Private 매서드에서는 호출하면 작동이 되지 않는데
✍

class Text {
  #str = "Hello";
}

위 코드는 Private str 속성을 가진 Text class 를 만들고 있으며 constructor 또한 사용하지 않고 훨씬 더 간결하게 작성이 되었다.

🧐 Static

✍ before

class Text {
  // body  
}
Text.build() {
  // body  
}

✍ after

class Text {
  static build() {
    // body
  }  
}

before -> after 로 간결하게 바뀌었고 #을 사용하여 비공개로도 할수 있다.
✍

class Text {
  static #build() {
    // body
  }  
}

출처 : Nomad Coders Youtube