ES2022

작성자

익명

작성일

2025.09.01

조회수

버전

📋 문서 버전

이 문서는 2개의 버전이 있습니다. 현재 버전 1을 보고 있습니다.

ES2022

ECMAScript 2022(일명 ES2022)는 2022년 6월에 공식 발표된 ECMAScript어 사양의 최신 버전 중 하나로, JavaScript의 지속적인 진화를 반영한 중요한 업데이트입니다. 이 표준은 TC39 위원회에 의해 제정되며, 매년 새로운 기능과 개선 사항을 포함하여 JavaScript의 표현력과 개발자 경험을 향상시키는 데 기여합니다. ES2022는 기존의 ES2021(ES12) 이후의 주요 버전으로, 비동기 프로그래밍, 클래스 기능 확장, 문자열 처리 등 다양한 분야에서 유용한 기능들을 도입했습니다.

이 문서에서는 ES2022에서 도입된 주요 기능들을 상세히 설명하고, 각 기능의 사용법과 실용적인 예제를 제공합니다. 또한, 브라우저 및 환경별 지원 현황도 간략히 다룹니다.

주요 기능 개요

ES2022는 총 6가지의 주요 기능을 포함하며, 이들은 모두 개발자가 더 직관적이고 안전하게 코드를 작성할 수 있도록 설계되었습니다. 다음은 ES2022의 핵심 기능 목록입니다:

Top-level await (최상위 await)
Class Fields (정적 및 인스턴스 필드)
Private Class Methods and Accessors
at() 메서드
[error.cause](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%98%A4%EB%A5%98%20%EC%B2%98%EB%A6%AC/error.cause)
RegExp Match Indices

각 기능은 아래 섹션에서 자세히 설명됩니다.

1. Top-level `await`

개요

ES2022 이전까지 await 키워드는 반드시 async 함수 내부에서만 사용할 수 있었습니다. 그러나 ES2022에서는 모듈 최상위 수준(top-level)에서도 await를 사용할 수 있게 되었습니다.

사용 예시

// 기존 방식 (IIFE 사용)
(async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
})();

// ES2022 이후 (최상위 await)
const response = await fetch('/api/data');
const data = await response.json();
console.log(data);

활용 사례

모듈 초기화 시 외부 리소스(예: 설정 파일, API 응답)를 기다려야 할 때
서버 사이드 렌더링 또는 빌드 타임 데이터 로딩

⚠️ 주의: 최상위 await는 모듈 환경(ESM)에서만 사용 가능하며, 일반 스크립트에서는 지원되지 않습니다.

2. Class Fields

인스턴스 필드

ES2022는 클래스 내에서 공개 인스턴스 필드(public instance fields)를 명시적으로 선언할 수 있도록 했습니다.

class Counter {
  count = 0;  // 인스턴스 필드

  increment() {
    this.count++;
  }
}

이전에는 생성자 내에서 this.count = 0과 같이 초기화해야 했지만, 이제는 클래스 본문에서 직접 선언 가능합니다.

정적 필드

정적 필드도 마찬가지로 지원됩니다.

class MathUtils {
  static PI = 3.14159;
}

console.log(MathUtils.PI); // 3.14159

3. Private Class Methods and Accessors

개요

ES2020에서 도입된 private 필(예: #privateField)에 이어, ES2022는 private 메서드와 private 접근자(getters/setters)를 추가로 지원합니다.

사용 예시

class BankAccount {
  #balance = 0;

  // private 메서드
  #validateAmount(amount) {
    return amount > 0;
  }

  // private getter
  get #currentBalance() {
    return this.#balance;
  }

  deposit(amount) {
    if (this.#validateAmount(amount)) {
      this.#balance += amount;
    }
  }

  getBalance() {
    return this.#currentBalance;
  }
}

장점

캡슐화 강화
내부 로직을 외부로부터 숨겨 보다 안정적인 객체 지향 설계 가능

4. `at()` 메서드

개요

at() 메서드는 배열, 문자열, TypedArray 등에서 음수 인덱스를 사용하여 요소에 접근할 수 있게 해줍니다. 이는 Python 등의 언어에서 흔히 사용되는 기능입니다.

사용 예시

const arr = [10, 20, 30, 40, 50];

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

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

기존 방식과 비교

// 기존
arr[arr.length - 1]

// ES2022
arr.at(-1)

at()은 코드의 가독성을 높이고, 반복되는 length 계산을 줄여줍니다.

5. `error.cause`

개요

error.cause는 예외를 던질 때 원인(cause)을 명시적으로 지정할 수 있게 해주는 기능입니다. 이는 예외 체인을 보다 명확하게 만들고, 디버깅을 용이하게 합니다.

사용 예시

try {
  const response = await fetch('/api/user');
  if (!response.ok) {
    throw new Error('Failed to fetch user', {
      cause: new Error(`HTTP ${response.status}`)
    });
  }
} catch (err) {
  console.error(err.message);     // "Failed to fetch user"
  console.error(err.cause.message); // "HTTP 404"
}

장점

