ECMAScript 2020 aka ES11

2015년 6월 처음 ES6가 등장한 이후, 매년 6월 새로운 버전의 ECMAScript 명세가 발표되고 있습니다. 올해에는 ECMAScript 2020, ES11가 발표 예정입니다. TC39의 Stage 4(Finished Proposals)를 기반으로 어떤 기능들이 새롭게 추가되는지 알아보도록 하겠습니다. 

 

TC39? 

TC39는 Technical Committee 39의 약자로, ECMA-262(ECMAScript 표준 기술 규격) 명세를 관리하는 위원회입니다. Mozilla, Google, Apple, Microsoft 등의 메이저 브라우저 벤더사와 Facebook, Twitter 등 표준을 올바르게 구현해야 할 책임을 갖고 있으며, 언어 표준의 변화에 직접적으로 영향을 받는 단체들이 여기에 속해 있습니다. 

 

TC39 Process

매년 명세를 추가하고 발표하기 위해 TC39는 5단계(0~ 4단계)로 이루어진 TC39 Process를 정의하였습니다.  

• Stage 0 (strawman) : 브레인스토밍 단계. 자유롭게 아이디어 게재. 
• Stage 1 (proposal) : 아이디어를 구체화하고 명확한 형식을 갖추는 단계. 제안서 작성.
• Stage 2 (draft) : 제안하는 명세에 대한 문법을 명확히 정의. 실제로 표준에 포함될 경우 사용될 명세의 프로토타입.
• Stage 3 (candidate) : 제안하는 명세에 대해 최종 점검. TC39에 의해 최종 사인을 받는 단계

• Stage 4 (finished) : 다음 release에 포함되어 발표를 기다리는 단계. Stage 3의 결과물이 단위 테스트가 작성되고 최소 2개 이상의 구현이 제공되는 등의 추가 조건을 만족할 시 올라올 수 있는 단계. 

 

 

1)  String.prototype.matchAll

RegExp.prototpye.exec 메서드와 유사하게 동작하나, exec 메서드가 정규표현식과 첫 번째로 일치하는 하위 문자열의 정보를 반환한다면, matchAll은 일치하는 모든 하위 문자열을 포함하는 iterator를 반환합니다. 

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
 
 
let array = [...str.matchAll(regexp)];
console.log(array)      //Array [Array ["test1", "e", "st1", "1"], Array ["test2", "e", "st2", "2"]]
 
let execArr = [...regexp.exec(str)];
console.log(execArr)        //Array ["test1", "e", "st1", "1"]

 

2) import() 

모듈을 동적으로 불러들이는 메서드입니다. import 선언시 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어질 수밖에 없기 때문에, 이 점을 보완하기 위해 정의되었습니다.

요구하는 모듈의 네임스페이스 객체에 대한 Promise 객체를 반환하기 때문에 async/await 이나 then/catch를 사용하여 비동기 처리를 수행할 수 있습니다. 

//then/catch
import('/modules/my-module.js')
    .then((module) => {
        ...
    })
    .catch((error) => {
        ...
    })
 
//async/await
(async function importCheck() {
    const module = await import('/modules/my-module.js')
    ...
})()

 

3) BigInt

BigInt는 자바스크립트 내장객체로, number 타입의 최댓값인 2^53-1보다 큰 값을 표현하고 싶을 때 사용합니다. 정수 리터럴 뒤에 n을 붙이거나 BigInt() 생성자 함수를 이용하여 사용할 수 있습니다. 

const hugeInt = 1234567891263456789n
const hugeInt2 = BigInt(1234567891263456789)

단, BigInt는 Math 객체의 메서드와 함께 사용할 수 없고 Number와 연산할 수 없습니다. 따라서 서로 같은 자료형으로 형변환이 요구됩니다. BigInt와 Number 간 비교 연산은 가능하며  이 경우 일치(===) 하지는 않지만 동등(==)합니다.

 

4) Promise.allSettled

Promise 객체로만 구성된 iterable 객체를 인자로 받아  Promise의 이행 결과의 모음을 반환합니다. Promise.all 메서드와 유사하지만, Promise.all은 열거된 Promise 객체들 중 하나라도 rejected되면 실행이 종료됩니다. Promise.allSettled 메서드는 이행 여부와 상관없이 전부 다 실행되면 각각 Promise의 이행 결과를 반환합니다. 어떤 작업이 성공했고, 어떤 작업에 의해 reject 처리되었는지 알 수 없는 all메서드와 달리 allSettled는 각 Promise의 성공/실패 여부를 반환하므로 Promise를 병렬적으로 실행함과 동시에, 성공 여부에 따라 후처리가 필요하다면 allSettled 메서드를 사용하여야 합니다. 

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
 
Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));
 
// "fulfilled"
// "rejected"

 

5) globalThis

기존에는 javascript 실행환경에 따라 전역객체에 접근하는 방법이 달라, 브라우저 환경에서는 window, self, frames 등을 사용하여 접근하고 node.js 환경에서는 global을 사용하여 접근해야 했습니다. 여러 실행 환경에서 코드가 동작하게 하려면 별도의 예외처리가 필요했는데 globalThis를 사용하면 어떤 환경에서도 쉽게 전역객체에 접근이 가능합니다. 

//기존 방식 - globalThis를 사용할 경우 아예 필요없는 소스코드
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};
 
globalThis === window       //true

 

6) Optional Chaining Operator 

Optional Chaining Operator(?.)은 왼쪽 피연산자의 값이 null이거나 undefined일 경우 실행을 멈추고 undefined를 반환하는 연산자입니다. 

const user = {
  profile: {
   name: 'user01',
  }
}
 
const user1 = user?.profile
const user2 = user !== undefined && user !== null ? user.profile : undefined

7라인과 8라인은 동일한 동작을 수행하며, 따라서 user1과 user2는 동일한 profile이라는 객체를 가지게 됩니다.

 

7) Nullish Coalescing Operator

Nullish Coalescing Operator(??)는 논리연산자로, 왼쪽 피연산자의 값이 null이나 undefined일 경우 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자의 값을 반환하는 연산자입니다. 

const user = {
  profile: {
    name: '',
    age: 22
  }
}
 
const user1 = user.profile.name ||

nullish 연산자는 이름 그대로 nullish(null 이거나 undefined) 일 때 우측 피연산자를 반환하며, || 연산자는 falsy(null 이거나 undefined 또는 '', 0) 일 경우 우측 피연산자를 반환합니다. 따라서 0이나 공백('')이 의미를 가지는 경우 ?? 연산자를 사용하면 됩니다.