2022년 자바스크립트 4가지 추가 기능

지난 6월에 발표된 Javascript 최신 기능이 나왔다.

1. Top level await
2. Error cause
3. ... .at()
4. Class fields

Javascript 최신 기능 4가지를 조사한 결과 모두 되게 효율있고 좋아보이기에 Velog 블로그를 통해 글을 써보려 한다.
물론 이 것 말고도 여러가지 기능이 있지만 이 4가지가 가장 특별해 보여 이렇게 글을 남긴다.

1. Top level await

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

예전에는 'await' 함수를 사용하기 위해서는 'async' 함수 내에서만 가능했지만, 최신 자바 스크립트 (ES2022)에서는 더는 'async' 함수를 쓰지 않아도 'await' 함수를 쓸 수 가 있다.
그래서 ES2022 문법으로 'await' 함수를 사용 한다면

await startServer();

이렇게 입력만 해도 실행이 가능하게 되었다.

2. Error cause

Error cause란 Javascript에서 오류가 발생했을 때 오류의 원인을 설명하여서 더 나은 오류 메세지를 설명 할 수가 있다.
이전에는 오류를 만들 때 오류 메세지를 작성하는 것 말고는 할 수가 없었지만 최신 문법 (ES2022) 에서는 cause라는 함수를 통해 구체적인 오류 메세지를 보여 줄 수가 있다.

New Error('Can`t save comment', { cause: 'Not Allowed.' });

에러 메세지 뒤에 {} 안에 Key값 cause와 Value값에 원하는 에러 메세지를 입력하면 된다.
이렇게 되면 동일한 오류 메세지에 원인은 다르게 보여줄 수도 있다.

New Error('Can`t save comment', { cause: 'Not Allowed.' });
New Error('Can`t save comment', { cause: 'Post not found.' });
New Error('Can`t save comment', { cause: 'Database is full.' });

cause 앞에 .을 붙히면 출력할 수도 있다.

const err = New Error('Can`t save comment', { cause: 'Not Allowed.' });

err.message; // Can`t save comment
err.cause; // Not Allowed.

3. .at()

.at() 함수는 모든 배열에서 인덱스로 사용할 수 있는 함수이다.

const language = ['HTML5', 'CSS3', 'Javascript', 'Vue.js'];
language.at(3); // Javascript

[]로 찾을 수도 있는데 왜 굳이 .at() 함수를 쓸까 ?
나도 초반엔 이해를 못했지만 알아보던 중 왜 .at() 함수를 쓰는 지 알 수 있었다.
바로 뒤로도 탐색이 가능하다는 것. (Python에서는 가능하다고 들었다.)

const language = ['HTML5', 'CSS3', 'Javascript', 'Vue.js'];
language.at(-1); // Vue.js
language.at(-2); // Javascript
language.at(-3); // CSS3
language.at(-4); // HTML5

배열 뒤에 있는 값을 가져 오기 위해서는 arr[arr.length - n] 을 이용해서 사용 했을텐데
이제 .at() 함수 하나로 간편하게 탐색이 가능하다는 것.

4. Class fields

이전에는 불가능 했던 Private 메서드와 속성을 가질 수가 있다.
또한 static 메서드도 사용할 수가 있다.
그리고 또 constructor를 사용할 필요도 없어졌다.
이젠 Private 메소드나 속성을 만들려면 이름 앞에 # 하나만 붙이면 된다.

class Message {
	#text = 'hi';
}

위 코드에서는 Private text 속성을 가진 메세지를 가지고 있고 constructor를 사용하고 있지 않다.
이전에는 Private를 사용할 수 없었고, 속성을 초기화하기 위해서는 꼭 constructor를 사용해야만 했지만 최신 문법 (ES2022)에서는 # 하나로 모든 게 해결이 된다.

그리고 static 메서드를 사용하기 위해서는 따로 분리를 해야했지만 이젠 한번에 할 수가 있다.

// 이전 Javascript
class Message {
	// body
}
Message.build() {
	// body
}

// 최신 Javascript
class Message {
	static build () {
    	// body
    }
}

발전하는 Javascript를 보면서 더욱 보기 좋은 클린 코드를 작성할 수 있을 거 같아서 기분이 좋다 😊😉😆