[JavaScript] ES2022 추가된 기능 살펴보기

Javascript ES2022에서 추가된 기능들이 몇가지 있습니다.

그중에서 가장 유용하고 많이 사용하게 될 거 같은 기능들에 대해서 알아보려고 합니다. 

 

 

 

Top-level await

//기능이 나오기 전에 await를 사용하는 예
(async function () {
	await start();
})();

//기능이 나온 후 await를 사용하는 예 (async 없이 바로 선언)
await start();

Top-level await 기능이 나오기 전에는 await를 사용하려면 async 함수 내에서만 사용해야만 했습니다.
모듈 최상단에서 사용하고 싶었지만 사용할 수 없었습니다.

하지만 이제 await은 최상단에서도 사용할 수 있습니다.

 

 

 

 

Error cause

Error cause를 활용하면 오류의 원인을 설명하여 더욱 명확한 오류 메시지를 만들 수 있습니다.

 

const err1 = new Error("Can't save description", { case: "Not allowed" });
const err2 = new Error("Can't save description", { case: "description is undefined" });
const err3 = new Error("Can't save description", { case: "Network error" });

err1.message; // Can't save description
err1.cause; // Not allowed

위와 같이 작성할 수 있습니다.

동일한 오류 메시지를 사용하고 있지만 어떠한 원인으로써 description이 저장되지 않았는지 원인을 알 수 있습니다.

그리고 .message와 .cause 를 통해 엑세스가 가능합니다.

 

 

 

 

.at()

이것을 활용하게되면 대괄호[]를 사용하지 않고 배열의 모든 인덱스에 엑세스할 수 있습니다.

const people = ["John", "Tom", "James", "Richard"];

people.at(2); // James
people[2]; // James

people.at(-1); // Richard

기존에 대괄호 형식과 그다지 다를게 없어보이지만 .at()을 사용하게 되면 뒤로 검색이 가능합니다.

 

-1을 넣어주게 되면 마지막 항목이 표시됩니다.

 

 

 

 

Class Fields

 

이름 앞에 # 기호를 사용하여 Private 메서드 및 속성을 가지게 할 수 있습니다.

속성을 초기화하기 위해서 constructor을 사용할 필요도 없습니다.

class Message {
	#text = "Hello!";
}

 

 

 

 static 을 사용하여 클래스 내부에 정적 필드를 정의할 수 있습니다.

 

class Introduce {
	static #name = "ujam"
    
	static #hi() {
    	return #name
    }
    
    static build() {
    	return {
            age: 2,
            name: #hi()
        }
    }
}



console.log(Introduce.build()) // {age: 2, name: "ujam"}

console.log(Introduce.name) // SyntaxError Private static field

console.log(Introduce.hi()) // SyntaxError Private static method

 

# 기호를 사용하여 private 하게 만들어 오로지 클래스 내부에서만 액세스할 수 있습니다. (외부에서의 액세스를 방지)