JavaScript 2020
JavaScript 2020 (ES11): ECMAScript 2020의 주요 기능
- *ECMAScript 2020 (ES11)**은 2020년에 발표된 JavaScript 표준으로, 개발자들이 더욱 효율적이고 안전한 코드를 작성할 수 있도록 다양한
새로운 기능과 성능 개선을 도입했습니다. 옵셔널 체이닝(
?.), Nullish 병합 연산자(??), BigInt와 같은 기능들이 추가되었으며, 비동기 처리와 정규 표현식에서도 개선이 이루어졌습니다.
이 가이드는 **ES11(ECMAScript 2020)**에서 도입된 주요 기능과 사용 예시를 설명합니다.
1. 옵셔널 체이닝 (Optional Chaining, ?.)
옵셔널 체이닝은 객체나 배열의 중첩된 속성에 안전하게 접근할 수 있는 기능입니다. 중첩된
속성에 접근할 때 존재하지 않는 속성이 있으면 **undefined**를 반환하며, 예외가 발생하지 않으므로
안전한 코드를 작성할 수 있습니다.
1.1. 옵셔널 체이닝 사용 예시
const user = { name: 'Alice', address: { city: 'New York' } };
console.log(user?.address?.city); // 'New York'
console.log(user?.contact?.phone); // undefined (접근 실패 시 예외 발생하지 않음)
1.2. 주요 특징
- *
?.*을 사용해 존재하지 않는 속성에 접근해도 에러가 발생하지 않음. - 접근하려는 속성이 없으면 **
undefined*를 반환.
2. Nullish 병합 연산자 (??)
Nullish 병합 연산자는 **null 또는 undefined**인 경우에만 기본값을 반환합니다.
기존의 OR(||) 연산자는 false, 0,
**빈 문자열('')**과 같은 Falsy 값을 모두 기본값 처리했지만,
?? 연산자는 **null**과 **undefined**에만 반응합니다.
2.1. ?? 사용 예시
const name = null;
const defaultName = name ?? 'Guest';
console.log(defaultName); // 'Guest'
const age = 0;
const defaultAge = age ?? 18;
console.log(defaultAge); // 0 (Falsy 값이지만 `null` 또는 `undefined`가 아니므로 기본값 미적용)
2.2. 주요 특징
- *
null*이나 **undefined*일 때만 기본값을 사용. false,0,''같은 Falsy 값은 그대로 사용됨.
3. BigInt: 큰 정수 처리
BigInt는 아주 큰 정수를 처리할 수 있는 새로운 데이터 타입입니다. JavaScript의 기존
Number 타입은 최대 2^53 - 1까지만 안전하게 처리할 수 있었지만, BigInt를
사용하면 더 큰 숫자를 안전하게 사용할 수 있습니다.
3.1. BigInt 사용 예시
const largeNumber = 123456789012345678901234567890n;
console.log(largeNumber); // 123456789012345678901234567890n
const sum = largeNumber + 10n;
console.log(sum); // 123456789012345678901234567900n
3.2. 주요 특징
- *
n*을 숫자 뒤에 붙여 BigInt 값을 생성. - *
BigInt*끼리만 연산이 가능하며, **Number*와 BigInt를 직접적으로 연산할 수 없음.
4. Promise.allSettled()
- *
Promise.allSettled()*는 전달된 모든 **프로미스(Promise)**가 성공하거나 실패할 때까지 대기한 후, 각 프로미스의 결과를 반환합니다. 이는 모든 프로미스의 상태를 확인할 때 유용합니다. **Promise.all()*과 달리, 하나의 프로미스가 실패하더라도 다른 프로미스의 성공 여부를 확인할 수 있습니다.
4.1. Promise.allSettled() 사용 예시
const promises = [
Promise.resolve('Success'),
Promise.reject('Error'),
Promise.resolve('Another success')
];
Promise.allSettled(promises).then(results => console.log(results));
// [
// { status: 'fulfilled', value: 'Success' },
// { status: 'rejected', reason: 'Error' },
// { status: 'fulfilled', value: 'Another success' }
// ]
4.2. 주요 특징
- 모든 프로미스가 완료된 후, 상태와 결과를 확인할 수 있음.
- 성공한 프로미스는
fulfilled, 실패한 프로미스는rejected상태로 반환.
5. 글로벌 객체 globalThis
- *
globalThis*는 브라우저 환경과 Node.js 환경에서 전역 객체에 접근할 수 있는 표준화된 방법을 제공합니다. 이전에는 브라우저에서window, Node.js에서는 **global*을 사용해야 했지만, **globalThis*는 환경에 상관없이 전역 객체를 참조할 수 있게 해줍니다.
5.1. globalThis 사용 예시
console.log(globalThis); // 브라우저에서는 window 객체, Node.js에서는 global 객체 출력
6. 동적 import()
- *
import()*는 동적으로 모듈을 가져오는 기능을 제공합니다. 이는 조건부 로드, 지연 로딩, 또는 비동기 로드가 필요한 상황에서 유용하게 사용할 수 있습니다. 기존의 **import*는 정적이었지만, **동적import()*를 사용하면 비동기적으로 모듈을 로드할 수 있습니다.
6.1. 동적 import() 사용 예시
// 조건에 따라 동적으로 모듈을 가져옴
if (condition) {
import('./module.js').then(module => {
module.doSomething();
});
}
6.2. 주요 특징
- 조건부 로딩, 지연 로딩, 비동기 로딩 등에 유용.
- 프로미스를 반환하여 모듈이 로드된 후 후속 처리 가능.
7. 정규 표현식 개선
ES11에서는 정규 표현식이 더 강력하고 유연하게 개선되었습니다. 특히 정규 표현식 매칭의 안정성과 Unicode 지원이 향상되었습니다.
7.1. matchAll()
matchAll() 메서드는 정규 표현식과 일치하는 모든 결과를 반복 가능한 객체로 반환합니다.
const regex = /t(e)(st)/g;
const str = 'test1test2';
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}
// ['test', 'e', 'st', index: 0, input: 'test1test2', groups: undefined]
// ['test', 'e', 'st', index: 5, input: 'test1test2', groups: undefined]
요약
- *ES11(ECMAScript 2020)**은 JavaScript의 비동기 처리, 객체 및 배열 처리, 정규 표현식을 개선하여 개발자들이 더 안전하고 간편한 코드를 작성할 수 있도록 도왔습니다.
- 옵셔널 체이닝(
?.): 중첩된 객체 속성에 안전하게 접근할 수 있는 구문. - Nullish 병합 연산자(
??):null또는undefined인 경우에만 기본값을 제공하는 연산자. - BigInt: 매우 큰 정수를 안전하게 처리할 수 있는 새로운 데이터 타입.
Promise.allSettled(): 모든 프로미스의 성공/실패 여부를 반환.globalThis: 모든 환경에서 전역 객체에 안전하게 접근할 수 있는 표준화된 방법.- 동적
import(): 조건부 모듈 로딩 및 비동기 모듈 로딩을 위한 동적 모듈 시스템. - 정규 표현식 개선:
matchAll()메서드 추가로 모든 정규 표현식 일치 결과를 반환.
ES11은 JavaScript의 사용성을 크게 향상시켜 개발자들이 **더 직
관적**이고 효율적인 코드를 작성할 수 있도록 돕습니다.