예외의 근본 원인을 추적하기 쉬움
라이브러리나 유틸리티 함수에서 오류 전파 시 유용

6. `RegExp` Match Indices

개요

/d/gu와 같은 정규표현식에 hasIndices 플래그(/d/gu)를 사용하면, 매칭된 결과의 인덱스 위치 정보를 얻을 수 있습니다.

사용 예시

const re = /a+(?<digit>\d)/u;
const str = "aaba1aaa2";

const match = re.exec(str);

console.log(match.indices); 
// [[1, 4], [3, 4]] → 'aab' 중 'aa'와 '1'의 위치
console.log(match.indices.groups.digit); // [3, 4]

활용 분야

텍스트 편집기, 코드 하이라이터 등에서 정확한 위치 추적
파서 개발 시 유용

브라우저 및 환경 지원 현황

기능	Chrome	Firefox	Safari	Node.js
Top-level `await`	89+	89+	15+	16.6+
Class Fields	72+	69+	14.1+	12+
Private Methods	74+	90+	15+	16+
`at()`	92+	90+	15.4+	18.0+
`error.cause`	93+	92+	16+	18.9+
`RegExp` Match Indices	88+	78+	16.4+	16.0+

✅ 대부분의 최신 환경에서 ES2022 기능은 잘 지원되지만, 레거시 환경에서는 Babel 등의 트랜스파일러 사용을 권장합니다.

참고 자료

ES2022는 JavaScript 개발의 생산성과 안정성을 높이는 실질적인 기능들을 포함하고 있으며, 현대적인 웹 및 서버 애플리케이션 개발에서 널리 활용되고 있습니다. 최신 기능들을 적절히 사용하면, 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# ES2022

**ECMAScript 2022**(일명 **ES2022**)는 2022년 6월에 공식 발표된 ECMAScript어 사양의 최신 버전 중 하나로, JavaScript의 지속적인 진화를 반영한 중요한 업데이트입니다. 이 표준은 TC39 위원회에 의해 제정되며, 매년 새로운 기능과 개선 사항을 포함하여 JavaScript의 표현력과 개발자 경험을 향상시키는 데 기여합니다. ES2022는 기존의 ES2021(ES12) 이후의 주요 버전으로, 비동기 프로그래밍, 클래스 기능 확장, 문자열 처리 등 다양한 분야에서 유용한 기능들을 도입했습니다.

이 문서에서는 ES2022에서 도입된 주요 기능들을 상세히 설명하고, 각 기능의 사용법과 실용적인 예제를 제공합니다. 또한, 브라우저 및 환경별 지원 현황도 간략히 다룹니다.

---

## 주요 기능 개요

ES2022는 총 6가지의 주요 기능을 포함하며, 이들은 모두 개발자가 더 직관적이고 안전하게 코드를 작성할 수 있도록 설계되었습니다. 다음은 ES2022의 핵심 기능 목록입니다:

- **Top-level `await`** (최상위 await)
- **Class Fields** (정적 및 인스턴스 필드)
- **Private Class Methods and Accessors**
- **`at()` 메서드**
- **`error.cause`**
- **`RegExp` Match Indices**

각 기능은 아래 섹션에서 자세히 설명됩니다.

---

## 1. Top-level `await`

### 개요
ES2022 이전까지 `await` 키워드는 반드시 `async` 함수 내부에서만 사용할 수 있었습니다. 그러나 ES2022에서는 **모듈 최상위 수준**(top-level)에서도 `await`를 사용할 수 있게 되었습니다.

### 사용 예시

```javascript
// 기존 방식 (IIFE 사용)
(async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
})();

// ES2022 이후 (최상위 await)
const response = await fetch('/api/data');
const data = await response.json();
console.log(data);
```

### 활용 사례
- 모듈 초기화 시 외부 리소스(예: 설정 파일, API 응답)를 기다려야 할 때
- 서버 사이드 렌더링 또는 빌드 타임 데이터 로딩

> ⚠️ 주의: 최상위 `await`는 **모듈 환경**(ESM)에서만 사용 가능하며, 일반 스크립트에서는 지원되지 않습니다.

---

## 2. Class Fields

### 인스턴스 필드
ES2022는 클래스 내에서 **공개 인스턴스 필드**(public instance fields)를 명시적으로 선언할 수 있도록 했습니다.

```javascript
class Counter {
  count = 0;  // 인스턴스 필드

  increment() {
    this.count++;
  }
}
```

이전에는 생성자 내에서 `this.count = 0`과 같이 초기화해야 했지만, 이제는 클래스 본문에서 직접 선언 가능합니다.

### 정적 필드
정적 필드도 마찬가지로 지원됩니다.

```javascript
class MathUtils {
  static PI = 3.14159;
}

console.log(MathUtils.PI); // 3.14159
```

---

## 3. Private Class Methods and Accessors

### 개요
ES2020에서 도입된 **private 필**(예: `#privateField`)에 이어, ES2022는 **private 메서드**와 **private 접근자**(getters/setters)를 추가로 지원합니다.

### 사용 예시

