EcmaScript 2022(ES 2022) js 신기능 4가지

• 가장 최신 출시된 JS표준에 의거한 것!!

 

Top Level await 

• 이전 에는 await을 사용하려면 async 함수 내에서 진행

 

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

• ES2022에 와서는 이러한 규칙이 사라졌음
• async 함수 없이 await 모듈을 사용할 수 있음

await startServer();

• 이렇게 한줄로 변경시켜 버릴 수 있음

 

 

Error cause

• 오류의 원인을 설명하며 더 나은 오류 메시지를 띄울 수 있음
• 이전에는 이렇게 에러의 메시지를 작성해주어야했는데

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

• ES2022에 와서는

new Error("Cant save comment", { cause: "Not allowed."});

• 이렇게 설명할 수 있음 cause를 사용해서 원인을 알아낼 수 있다

 

new Error("Cant save comment", { cause: "Not allowed."});
new Error("Cant save comment", { cause: "Post not found."});
new Error("Cant save comment", { cause: "Database is full."});

• 해당 방식으로 다른 원인을 쉽게 뽑아 낼 수 있게 변경되었음

const err = new Error("Cant save comment", { cause: "Not allowed."});


err.message; // Cant save comment
err.cause; // Not allowed.

• message와 cause에 접근할 수도 있음

 

 

at 함수

const food = ["피자", "햄버거", "감자튀김", "고기"];

food.at(2); // "감자튀김"

• 배열의 모든 인덱스에 액세스를 할 수 있음
• 물론 이전에도 대괄호를 사용하면 액세스 할 수 있다.

const food = ["피자", "햄버거", "감자튀김", "고기"];

food[2]; // "감자튀김"

• 하지만 at 함수의 차이점은 역순으로(뒤로) 찾을 수 있게 되었다.

const food = ["피자", "햄버거", "감자튀김", "고기"];

food.at(-1); // "고기"

 

 

 

Class Fields

• 객체지향을 위한 JS의 시작이라고 볼 수 있는 변화!
• 이전에는 불가능 했던 Private 메서드 및 속성을 가질 수 있다
• static 메서드 또한 가질 수 있다!
• 고로 속성을 초기화 하기 위해 'constructor'를 사용할 필요가 없어진다.
• Private 메서드나 속성을 사용하려면 이름 앞에 # 기호를 사용하면 된다.

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

/////////////////////

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

• 해당 방식으로 호출 할 경우 호출이 안된다.

class Message {
	// body
}

Message.build() {
	// body
}

• 초기화를 진행하기 위해 해당 방식으로 사용해주어야 했는데
• 이제는 아래 방식으로 사용할 수 있다!

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


// private로 만들어버릴 수도 있다.
class Message {
	static #build() {
    	// body
    }
}

 

 

물론 ES2022에 신기능 혹은 변경된 것들이 많지만 노마드코더에서 이야기한 도움이 될 만한 4가지 기능을 포스팅 해보았다!

기술은 정말 빠르게 변화하는 것 같고 기존 기능들을 숙달 했을때에는 변화가 재미있는것 같다.