JavaScript 2022
JavaScript 2022 (ES13): ECMAScript 2022의 주요 기능
- *ECMAScript 2022 (ES13)**은 2022년에 발표된 JavaScript 표준으로, 성능 최적화와 가독성
향상을 목표로 다양한 기능들이 추가되었습니다. 특히
at()메서드,top-level await, 정적 블록, 그리고 정규 표현식 관련 기능들이 도입되어 JavaScript 개발을 한층 더 편리하게 만들어 주었습니다.
이 가이드는 **ES13(ECMAScript 2022)**에서 추가된 주요 기능과 사용 예시를 설명합니다.
1. Array.prototype.at() 메서드
at() 메서드는 배열이나 문자열에서 인덱스를 기반으로 값에 접근할 수 있는 새로운 메서드입니다. 이 메서드의 가장 큰 특징은
음수 인덱스를 지원한다는 점입니다. 이를 통해 배열의 끝에서부터 요소를 쉽게 가져올 수 있습니다.
1.1. at() 사용 예시
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.at(0)); // 10 (첫 번째 요소)
console.log(numbers.at(-1)); // 50 (마지막 요소)
주요 특징
- 양수 인덱스와 음수 인덱스 모두 지원.
- 배열뿐만 아니라 문자열에도 사용 가능.
const str = 'JavaScript';
console.log(str.at(-1)); // 't' (마지막 문자)
2. top-level await
- *
top-level await*는 모듈의 최상위 레벨에서 **await*를 사용할 수 있도록 하는 기능입니다. 이전에는 비동기 함수 안에서만await를 사용할 수 있었지만, 이제는 모듈의 최상위 스코프에서도await를 사용할 수 있습니다. 이를 통해 비동기 모듈의 로딩을 간결하게 처리할 수 있습니다.
2.1. top-level await 사용 예시
// module.js
export const data = await fetch('<https://api.example.com/data>').then(res => res.json());
console.log(data);
주요 특징
- 모듈의 최상위에서
await사용 가능. - 비동기 처리를 더 간편하고 직관적으로 할 수 있음.
3. 정적 블록 (Static Blocks in Classes)
정적 블록은 클래스 내부에서 정적 필드나 정적 메서드를 초기화할 때 유용한 기능입니다. 이를 통해 클래스 내부에서 정적 코드 블록을 정의하고, 클래스의 정적 변수나 설정 로직을 처리할 수 있습니다.
3.1. 정적 블록 사용 예시
class MyClass {
static count;
static {
this.count = 0;
console.log('클래스가 초기화되었습니다.');
}
static increment() {
this.count++;
}
}
console.log(MyClass.count); // 0
MyClass.increment();
console.log(MyClass.count); // 1
주요 특징
- 정적 변수나 메서드의 초기화를 위한 정적 블록 제공.
- 복잡한 초기화 로직을 클래스 내에서 처리할 수 있음.
4. 정규 표현식 개선
ES13에서는 정규 표현식 관련 기능이 더욱 개선되었습니다. 특히 d 플래그와
매칭 가능한 텍스트의 범위를 지정하는 기능이 추가되어 정규 표현식의 유연성이 향상되었습니다.
4.1. d 플래그 사용
d 플래그는 정규 표현식의 일치 부분을 세분화하여 하위 일치
정보를 확인할 수 있게 해줍니다.
const regex = /(\\\\d+)-(\\\\d+)-(\\\\d+)/d;
const result = regex.exec('123-456-789');
console.log(result.indices);
// [[0, 11], [0, 3], [4, 7], [8, 11]] // 매칭된 각 그룹의 시작과 끝 인덱스 출력
주요 특징
- 정규 표현식의 일치 범위에 대한 세부 정보 제공.
- 각 하위 그룹의 일치 인덱스를 확인할 수 있음.
5. Object.hasOwn()
Object.hasOwn() 메서드는 객체가 특정 속성을 직접적으로 가지고 있는지 여부를 확인하는 메서드입니다. 기존의
hasOwnProperty() 메서드와 유사하지만, **Object**에서 바로 사용할 수 있는 정적
메서드로 제공됩니다.
5.1. Object.hasOwn() 사용 예시
const person = { name: 'Alice', age: 25 };
console.log(Object.hasOwn(person, 'name')); // true
console.log(Object.hasOwn(person, 'job')); // false
주요 특징
- 객체의 직접적인 속성만을 확인.
- *
hasOwnProperty()*보다 더 직관적이고 안전한 방식으로 속성 확인.
6. Error.cause
Error.cause 속성은 **에러의 원인(cause)**을 추가적으로 전달할 수 있는 기능입니다. 이를 통해 에러의 연쇄를
보다 명확하게 파악할 수 있으며, 디버깅을 더 쉽게 할 수 있습니다.
6.1. Error.cause 사용 예시
try {
throw new Error('Network error', { cause: 'Timeout' });
} catch (error) {
console.log(error.message); // 'Network error'
console.log(error.cause); // 'Timeout'
}
주요 특징
- 에러의 원인을 추가적으로 전달하여 디버깅에 도움을 줌.
- 에러 연쇄를 통해 문제를 더 명확하게 추적할 수 있음.
요약
- *ES13(ECMAScript 2022)**은 JavaScript 개발을 더욱 효율적이고 간편하게 만드는 여러 기능을 추가했습니다.
Array.prototype.at(): 배열이나 문자열에서 양수/음수 인덱스를 사용해 요소에 접근.top-level await: 모듈의 최상위 레벨에서 비동기 처리를 쉽게 작성.- 정적 블록 (Static Blocks in Classes): 클래스의 정적 필드 및 정적 메서드를 초기화할 수 있는 새로운 구문.
- 정규 표현식 개선:
d플래그를 통해 정규 표현식 매칭의 세부 정보를 확인. Object.hasOwn(): 객체의 직접 속성을 확인하는 메서드.Error.cause: 에러의 원인을 전달할 수 있는 기능으로 디버깅을 쉽게 함.
ES13은 JavaScript 개발자들이 더 직관적이고 안전한 코드를 작성할 수 있도록 도와주며, 비동기 처리, 에러 관리, 객체 처리에서 성능과 가독성을 향상시켰습니다.