```javascript
class BankAccount {
  #balance = 0;

  // private 메서드
  #validateAmount(amount) {
    return amount > 0;
  }

  // private getter
  get #currentBalance() {
    return this.#balance;
  }

  deposit(amount) {
    if (this.#validateAmount(amount)) {
      this.#balance += amount;
    }
  }

  getBalance() {
    return this.#currentBalance;
  }
}
```

### 장점
- 캡슐화 강화
- 내부 로직을 외부로부터 숨겨 보다 안정적인 객체 지향 설계 가능

---

## 4. `at()` 메서드

### 개요
`at()` 메서드는 배열, 문자열, TypedArray 등에서 **음수 인덱스**를 사용하여 요소에 접근할 수 있게 해줍니다. 이는 Python 등의 언어에서 흔히 사용되는 기능입니다.

### 사용 예시

```javascript
const arr = [10, 20, 30, 40, 50];

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

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

### 기존 방식과 비교
```javascript
// 기존
arr[arr.length - 1]

// ES2022
arr.at(-1)
```

`at()`은 코드의 가독성을 높이고, 반복되는 `length` 계산을 줄여줍니다.

---

## 5. `error.cause`

### 개요
`error.cause`는 예외를 던질 때 **원인**(cause)을 명시적으로 지정할 수 있게 해주는 기능입니다. 이는 예외 체인을 보다 명확하게 만들고, 디버깅을 용이하게 합니다.

### 사용 예시

```javascript
try {
  const response = await fetch('/api/user');
  if (!response.ok) {
    throw new Error('Failed to fetch user', {
      cause: new Error(`HTTP ${response.status}`)
    });
  }
} catch (err) {
  console.error(err.message);     // "Failed to fetch user"
  console.error(err.cause.message); // "HTTP 404"
}
```

### 장점
- 예외의 근본 원인을 추적하기 쉬움
- 라이브러리나 유틸리티 함수에서 오류 전파 시 유용

---

## 6. `RegExp` Match Indices

### 개요
`/d/gu`와 같은 정규표현식에 `hasIndices` 플래그(`/d/gu`)를 사용하면, 매칭된 결과의 **인덱스 위치 정보**를 얻을 수 있습니다.

### 사용 예시

```javascript
const re = /a+(?<digit>\d)/u;
const str = "aaba1aaa2";

const match = re.exec(str);

console.log(match.indices); 
// [[1, 4], [3, 4]] → 'aab' 중 'aa'와 '1'의 위치
console.log(match.indices.groups.digit); // [3, 4]
```

### 활용 분야
- 텍스트 편집기, 코드 하이라이터 등에서 정확한 위치 추적
- 파서 개발 시 유용

---

## 브라우저 및 환경 지원 현황

| 기능 | Chrome | Firefox | Safari | Node.js |
|------|--------|---------|--------|---------|
| Top-level `await` | 89+ | 89+ | 15+ | 16.6+ |
| Class Fields | 72+ | 69+ | 14.1+ | 12+ |
| Private Methods | 74+ | 90+ | 15+ | 16+ |
| `at()` | 92+ | 90+ | 15.4+ | 18.0+ |
| `error.cause` | 93+ | 92+ | 16+ | 18.9+ |
| `RegExp` Match Indices | 88+ | 78+ | 16.4+ | 16.0+ |

> ✅ 대부분의 최신 환경에서 ES2022 기능은 잘 지원되지만, 레거시 환경에서는 Babel 등의 트랜스파일러 사용을 권장합니다.

---

## 참고 자료

- [ECMAScript 2022 Specification (ECMA-262)](https://tc39.es/ecma262/#sec-ecmascript-language-scripts-and-modules)
- [MDN Web Docs - JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [V8 Blog - ES2022 Updates](https://v8.dev/blog/v8-release-92)

---

ES2022는 JavaScript 개발의 생산성과 안정성을 높이는 실질적인 기능들을 포함하고 있으며, 현대적인 웹 및 서버 애플리케이션 개발에서 널리 활용되고 있습니다. 최신 기능들을 적절히 사용하면, 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

ES2022

📋 문서 버전

ES2022

주요 기능 개요

1. Top-level `await`

개요

사용 예시

활용 사례

2. Class Fields

인스턴스 필드

정적 필드

3. Private Class Methods and Accessors

개요

사용 예시

장점

4. `at()` 메서드

개요

사용 예시

기존 방식과 비교

5. `error.cause`

개요

사용 예시

장점

6. `RegExp` Match Indices

개요

사용 예시

활용 분야

브라우저 및 환경 지원 현황

참고 자료

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?

📋 문서 버전

ES2022

주요 기능 개요

1. Top-level await

개요

사용 예시

활용 사례

2. Class Fields

인스턴스 필드

정적 필드

3. Private Class Methods and Accessors

개요

사용 예시

장점

4. at() 메서드

개요

사용 예시

기존 방식과 비교

5. error.cause

개요

사용 예시

장점

6. RegExp Match Indices

개요

사용 예시

활용 분야

브라우저 및 환경 지원 현황

참고 자료

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?

1. Top-level `await`

4. `at()` 메서드

5. `error.cause`

6. `RegExp` Match Indices