[ES11] ECMAScript 2020 추가 문법

요약

1. Optional Chaining(?.)

2. Nullish coalescing Operator(??)

3. globalThis

4. Dynamic import

5. BigInt

6. String.prototype.matchAll

7. Promise.allSettled

 

1. Optional Chaining(?.)

     ?. 연산자는 왼쪽 연산자 값이 null이나 , undefined 일 경우 실행을 멈추고 undefined를 return하는 연산자이다.

     장점으로는 존재하지 않을 수도 있는 값에 대하여 예외처리를 손쉽게 할 수 있다.

const data = {
  user: {
    name: 'foo',
    getName() {
      return this.name
    }
  }
}

const user1 = data?.user // {...}
// 위와 동일한 동작을 함
const user2 = data !== undefined && data !== null ? data.user : undefined // {...}

const userName = data?.user.getName?.() // foo
const firstFriend = data?.user.friends?.[0] // undefined

  현재(2020-02-03)기준 Optional Chaining 연산자를 사용하기 위해선, 

@babel/plugin-proposal-optional-chaining을 적용하거나,

 typescript 3.7.2 버전 이상을 사용 해야 합니다.

2. Nullish coalescing Operator(??)

??는 왼쪽 피연산자 값이 null이나 undefined일 경우 오른쪽 피연산자를 반환하고,

그렇지 않으면 왼쪽 피연산자를 return하는 연산자이다.

기본 값 할당이나 분기처리에서 데이터 맞춰볼때 || 쓰는 부분에서 0, '', NaN 같은 falsy값들을 유효한 값으로 생각한 경우

예기치 않은 결과가 발생할 수 있는데,  ??를 사용하면 null or undefined인 경우에만 기본 값을 할당해주기 때문에

좀 더 안전한 코드를 작성할 수 있다.

const data = {
  title: 'foo',
  desc: ''
}

const description1 = data.desc ?? 'default value' // ''
// 위와 동일한 동작을 함
const description2 =
  data.desc !== undefined && data.desc !== null ? data.desc : 'default value' // ''

const description3 = data.desc || 'default value' // 'default value'

현재(2020-02-03)기준 Nullish coalescing Operator를 사용하기 위해선, 

@babel/plugin-proposal-nullish-coalescing-operator을 적용하거나, 

typescript 3.7.2 버전 이상을 사용 해야 합니다.

3. globalThis

globalThis는 js 실행환경에서 어떠한 경우에도 전역객체를 return해준다.  

기존에는 js 실행환경에 따라서 global 객체에 접근하는 방법이 달랐음

  - 브라우져 환경에서는 window, self, frames를 사용해서 접근했고,

  - 노드환경에서는 global, Web Worker에서는 self를 통해서 접근

장점 : 코드가 다양한 실행 환경에서 작동시 별도의 예외처리를 해야하는데, 이제는 globalThis를 이용하면 손쉽게 접근 가능

// 브라우저 실행 환경 기준

globalThis === window // true

// 브라우져 기준으로 아래 3개는 동일하다.
console.log(globalThis);
console.log(window);
console.log(this);

현재(2020-02-03)기준 globalThis은 Chrome 71 버전 이상, Firefox 65 버전 이상, Safari 12.1 버전 이상, 

node.js 12 버전 이상에서 globalThis를 사용할 수 있습니다.

4. Dynamic import

import() 구문은 동적으로 모듈 불러올때 사용하며, Promise 객체를 반환하기때문에

async/await이나 then/catch를 사용해서 비동기 처리할 수 있음.

import("./myModule.js")
    .then(module => {
      ...
    });
    .catch(error => {
      ...
    })

// async/await 사용
;(async () => {
    try {
      const module = await import("./myModule.js");
    } catch(error) {
      ...
    }
})()

현재(2020-02-03)기준 import()구문은 Chrome 63 버전 이상, Firefox 67 버전 이상, Safari 11.1 버전 이상, 

Edge 79 버전 이상에서 사용할 수 있습니다.

5. BigInt

BigInt는 Number원시값의 표현 최대치인 2^53-1 보다 큰 값을 표현하고 싶을때 사용가능함.

BigInt를 사용하려면 정수값 뒤에 n을 붙이거나, BigInt(args)로 인자값을 넣어서 사용가능.

단점은 Match 메서드와 함께 사용할 수 없으며, Number 타입의 원시값과 같이 연산 할 수 없음.

// 정수 리터럴 방식
const bigInt1 = 9007199254740999n
// 생성자 함수 방식
const bigInt2 = BigInt(9007199254740998)

console.log(bigInt1 > bigInt2) // true
console.log(bigInt1 > bigInt2 + 2n) // false
console.log(bigInt2 + 2) // error

현재(2020-02-03)기준 BigInt는 Chrome 67 버전 이상, Firefox 68 버전 이상, 

Opera 54 버전 이상에서 사용할 수 있습니다.

6. String.prototype.matchAll

String.protorype.exec 메서드와 유사하게 동작하며, lastIndex로 부터 시작해서 정규표현식과 첫번째로 일치하는

하위 문자열의 정보를 반환하는 String.prototype.exec와 달리 일치하는

모든 하위 문자열의 정보를 포함하고 있는 이터레이터를 return 함

const regexp = /t(e)(st(\d?))/g
const str = 'test1test2'
const array = [...str.matchAll(regexp)]

console.log(array[0]) // ["test1", "e", "st1", "1"]
console.log(array[1]) // ["test2", "e", "st2", "2"]

현재(2020-02-03)기준 String.prototype.matchAll 메서드는 Chrome 73 버전 이상, Firefox 67 버전 이상, 

Opera 60 버전 이상에서 사용할 수 있습니다.

7. Promise.allSettled

Promise.allSettled 메서드는 인자로 받은 배열이나 iterable 객체를 통해 열거된 Promise 객체들이

모두 실행됐을 때 resolve하는 Promise 객체를 반환합니다.

Promise.allSettled 메서드는 Promise.all 메서드와 유사하지만, 

Promise.all 메서드는 열거된 Promise 객체들 중 하나라도 reject되면 자신도 reject하지만 

Promise.allSettled 메서드는 이행 여부와 상관없이 전부 다 실행되면 resolve합니다.

// 정수 리터럴 방식
const promise1 = Promise.resolve(10)
const promise2 = new Promise((_, reject) => setTimeout(reject, 100, 'foo'))
const promises = [promise1, promise2]

Promise.allSettled(promises).then(
  results => results.forEach(result => console.log(result.status)) 
  // "fulfilled", "rejected"
)

현재(2020-02-03)기준 Promise.allSettled 메서드는 Chrome 76 버전 이상, Firefox 71 버전 이상, 

Safari 13 버전 이상에서 사용할 수 있습니다.