ECMAScript 2020

JavaScript 버전 번호

오래된 JS 버전은 숫자로 명명됩니다：ES5 (2009)과 ES6 (2015)。

2016년부터 버전은 연도로 명명됩니다：ECMAScript 2016、2017、2018、2019、...

ES2020에서 새로운 기능：

경고

이 기능들은 상대적으로 새로운 기능입니다。

ancient 브라우저는 대체 코드(Polyfill)가 필요할 수 있습니다。

JavaScript BigInt

JavaScript BigInt 변수는 일반 JavaScript 숫자로 표현할 수 없는 큰 정수 값을 저장하기 위해 사용됩니다。

JavaScript 정수는 최대 15자리 숫자까지 정확합니다。

Integer 인스턴스

let x = 999999999999999;
let y = 9999999999999999; // 너무 크다

직접 시험해 보세요

BigInt 인스턴스

let x = 9999999999999999;
let y = 9999999999999999n;

직접 시험해 보세요

BigInt를 생성하려면 다음과 같이 하세요： n 정수의 끝에 추가하거나 BigInt()를 호출하여：

예제

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345);

직접 시험해 보세요

BigInt의 JavaScript 유형은 "bigint"입니다：

예제

let x = BigInt(999999999999999);
let type = typeof x;

직접 시험해 보세요

2020년 9월부터 모든現대 브라우저가 BigInt를 지원합니다：

크롬 에지 파이어폭스 사파리 오페라
Chrome 67 Edge 79 Firefox 68 사파리 14 Opera 54
2018년 5월 2020년 1월 2019년 7월 2020년 9월 2018년 6월

JavaScript 문자열 메서드 matchAll()

ES2020 이전에는 문자열 메서드가 모든 문자열의 모든 발견을 검색하는 데 사용할 수 없었습니다。

예제

const iterator = text.matchAll("Cats");

직접 시험해 보세요

매개변수가 정규 표현식인 경우 전체 플래그를 설정해야 합니다 (g)를 설정하지 않으면 TypeError가 발생합니다。

예제

const iterator = text.matchAll(/Cats/g);

직접 시험해 보세요

대소문자를 구분하지 않는 검색을 수행하려면 대소문자 구분하지 않는 플래그를 설정해야 합니다 (i)：

예제

const iterator = text.matchAll(/Cats/gi);

직접 시험해 보세요

주의:ES2021 replaceAll() 문자열 메서드를 도입했습니다。

공백 값 병합 연산자（Nullish Coalescing Operator）（?? 연산자）

첫 번째 매개변수가 공백 값이 아닌 경우null 또는 undefined），그렇다면 ?? 연산자는 첫 번째 매개변수를 반환합니다。

그렇지 않으면 두 번째 값을 반환합니다。

예제

let name = null;
let text = "missing";
let result = name ?? text;

직접 시험해 보세요

2020년 3월부터 모든 현대 브라우저가 nullish 연산자를 지원합니다：

크롬 에지 파이어폭스 사파리 오페라
Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
2020년 2월 2020년 2월 2020년 1월 2020년 3월 2020년 3월

선택 연결 연산자（Optional Chaining Operator）（?. 연산자）

객체가 undefined 또는 null그렇다면선택 연결 연산자반환 undefined에러를 발생시키지 않습니다.

예제

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

직접 시험해 보세요

2020년 3월부터 모든 현대 브라우저가 지원합니다. ?.= 연산자:

크롬 에지 파이어폭스 사파리 오페라
Chrome 80 Edge 80 Firefox 74 Safari 13.1 Opera 67
2020년 2월 2020년 2월 2020년 3월 2020년 3월 2020년 3월

논리 AND 할당 연산자(&&= 연산자)

논리 AND 대입 연산자두 값 사이에 사용됩니다.

첫 번째 값이 true이 경우 두 번째 값을 할당합니다.

논리 AND 대입 예제

let x = 100;
x &&= 5;

직접 시험해 보세요

2020년 9월부터 모든 현대 브라우저가 지원합니다 &&= 연산자:

크롬 에지 파이어폭스 사파리 오페라
크롬 85 에지 85 파이어폭스 79 사파리 14 오페라 71
2020년 8월 2020년 8월 2020년 3월 2020년 9월 2020년 9월

논리 OR 대입 연산자（||= 연산자）

논리 OR 대입 연산자두 값 사이에 사용됩니다.

첫 번째 값이 false이 경우 두 번째 값을 할당합니다.

논리 OR 대입 예제

let x = 10;
x ||= 5;

직접 시험해 보세요

2020년 9월부터 모든 현대 브라우저가 지원합니다 ||= 연산자:

크롬 에지 파이어폭스 사파리 오페라
크롬 85 에지 85 파이어폭스 79 사파리 14 오페라 71
2020년 8월 2020년 8월 2020년 3월 2020년 9월 2020년 9월

빈 값 병합 할당 연산자（??= 연산자）

빈 값 병합 할당 연산자（Nullish Coalescing Assignment Operator）두 값 사이에서 사용됩니다.

첫 번째 값이 undefined 또는 null이 경우 두 번째 값을 할당합니다.

빈 값 병합 할당 연산자 예제

let x = 10;
x ??= 5;

직접 시험해 보세요

2020년 9월부터 모든 현대 브라우저가 지원합니다 ??= 연산자:

크롬 에지 파이어폭스 사파리 오페라
크롬 85 에지 85 파이어폭스 79 사파리 14 오페라 71
2020년 8월 2020년 8월 2020년 3월 2020년 9월 2020년 9월