ES2020 - 10 New javaScript Features

* 이 글은 https://www.freecodecamp.org/news/javascript-new-features-es2020/ 번역하였습니다. 

 

ES2020 새로운 features들이 추가되었습니다. 우리들은 이 새로운 기능과 개선된 사양을 수용해야합니다. 무엇이 바뀌었는지 함께 알아봅시다. 

#1: BigInt

BigInt는 이미 예상된 features 였고, 결국에는 추가되었습니다. BigInt는 개발자 들이 data들을 다루거나 가공할 때 훨씬 더 큰 정수표현을 할수 있게끔 허용해주는 것입니다. 

 

JavaScript에서 가장 정수를 표현할 수 있는 정도는 pow(2,53) -1 입니다. 그러나 BigInt는 그 이상을 넘어서 더 큰 정수를 표현할 수 있도록 해주는 유용한 기능입니다.

 

한가지 유의할 부분은 BigInt를 실행하기 위해서는 정수의 가장 끝부분에 n을 포함시켜줘야합니다. javaScript 엔진(v8 또는 다른 엔진들)에 따라 다르게 처리되기 때문에 여기서 n은 BigInt를 대표합니다.

 

전통적인 숫자 체계는 IEEE754이기 때문에 호환이 되지 않는 경우가 존재합니다. 

#2: Dynamic import

Dynamic import 기능은 js 파일들을 더욱 동적으로 Import 할수 있도록 합니다. 이 기능은 Webpack 또는 Babel과 함께 사용할 수 있습니다. 

 

이 기능은 on-demand-request code 에 놓을 수 있고, 모듈 번들러나 Webpack의 오버헤드 없이 코드 스플리팅 할때도 효율적입니다. 또한 if-else block 내에 조건에 따라서 모듈을 import를 할 수도 있습니다.

 

이 기능은 모듈을 import 할 때 가장 좋고, 전역 namespace에 영향을 주지 않습니다.

 

#3: Nullish Coalescing

Nullish coalescing는 falsey값 체크 대신, nullish 값을 제대로 체크할 수 있는 기능입니다. 여기서 nullish 와 falsey 값이 무엇이 다른지 궁금증이 생기죠?

 

JavaScript에서는 많은 값들이 falsey 입니다. Empty string, Number 0, undefined, null, false, NaN 등이 포함됩니다.

하지만 변수의 값이 Empty String인지 false 값일 때 null 값인지, undefined 값인지를 체크해야하는 순간들이 많았을 것입니다

그러한 케이스들은 Nullish coalescing 기능 ?? operator을 통해 해소할 수 있을 것입니다. 

 

nullish operator는 non-nullish 값을 리턴해주는 반면, OR operator는 truthy 값을 리턴해 주는 것을 위에 예시를 보고 확인할 수 있습니다. 

#4: Optional Chaining

Optional chaining 문법은 객체 내의 프로퍼티 존재 유무에 상관없이 nested된 객체 프로퍼트를 접근할 수 있도록 도와줍니다. 존재하면 값을, 존재하지 않으면 undefined를 리턴합니다. 

 

이 기능은 객체 프로퍼티 뿐만 아니라 배열, 함수에서도 유용하게 사용할 수 있습니다.

#5: Promise.allSettled

Promise.allSettled 메소드는 Promise의 배열의 resolve가 되었는지 판단하는 기능입니다. (만약 배열 내 하나의 promise 함수가 reject 이 되었으면, reject를 리턴합니다)

 

"Just run all promises - I don't care about the results"의 개념을 가지고 작동해온 이미 구현되어 있는 기능 Promise.race나 Promise.all은  Promise.allSettled 과는 매우 대조적입니다.

 

#6: String#matchAll

matchAll은 정규식 표현과 관련된 String의 새로운 메소드입니다. 이는 iterator를 통해 하나씩 대조하여 매치된 그룹을 통채로 반환합니다.

 

#7: globalThis

만약 Node 환경, 브라우저 환경 또는 web-workers 내에서 cross-platform JS code를 타이핑하고 있다면, 전역 객체를 holding 하는데 어려움을 겪었을 것입니다. 

 

브라우저에서는 window, Node에서는 global, web workers에서는 self 로써, 전역 객체는 매번 다르게 호출되기 때문이기도 합니다.

 

지금까지는 런타임 감지를 한 다음 올바른 전역 객체를 자체적으로 구현을 해야만 했습니다.

 

ES2020에서는 globlaThis를 이용하여 어느 환경에서든지 전역객체를 사용할 수 있도록 새로운 기능을 추가하였습니다. 

 

#8: Module Namespace Exports

원래 JavaScript 모듈은 아래에 문법을 통해 사용하였습니다. 

import * as utils from './utils.js'

하지만 지금까지 대칭없는 export의 문법이 존재했습니다. 

export * as utils from './utils.js'

ES2020에서는 아래와 같이 호출할 수 있습니다. 

import * as utils from './utils.js'
export { utils }

#9: Well defined for-in order

The ECMA에서는 for( x in y )의 순서를 명시하지 않았습니다. 브라우저가 일관된 순서로 for-in 문을 수행하였다하더라도, ES2020에서 The ECMA는 공식적으로 for-in문의 일관된 순서를 표준화하였습니다.

#10: import.meta

import.meta 객체는 null 프로토타입과 함께 ECMA에 의해서 생겨났습니다. 

 

보통 모듈은 이렇게 쓰입니다. 

<script type="module" src="module.js"></script>

import.meta객체를 사용하여 모듈에 대한 정보를 살펴볼 수 있습니다. console.log()에 찍어보면 다음과 같습니다. 

console.log(import.meta); // { url: "file:///home/user/module.js" }

import.meta객체는 모듈의 URL을 가리키는 프로퍼티를 리턴합니다. 이는 스크립트를 가져온 URL (외부 스크립트의 경우) 이거나 문서의 기본 URL(인라인 스크립트의 경우)입니다. 

---

< 참고자료 >

 

[사이트] #freeCodeCamp

https://www.freecodecamp.org/news/javascript-new-features-es2020/

 

<javaScript> new ES2020 features end