[Javascript] ES2022 기능 요약

References

https://tc39.es/ecma262/

https://javascript.plainenglish.io/4-best-new-es2022-features-6e73db339b21

https://yozm.wishket.com/magazine/detail/1570/

https://www.youtube.com/watch?v=m-R7s7fnwvU

 

서론

최근, Javascript ES2022 버전이 업데이트 되었다.

Javascript의 경우, 웹 개발 시장에서 압도적인 점유율을 차지하는 언어지만 어딘가 나사 빠진 기능들이 있어 매 번 아쉬움을 주었다.

그러나 매 년 새 기능을 가진 버전들이 릴리즈 되면서 언어의 완성도가 점점 높아지고 있는데 이번에는 어떤 기능들이 추가되었는지 간략하게 알아보자.

 

대표적인 기능들

Top level await

기존 비동기 통신인 Promise 문법에 있어서 async와 await는 한 세트로 작성해야 하는 키워드였다.

// await가 async 스코프 내에서만 작성을 할 수 있었다면... 
async () => {
	await (...)
}

그러나 이번 버전을 기점으로 await 단독 사용이 가능해져, 더 간결한 코드 구현을 할 수 있다.

// 이제는 그런거에 상관없이 await 단독으로 사용가능!
await (...)

.at()을 통한 배열 인덱스 접근

기존 배열(array) 인덱스를 접근할 때에는 다음과 같은 방법으로 구현했었다.

const arr = [1, 2, 3]

console.log(arr[1]) // 2로 출력

그리고 이번에 추가된 .at()으로 좀 더 강력한 기능의 배열 인덱스 접근이 가능해진다.

const arr = [1, 2, 3]

console.log(arr.at(1)) // 2로 출력
console.log(arr.at(-1)) // 3으로 출력. 이제 Python 처럼 리버스 인덱싱이 가능해진다!

Error Cause

기존 Javascript에서는 Error 발생 시 이에 대한 원인을 따로 표기하는 것이 불편했었다.

new Error("에러 내용...")

이제는 cause 키워드를 통해 좀 더 상세한 오류 발생 원인들을 확인할 수 있다.

// 동일한 오류 메시지를 사용해도 다른 원인들을 작성할 수 있다
new Error("에러 내용...", { cause: "에러 상세 내용 1" })
new Error("에러 내용...", { cause: "에러 상세 내용 2" })
new Error("에러 내용...", { cause: "에러 상세 내용 3" })

또한 Error 객체에 .cause 키워드를 통한 액세스가 가능해진다.

try {
	...
} catch (error) {
	// cause 키워드를 통한 액세스 처리
	console.log(error.cause)
}

Class Field

이번 업데이트로 Javascript의 OOP 기능들이 개선되었다.

첫 번째로, 접근제한자(#)를 통한 메소드 및 속성 구현이 가능해진다.

class Sample {
	// '#' 글자를 통해 private 접근제한자를 구현할 수 있다
	#text = "Hi"

	#destruct() {
		console.log("SAMPLE :)")
	}
}

const call = new Sample()
call.#text // 접근제한자로 인해 호출할 수 없다!
call.#destruct()

두 번째, static 메소드의 추가로 더 간결한 class 사용이 가능해진다.

// 기존에는 constructor를 통한 class 사용이 강제되었지만
class Sample {

}
Sample.build() {

}

// 이제는 static으로 더 간결한 코드 구현이 가능하다
class Sample {
	static build() {

	}
}

class Sample {
	// 접근제한자를 통한 비공개 처리도 할 수 있다
	static #build() {

	}
}

Regex Flag

이번 업데이트로 정규 표현식 플래그인 d 옵션이 추가가 되었는데 매칭된 문자열의 인덱스 정보를 볼 수 있다.

// d 옵션 없이 정규식 로직 출력
let matchSample = /(a+)(b+)/.exec('aaaabb')

console.log(matchSample)

(3) ['aaaabb', 'aaaa', 'bb', index: 0, input: 'aaaabb', groups: undefined]
	0: "aaaabb"
	1: "aaaa"
	2: "bb"
	groups: undefined
	index: 0
	input: "aaaabb"
	length: 3
	[[Prototype]]: Array(0)

// d 옵션을 추가한 정규식 로직 출력
let matchSample = /(a+)(b+)/d.exec('aaaabb')

console.log(matchSample)

(3) ['aaaabb', 'aaaa', 'bb', index: 0, input: 'aaaabb', groups: undefined, indices: Array(3)]
	0: "aaaabb"
	1: "aaaa"
	2: "bb"
	groups: undefined
	index: 0
	// 각 인덱스 마다 매칭되는 문자열의 정보 열람이 가능하다 
	indices: Array(3)
		0: (2) [0, 6]
		1: (2) [0, 4]
		2: (2) [4, 6]
		groups: undefined
		length: 3
		[[Prototype]]: Array(0)
	input: "aaaabb"
	length: 3
	[[Prototype]]: Array(0)

 

이외에 여러 기능들이 추가 되었으므로, 아래의 사이트를 통해 더 알아볼 수 있다.

https://tc39.es/ecma262/#sec-intro