# ES2022

**ES2022ECMAScript 222)는2022년6월에 공 발표된 ECMAScript 최신 표준 버전으로, 자바스크립트 언어의 발전을 반영하는 중요한 업데이트입니다. 이 표준은 TC39 위원회에 의해 제정되며, 매년 새로운 기능과 개선 사항을 포함하여 자바스크립트의 표현력과 개발자 경험을 향상시키는 데 기여합니다. ES2022는 기존의 ES6(ES2015) 이후의 진화 흐름을 이어받아, 특히 클래스, 비동기 처리, 문자열 처리 등 다양한 영역에서 유용한 신기능을 도입했습니다.

본 문서에서는 ES2022에서 추가된 주요 기능들과 그 사용법, 실제 코드 예제, 그리고 개발 현장에서의 활용도를 중심으로 설명합니다.

---

## 주요 신기능

ES2022는 다음과 같은 주요 기능들을 포함하고 있습니다. 각 기능은 개발자가 더 직관적이고 안전하게 코드를 작성할 수 있도록 설계되었습니다.

### 1. Top-Level `await`

#### 개요
이전까지 `await` 키워드는 반드시 `async` 함수 내부에서만 사용할 수 있었습니다. ES2022에서는 **모듈 최상위 수준**(Top-Level)에서 `await`를 사용할 수 있게 되어, 모듈 로딩 시 비동기 초기화 작업을 보다 간편하게 처리할 수 있습니다.

#### 사용 예시
```javascript
// 예: 외부 데이터를 로드하여 모듈에서 바로 사용
const response = await fetch('https://api.example.com/data');
const data = await response.json();

export { data };
```

#### 장점
- 모듈 초기화 시 비동기 리소스 로딩이 간결해짐
- 번들러(예: Webpack, Vite)와 잘 호환되며, 런타임에서 지원됨

> ⚠️ 주의: 이 기능은 **ES 모듈 환경**에서만 사용 가능하며, 일반 스크립트 파일이나 `CommonJS`에서는 지원되지 않습니다.

---

### 2. 클래스의 `public static fields`

#### 개요
ES2022는 클래스 내에서 정적 필드를 선언할 수 있는 문법을 공식적으로 표준화했습니다. 이는 클래스에 정적 속성을 더 명확하고 직관적으로 정의할 수 있게 해줍니다.

#### 사용 예시
```javascript
class MyClass {
  static version = '1.0.0';
  static defaultOptions = { debug: false };

  constructor(name) {
    this.name = name;
  }
}

console.log(MyClass.version); // '1.0.0'
```

#### 이전 방식과 비교
```javascript
// ES2022 이전
MyClass.version = '1.0.0';
```

#### 장점
- 클래스 정의 내에서 정적 속성의 위치를 명확히 함
- 초기화 순서를 예측 가능하게 함

---

### 3. 클래스의 `private static fields`, `private instance fields`, `private methods`

#### 개요
ES2020에서 도입된 **private 필드**(`#`)가 ES2022에서 정적(private static) 및 메서드(private methods)까지 확장되었습니다.

#### 사용 예시
```javascript
class Counter {
  #count = 0; // private instance field
  static #instances = 0; // private static field

  constructor() {
    Counter.#instances++;
  }

  #increment() { // private method
    this.#count++;
  }

  getCount() {
    return this.#count;
  }

  static getInstanceCount() {
    return Counter.#instances;
  }
}

const c1 = new Counter();
const c2 = new Counter();
console.log(Counter.getInstanceCount()); // 2
```

#### 장점
- 캡슐화 강화: 내부 구현을 숨기고 API를 명확히 분리
- 실수로 외부에서 접근하는 것을 방지

---

### 4. `at()` 메서드 (Index 접근 보완)

#### 개요
`String`, ``, `TypedArray` `at()` 메서드가 추가되어, **음수 인덱스**를 사용한 요소 접근이 가능해졌습니다. 이는 파이썬이나 루비 같은 언어의 습관을 가진 개발자에게 친숙한 기능입니다.

#### 사용 예시
```javascript
const arr = [10, 20, 30, 40, 50];

arr.at(0);  // 10 (첫 번째 요소)
arr.at(-1); // 50 (마지막 요소)
arr.at(-2); // 40 (마지막에서 두 번째)

"hello".at(-1); // 'o'
```

#### 기존 방식과 비교
```javascript
arr[arr.length - 1] // 마지막 요소 → at(-1)로 대체 가능
```

#### 장점
- 음수 인덱스 접근이 직관적
- 반복되는 `.length` 계산 불필요

---

### 5. `error.cause` 옵션

#### 개요
`throw` 문에서 새로운 오류를 생성할 때, **이전 오류를 원인**(cause)으로 지정할 수 있습니다. 이는 오류 전파 시 디버깅을 용이하게 합니다.

#### 사용 예시
```javascript
try {
  connectToDatabase();
} catch (err) {
  throw new Error('DB 연결 실패', { cause: err });
}

// 나중에
console.error(error.cause); // 원래 오류 객체 출력 가능
```

#### 장점
- 오류의 근본 원인을 추적하기 쉬움
- 로깅 및 에러 핸들링 프레임워크에서 유용

---

### 6. 정규표현식: `Match Indices` (`d` 플래그)

#### 개요
정규표현식에 `d` 플래그를 사용하면, 매칭된 각 결과에 대해 **인덱스 정보**(시작 및 끝 위치)를 포함하는 객체를 반환합니다.

#### 사용 예시
```javascript
const re = /JavaScript/dg;
const str = 'I love JavaScript and JavaScript is great!';
const match = re.exec(str);

console.log(match.indices[0]); // [7, 19] — 'JavaScript'의 위치
console.log(str.slice(...match.indices[0])); // 'JavaScript'
```

#### 활용 분야
- 텍스트 편집기, 문법 강조, 파서 구현 등에서 유용

---

## 지원 환경

대부분의 주요 브라우저와 Node.js 환경에서 ES2022 기능은 광범위하게 지원됩니다.

| 기능 | Chrome | Firefox | Safari | Node.js (버전) |
|------|--------|---------|--------|---------------|
| Top-Level Await | 89+ | 89+ | 15+ | 14.8.0+ (ESM) |
| Public Static Fields | 72+ | 71+ | 14.1+ | 12.0+ |
| Private Fields/Methods | 91+ | 90+ | 15+ | 16.0+ |
| `at()` | 92+ | 90+ | 15.4+ | 16.6.0+ |
| `error.cause` | 93+ | 92+ | 16.4+ | 16.9.0+ |
| `d` 플래그 | 97+ | 97+ | 15.4+ | 16.12.0+ |

> 💡 지원 여부는 [MDN Web Docs](https://developer.mozilla.org/) 또는 [Can I use](https://caniuse.com/)에서 확인 가능

---

## 참고 자료 및 관련 문서

- [ECMAScript 2022 공식 사양](https://tc39.es/ecma262/2022/)
- [MDN: ES2022 문서](https://developer.mozilla.org/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2022)
- [V8 엔진 블로그: ES2022 업데이트](https://v8.dev/features/es2022)
- [TC39 프로세스 및 제안 상태](https://github.com/tc39/proposals)

---

ES2022는 자바스크립트 개발자에게 실용적이고 중요한 기능들을 제공하며, 코드의 가독성과 유지보수성을 높이는 데 기여합니다. 최신 환경에서 개발 중이라면, 이러한 기능들을 적극 활용하는 것이 권장됩니다.