ECMA 2020 Changes

Features

optional-chaining and nullish-coalescing

1. nullish-coalescing

evaluation이 null 또는 undifined로 판단이 될 경우에는 fallback value를 설정할 수 있습니다.

const person = {};

const name = person.fullName ?? "Anonymous";



//It prints "Hello, Anonymous"

console.log(`Hello, ${name}!`);

 

|| 연산자와 유사하지만 "falsy" values (i.e. undefined, null, false, 0, 0n and "") 다음과 같은 값에 다 default를 설정하지만 nullish-coalescing은 nullish value만 체크합니다.

 

const element = { index: 0, value: "foo" };



let index = element.index ?? -1; // 0 :D

console.log(index)

index = element.index || -1; // -1 :(

console.log(index)

 

2. Optional-chaining

위와 유사하게 nullish value를 체크하여 value를 셋팅함

 

const city = person.address?.city; // person.address could be not defined

const isNeighbor = person.address?.isCloseTo(me);

person.sayHayUsing?.("Twitter"); // The person.sayHayUsing method could be not defined

 

3. Dynamic Import

1. module을 runtime 시점에 불러올 수 있습니다.
2. 이를 사용하면 chunk를 통해서 필요한 시점에 불러올 수 있고, 불필요한 resource를 처음에 load하는 것을 방지할 수 있습니다.

const loadModuleDynamically = () => {

return import('./moduleA');

};

How to check it?

Can i use?

출처

• Babel 7.8.0 release
• optional-chaning and nullish-coaleascing