ZeroCho Blog

안녕하세요. 이번 시간에는 ES2018(ES9)에서 추가된 기능에 대해 알아보겠습니다. 2018년이 되었으니 EcmaScript도 2018 버전이 나왔겠죠? 같이 살펴봅시다. 작년 ES2017의 Stage-3 기능들이 대거 정식 스펙으로 추가되었습니다.

Object rest, spread

가장 자주 쓰게 될 기능입니다. 객체 해체와도 비슷한데요. 배열을 해체하던 것처럼 객체를 해체할 수 있습니다.

먼저 rest는 선택되지 않은 나머지 속성들을 모아주는 기능을 합니다. rest를 할 때 값은 복사하고, 객체는 참조합니다.

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3}
const { d, g, ...rest2 } = { d: 4, e: { f: 6 }, g: 7, h: 8 }
console.log(rest2); // { e: { f: 6 }, h: 8 } ( { f: 6 }은 복사가 아니라 참조)

spread는 Object.assign과 비슷한 기능(다른 점도 있습니다. 배열과 객체를 혼합 처리할 때 조금 다릅니다.)을 합니다. 역시 값은 복사하고, 객체는 참조합니다. 만약 같은 속성명이 있다면 뒤의 것이 앞의 것을 덮어씌웁니다.

const obj = { a: 1, b: 2, c: 3 };
const spread = {
  a: 3,
  d: 4,
  ...obj,
};
console.log(spread); // { a: 1, b: 2, c: 3, d: 4 } (a: 3이 덮어씌워짐)
const spread2 = {
  a: 2,
  c: 4,
  ...obj,
  a: 3,
  b: 5,
};
console.log(spread2) // 맞춰보세요

콘솔이 어떻게 나올지 맞춰보세요! 답은 { a: 3, b: 5, c: 3 }입니다.

Promise finally

Promise에 then과 catch 외에도 finally가 추가되었습니다. 이름만 보면 바로 감이 오시겠지만 Promise 성공, 실패 여부와 상관없이 무조건 실행되는 메서드입니다.

Promise.resolve('hello')
  .then((msg) => Promise.resolve(msg))
  .finally(() => console.log('finally!'))
  .then((msg) => console.log(msg)); // 콘솔에 finally와 hello가 찍힘

위의 예제처럼 finally 뒤에 다시 then이나 catch를 붙일 수도 있습니다. 스펙에 따르면 finally에서 return하는 프로미스는 resolve 값은 바꿀 수 없고, reject 값만 바꿀 수 있다네요.

Async iteration

async 문법을 생성기랑 for of 문에서 사용 가능합니다. 비동기 반복 프로그래밍을 하시는 분들께는 희소식이겠네요. 지금까지는 async와 반복문을 같이 쓰기 힘들어서 그냥 프로미스로 코딩하고 Promise.all로 한 번에 처리하곤 했는데요. 생성기와 for of 문에서 사용가능할 수 있게 되면서 반복적인 비동기 작업을 쉽게 처리할 수 있게 되었습니다.

async function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
const itr = gen();
itr.next().then((it) => {
  console.log(it.value); // 1
});

for of 문에도 다음과 같은 문법이 가능합니다.

(async() => {
  const promises = ['1000', '2000', '3000'].map((timer) => (
    new Promise((res, rej) => {
      setTimeout(() => res(timer), timer);
    })
  ));
  for await (const result of promises) {
    console.log(result);
  }
})();

Promise.all 외에도 비동기 반복 처리에 옵션이 하나 더 생겼습니다!

정규표현식

정규표현식도 강화되었습니다. lookbehind가 생기고, 캡쳐링 그룹에 이름을 정해줄 수 있습니다. s 플래그가 추가되어 .(점)의 기능이 강화되었습니다. 이제는 \n도 매칭합니다.

/zero.cho/s.test('zero\ncho') // true
/zero.cho/.test('zero\ncho') // false

s 플래그가 붙은 것과 안 붙은 것의 차이가 보이시죠?

그리고 유니코드를 위한 u 플래그가 추가되어, 특정 유니코드를 정규표현식으로 표현 가능합니다.

lookbehind가 뭐냐면, 특정 문자열 뒤의 문자열을 찾는 기능입니다. 예를 들면, 바보 뒤의 제로초를 찾으라고 하면 "바보제로초 천재제로초", 이렇게 찾아줍니다. (천재 뒤의 제로초는 찾지 않습니다) 지금까지 자바스크립트 정규표현식은 특정 문자열 앞의 문자열만 찾을 수 있었습니다. 이제 뒤의 것까지 찾아주니 참 좋죠. 이를 위해 ?>=와 ?>! 심볼이 추가되었습니다.

캡쳐링 그룹에 이름도 붙여줄 수 있습니다. 캡쳐링 그룹이란 정규 표현식에서 괄호로 묶어준 것들을 의미합니다. 보통 괄호 순서대로 1번, 2번, 3번 이렇게 번호로 이름이 매겨지는 것을 이제 사용자가 직접 지정할 수 있습니다. 이렇게 매겨진 이름은 결과의 groups 속성으로 접근할 수 있습니다.

const result = /(?<babo>바보)(?<name>제로초)/.exec('바보제로초');
result.groups.babo; // 바보
result.groups.name; // 제로초
result.groups[1]; // 바보
result.groups[2]; // 제로초

내년에 추가될 스펙도 기대가 됩니다! 내년에 추가될 스펙들은 stage-3부터 stage-0까지를 보면 대충 유추할 수 있습니다. 다음 주부터 stage-3 정리를 시작해보겠습니다.