ECMAScript 2020

ECMAScript 6부터 일 년 단위 릴리스(yearly release)로 변경된 이후로, 해마다 연도별 명세가 완성되고 공개되고 있다. 
2020 6월18일 ECMAScript 2020(ECMA-262 11번째 에디션)이 공식적으로 릴리스 되었다. 

ECMAScript 2020 

릴리스된 내용들을 살펴보겠다.

Optional Chaining (?.)

연산자인 ?.는 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, undefined를 반환한다.

const title = data && data.article && data.article.title

// 위의 표현식은 다음의 optional chaining 연산자를 통해 동일하게 표현될 수 있다.
const title = data?.article?.title

// data.article.title 값이 존재하는 경우, title 값을 반환
// 그렇지 않은 경우에는 undefined를 반환

const friends = {
  jihun: {
    age: 28,
    getAge() {
      return this.age;
    }
  },
  changhan: {
    age: 28,
    getAge() {
      return this.age;
    }
  }
}

const jihun = friends?.jihun
// 위와 동일한 동작을 함
const jihun2 = friends !== undefined && friends !== null ? friends.jihun : undefined

const changhanGetAge = friends?.changhan.getAge?.() // foo
const changhanGetHeight = friends?.changhan.height // undefined

Nullish coalescing Operator (??)

연산자인 ??는 좌측 값이 null 또는 undefined 한 값인 경우에만 평가한다.

"" || "default value"
// default value

null ?? "default value"  
// default value

"" ?? "default value"
// ""

false ?? "default value"  
// false

export * as ns from "mod";

모듈을 모두 import한 후, 새로운 이름(namespace)로 export할 수 있게 하는 문법

export * as ns from "mod";  

globalThis

globalThis는 환경에 따라 다른 최상위 객체(브라우저의 경우 window, Node.js의 경우 global 등) 접근 방법의 상이함으로 인한 불편을 해소, 모든 환경에서 동일 객체를 사용해 접근할 수 있게 한다. 모든 주요 브라우저에서 지원된다.

globalThis.setTimeout;  // window.setTimeout  

Promise.allSettled

나열된 여러 개의 Promise 모음이 모두 처리(settled)(이행(fulfilled) 또는 거부(rejected))된 후, 각 Promise의 결과 값의 컬렉션을 반환한다.

const promise1 = Promise.resolve(5);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 222);
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 3333);
});
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// -----------------------------------------------------------
const promise4 = Promise.resolve(4);  
const promise5 = new Promise((resolve, reject) => setTimeout(reject, 700, 'foo'));
Promise.allSettled([promise4, promise5]).  
  then((results) => console.log(results));
 
// Promise.allSetteld의 결과값
// [
//     {
//         "status": "fulfilled",
//         "value": 4
//     },
//     {
//         "status": "rejected",
//         "reason": "foo"
//     }
// ]

// Promise.all의 결과값
// Uncaught (in promise) 3333

for-in mechanics

명확하지 않았던 for-in 열거 순서에 대한 방식을 정의한다.

var o = {  
  p1: 'p1',
  p2: 'p2',
  p3: 'p3',
};

var keys = [];  
for (var key in o) {  
  if (key === 'p1') {
    o.p4 = 'p4';
  }
  keys.push(key);
}

console.log(keys);
// ['p1', 'p2', 'p3']
// IE8의 경우: ['p1', 'p2', 'p3', 'p4']

 

출처 :

d2.naver.com/helloworld/4268738

www.daleseo.com/js-optional-chaining/

john015.netlify.app/what-is-new-in-es-11