ZeroCho Blog

안녕하세요. 이번 시간에는 ES2019로 채택될 유력 후보인 stage-3에 대해 알아보겠습니다!

stage-3이란 이름에서 유추할 수 있듯, stage-2도 있고, stage-1도 있습니다. stage-4와 stage-0도 있습니다. 각각의 stage가 무엇을 의미하는 지 궁금하시죠? 각각의 stage에는 이름이 붙어 있습니다.

stage-4는 Finished(종료), stage-3는 Candidate(후보), stage-2는 Draft(초안), stage-1은 Proposal(제안), stage-0은 Strawman(허수아비)입니다. 허수아비라는 이름이 재미있네요. 언제든지 스펙 후보에서 탈락할 위험에 처해있는 것들입니다.

stage-4는 정식 채택된 친구들입니다. stage-3인 얘들이 정식 채택된다면 stage-4로 이동되어 내년에 나오는 ES2019가 될 겁니다. stage-3은 가장 유력한 후보들인 것이죠. stage-2, stage-1의 것들은 한 두 단계를 더 올라와야 가능합니다.

보시다시피 현재 대부분의 브라우저가 지원하지 않습니다. 표는 http://kangax.github.io/compat-table/esnext/ 에 있습니다. 따라서 이 번 시간의 예제들은 콘솔에 치지 마시고 눈으로만 봐 주세요. 그냥 이런 기능이 내년에 추가되겠구나 하시면 됩니다. stage-3을 실제로 사용하고 싶으시다면 npm에서 @babel/preset-stage-3을 설치하시면 됩니다.

새로운 객체

global 객체가 생겼습니다. global은 Node.js의 global과 같은 전역 객체입니다. Node.js 스펙과의 통일성을 위해 추가된 듯 합니다. 브라우저에서는 window와 같습니다.

문자열의 변화

문자열에 trim이라는 메소드가 있었죠. 양 쪽 공백을 제거해주는데요. 왼쪽 또는 오른쪽만 trim할 수 있는 메소드가 생겼습니다. 탭 문자(\t)와 개행 문자(\n) 모두를 제거해줍니다. 왼쪽을 제거하는 메소드는 trimLeft 또는 trimStart고, 오른쪽을 제거하는 메소드는 trimRight 또는 trimEnd입니다.

'     zerocho     '.trimLeft(); // 'zerocho     '
'     zerocho     '.trimStart(); // 'zerocho     '
'     zerocho     '.trimRight(); // '     zerocho'
'     zerocho     '.trimEnd(); // '     zerocho'

이외에도 matchAll이라는 정규표현식에 부합하는 값들을 이터레이터로 돌려주는 프로토타입 메서드가 추가되었고, toString이 신규 스펙에 맞게 개선되었습니다.

class properties && private fields

클래스의 속성을 더이상 constructor 안에 넣지 않아도 됩니다. 그냥 class 안에 선언하듯 적어주면 됩니다. 리액트를 쓰는 분들은 익숙할 것입니다.

추가로 private 속성도 생겼습니다. 객체 지향적인 부분이 강해지네요. 그동안 자바스크립트에 private 속성 지정이 없어서 다른 방법으로 흉내냈어야 했죠. 바벨에서도 class properties는 되지만 private 필드는 지원하지 않아 실험해볼 수가 없었습니다. 하지만 이제는 자바스크립트 자체에 곧 도입될 것으로 보입니다.

class ZeroCho {
  #weight;
  constructor(w) {
    this.#weight = w;
  }
  year = 1994;
  getWeight() {
    return this.#weight;
  }
}

new ZeroCho().year; // 1994
new ZeroCho(68).getWeight(); // 68

#으로 이 속성이 private임을 나타냅니다. constructor를 통해 private 속성에 값을 지정하는 것을 볼 수 있습니다. private 속성이기 때문에 ZeroCho.#weight으로 직접 접근은 불가능하고요. getWeight같은 getter 메소드를 통해서만 값을 가져올 수 있습니다. 또는 #weight = 68; 이렇게 class properties를 사용해 처음부터 값을 넣어줄 수도 있습니다.

Array 메서드 추가

배열 프로토타입 메서드에 flatten과 flatMap이 추가되었습니다. 편의성이 향상된 것이라 보시면 됩니다. 특히 flatten은 눈물나게 편리합니다.

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flatten(); // [1, 2, 3, 4, [5, 6]]
arr2.flatten(2); // [1, 2, 3, 4, 5, 6]

flatten은 배열 내부의 배열을 일자로 펴줍니다. 기본적으로는 1단계만 펴주지만, 인자로 몇 단계까지 펼지를 알려주면 그만큼 펴줍니다.

var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // only one level is flattened
arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

flatMap은 그냥 map 후에 flatten 1단계를 하는 거라고 보시면 됩니다.

Optioncal Catch

이제 catch의 매개변수를 쓰지 않는 경우, error을 생략해도 됩니다.

try {

} catch (error) {

}

지금까지는 위와 같이 했어야 했지만, 앞으로는 다음과 같이 error을 쓰지 않을 수 있습니다.

try {
  new Error('hello');
} catch {
  console.error('에러가 나든지 말든지');
}

숫자의 변화

숫자 자료형에서 신기한 변화가 많이 추가되었습니다. 자바스크립트에서는 숫자가 크면 자리수 구별이 어려웠는데요. 다음과 같이 할 수 있습니다.

1_000_000.000_001 === 1000000.000001

조금 요상하기는 하지만, 훨씬 보기는 좋네요.

그리고 BigInt라는, 2의 53승보다 더 큰 Int들을 다루는 것이 추가될 것이라 하네요. 아직 구현체가 없어 살펴보지는 못했습니다.

다음 시간에는 stage-2에 대해 알아보겠습니다!