[JS] What's new in ECMAScript 2020

2020년을 맞이 하기에는 벌써 5월이 끝나고 있지만 그래도 올해 나온 ES2020 에 새로운 기능을 살펴보도록 하겠습니다.

2015년 ES6 이후로 Ecma International의 TC39에서 매년 ECMAScript의 새로운 버전을 출시합니다. ECMAScript 2020은 ECMAScript 언어 11 번째 버전입니다.

ES11 또는 ES2020 이라고도 부릅니다.

What?

새롭게 적용된 기능인 아래와 같습니다.

• globalThis
• Promise.allSettled
• Optional Chaining Operator
• Nullish Coalescing
• Dynamic Import
• BigInt
• String.prototype.matchAll

globalThis

globalThis는 Javascript의 최상위 객체인 global 객체에 접근하기 위해 ES2020에서 추가된 방식입니다. 최상위 객체라면 브라우저에서는 window 객체를 의미하고,

Node.js 에서는 global 객체를 의미합니다.

JS가 실행되는 런타임 환경이 달라지게 되면 접근하는 방식이 달라져서 불편하기 때문에 globalThis이라는 공통객체를 사용하여 동일하게 접근을 할 수가 있게 됩니다.

Promise.allSettled

순차적이지 않은 비동기적인 작업을 수행 할 때 es6에 등장한 Promise.all를 사용했을텐데 하지만 결정적인 단점이 하나라도 reject로 떨어진다면 다른 나머지 수행이 결과값을 처리 할 수 없게 되었습니다.

위에 결과는 어떻게 나올까요? A 와 C 는 success 지만 B가 fail 이기때문에 결과는 catch 로 빠지게 되어 reject fail 로 처리가 됩니다. 이것을 방지하기 위해서 Promise.allSettled 가 나왔습니다.

Promise.allSettled 사용하면

성공한 경우 status는 fulfilled로, 반환값은 value로 나오고, 실패한 경우에는 status는 rejected, 반환값은 reason으로 나옵니다. 실패한 Promise만 추려서 재요청할 수 있습니다.

Optional Chaining(?.)

선택적 체이닝(?.)

What

Optional Chaining(?.) 연산자는 왼쪽 피연산자 값이 null이나 undefined일 경우 실행을 멈추고 undefined를 반환하는 연산자입니다

Another Example

Nullish coalescing Operator

즉 병합 연산자(??)Nullish coalescing Operator(??) 입니다.

What?

왼쪽 피연산자 값이 null이나 undefined일 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자입니다.

Dynamic import

모듈 import () 할때 동적으로 할 수 있는 구문 입니다. import()구문은 Promise객체를 반환하기 때문에 async/await이나 then/catch를 사용해서 비동기처리

아래와 같은 이점을 얻을수가 있다.

• 사용자 언어를 모두로드하는 대신로드
• 애플리케이션 경로의 지연 로딩 (성능 향상)
• 모듈을 찾을 수없는 경우 장애 처리 가능

BigInt

JS에서 큰숫자를 취급 표현하는데 어려움이 많았습니다. 그래서 BigInt라는 객체가 도입이 되었습니다. BigInt는 2^53 보다 큰 정수를 취급할수가 있습니다. 사용법은 숫자뒤에 n을 붙여 사용을 하면 됩니다.

BigInt 미사용

 

BigInt 사용

BigInt는 BigInt끼리 계산을 해야하며, Big + Int 이기때문에 소수점은 표현을 못합니다.

String.prototype.matchAll

matchAll은 쉽게 설명하자면 정규식표현이라고 생각하면 좋을거 같습니다. RegExp.prototype.exec 메서드와 유사하게 동작합니다.

matchAll 문자열에서 일치하는 정규표현식을 iterator 형식으로 반환합니다

 

주의!!! 정규표현식 뒤에 /g를 사용하지 않으면 Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument ERROR

References

• https://github.com/tc39/proposals/blob/master/finished-proposals.md
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
• https://dev.to/carlillo/es2020-features-in-simple-examples-1513

🙏🏻감사합니다.