[JS] ES2022 신기능 중 4가지

이채현

💡 Javascript ES2022 신기능 4가지

노션에서 보기

Top level await

기존 await를 사용하려면 async 함수 내에서만 가능했다.

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

하지만, ES2022부터 이러한 규칙이 사라지고, await를 async함수없이 모듈에서 아래와 같이 작성가능해졌다.

await foo();

Error Cause

이 기능을 통해 오류의 원인을 설명하여, 더 나은 오류 메시지를 만들 수 있다.

기존 오류를 만들 때는 오류 메시지를 작성하는 것 밖에 할 수 없었다.

new Error("This is the Error Message!");

하지만 ES2022부터 무엇이 오류를 발생시켰는지에 대해 설명할 수 있다. 그래서 정확히 무엇이 잘못되었는지 구체적으로 알 수 있으며, 동일한 오류메시지를 사용하지만 다른 원인을 작성할 수 있다.

또한, .cause를 액세스할 수 있다.

const err = new Error("This is the Error Message!", { cause: "Test Message" });

err.message; // This is the Error Message!
err.cause; // Test Message

.at()

.at을 활용하면, 배열의 모든 인덱스에 액세스할 수 있다.

const number = ["1", "2", "3", "4", "5"];

number.at(2); // 2

이전에도 대괄호를 사용하여 액세스할 수 있었지만, 대괄호와의 차이점은 뒤로 검색가능하다는 점이다. 대괄호는 -1 로 검색할 수 없었지만, .at을 통하면 가능하다.

const number = ["1", "2", "3", "4", "5"];

number.at(2); // 2
nubmer.at(-1); // 5
~~number[-1]; //  불가능~~

Class Fields

이것을 통해, 자바스크립트가 조금 더 OOP스럽게 느껴지게 한다. 이전에는 불가능했던 Private 메서드 및 속성을 가질 수 있으며, static 메서드를 사용할 수 있다.

그리고 속성을 초기화하기 위해 constructor를 사용할 필요도 없어진다.

Private 메서드 및 속성

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

class Message {
	#destruct() {
		console.log("booom!!");
	}
}

const but = new Message();
~~btn.#destruct(); // 작동하지 않는다~~

class Message {
	#text = "Hi";
}

위 코드처럼 private한 메서드 및 텍스트를 만들 수 있으며, constructor를 사용하지 않는다.

class Message {
	constructor() {
		this.text = "Hi";
	}
}

Static 메서드

class Message {
	// body
}

Message.build(){
	// body
}

====

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

---

출처

방금 출시된 ⚡️자바스크립트 미친 신기능 4개!