[Javascript] ES11 (ECMAScript 2020)

ES11 에서 추가된 기능들에 대해서 알아보겠습니다.

 

1. Optional Chaining(?.)

2. globalThis

3. Nullish coalescing Operator(??)

 

4. Dynamic import

5. BigInt

6. String.prototype.matchAll

7. Promise.allSettled

 

1. Optional Chaining (?.)

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

 

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

 

?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없습니다.

?.은 할당 연산자 왼쪽에서 사용할 수 없습니다.

 

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet";

// SyntaxError: Invalid left-hand side in assignment // 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

2. globalThis

전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다 먼저 실행되는 특수한 객체입니다.

기존에는 js 실행환경에 따라서 

  - 클라이언트 사이드 환경(브라우져) 에서는 window, self, frames, this, global 을 사용해서 접근했고,

  - 서버 사이드 환경(노드환경) 에서는 global 을 통해서 접근했습니다.

 

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

 

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

globalThis === window // true

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

 

3. Nullish coalescing Operator (??)

Null 병합 연산자입니다.

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

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

왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy 값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR (||)와는 다르게 ??를 사용하면 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'

 

4. Dynamic import

import(module) 표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프라미스를 반환합니다. 호출은 어디서나 가능합니다.

코드 내 어디에서 동적으로 사용할 수도 있습니다.

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

let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");

import(modulePath)
  .then(obj => <모듈 객체>)
  .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)

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

let {hi, bye} = await import('./say.js');

hi();
bye();

 

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

 

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"]

 

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"
)