ES2019의 새로운 기능


원문: https://developer.okta.com/blog/2019/01/22/whats-new-in-es2019#the-process-for-new-javascript-language-features_

1

지난 몇 년 동안 자바스크립트는 새로운 언어로 꾸준하게 진화해왔다. 다음 버전의 자바스크립트 기능에 대해 궁금했다면 이 글이 도움이 될 것이다.

먼저, 최신 기능에 관해 얘기하기 전에 아이디어가 자바스크립트의 일부가 되는 방식을 이해하는 게 중요하다.

새로운 자바스크립트 기능이 되는 과정

요컨대, 자바스크립트의 언어 스펙은 ECMAScript라고 부르며, 이는 Ecma International의 기술 위원회 TC39에서 검토하고 채택한다. ECMAScript 명세를 변경할 때에는 성숙도에 따라 단계(stage)별로 나누어진 표준 프로세스를 거친다.

  • Stage 0: 구상
  • Stage 1: 정식 제안
  • Stage 2: 초안
  • Stage 3: 후보
  • Stage 4: 승인

Stage 4에 도달할 때까지 ECMAScript 스펙에 공식적으로 포함될 것이라는 보장은 없다. 하지만 V8(Chrome과 Node.js에서 사용하고 있는)이나 파이어폭스의 스파이더 몽키(SpiderMonkey) 같은 자바스크립트 엔진 구현체들은 Stage 4에 도달하기 전에 개발자 테스트와 피드백을 받을 수 있도록 제안된 실험적인 기능을 지원한다.

현재 ES2019 후보 기능

아직 이 글을 쓰는 시점까지(이 글을 번역하는 시점에도) Stage 4에는 새로운 TC39의 제안은 없다. 하지만, Stage 3 후보 기능들을 미리 만나볼 수 있다.

주의: Stage 3의 후보들이므로 최종 ES2019 스펙에 포함되지 않을 수 있다. 
    사실, 이 제안 중 몇 가지는 수년 동안 고려된 것도 존재한다. 따라서 최종 스펙의 형태나 동작이 현재 제안과 다를 수 있다.

자바스크립트 클래스에서의 변화

필드 선언, private 메서드와 필드, static 메서드와 필드를 포함하여 클래스에 제안된 변경사항이 존재한다. 다음은 그에 관한 예시이다.

class Truck extends Automobile {
  model = "Heavy Duty"; // public 필드 선언
  #numberOfSeats = 5; // private 필드 선언
  #isCrewCab = true;
  static #name = "Truck"; // static private 필드 선언

  // static 필드 메서드
  static formattedName() {
    // 'this' 대신 static 필드로 Truck 클래스의 name에 접근 할 수 있다.
    return `This vehicle is a ${ Truck.#name }.`;
  }

  constructor( model, seats = 2 ) {
    super();
    this.seats = seats;
  }

  // private 필드 메서드
  #getBodyType() {
    return this.#isCrewCab ? "Crew Cab" : "Standard Cab";
  }

  bodyType() {
    return `${ this.#numberOfSeats }-passenger ${ this.model } ${ this.#getBodyType() }`;
  }

  get seats() { return this.#numberOfSeats; }
  set seats( value ) {
    if ( value >= 1 && value < 7 ) {
      this.#numberOfSeats = value;
      this.#isCrewCab = value > 3;
    }
  }
}

개인적으로 hash(#) 구문으로 private을 표현하는 것을 좋아하지 않는다. 다른 언어들처럼 private 키워드를 채택하는 것이 더 좋을 것 같다는 게 개인적인 의견이다.

String의 trimStart() 와 trimEnd()

String 자료형에는 이미 문자열의 시작과 끝 공백 문자를 제거하는 trim()메서드가 존재한다. 제안된 trimStart()trimEnd() 메서드는 추가로 문자열의 앞과 뒤를 분리해서 제어할 수 있게 한다.

const one = "      hello and let ";
const two = "us begin.        ";
console.log( one.trimStart() + two.trimEnd() ) // "hello and let us begin."

흥미로운 점은 이미 많은 자바스크립트 엔진에서 이미 이 기능을 구현했다는 점이다. 이런 부분들은 브라우저가 언어를 발전시키는데 큰 도움을 주고 있다는 것을 의미한다.

더 큰 숫자, BigInt

BigInt는 새로운 원시 자료형이며 현재 자바스크립트에서 나타낼 수 있는 최댓값인 2^53보다 더 큰 값을 나타낼 수 있다. BigInt을 선언하는 여러 방법은 밑에서 확인할 수 있다.

// 현재 
const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991

// 'n' 구문을 이용하여 BigInt를 사용했을 때 
const ABiggerInteger = 9100000000000001n;

// BigInt() 생성자를 사용했을 때
const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n

// BigInt() 생성자를 문자열과 사용했을 때
const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n

BigInt에 대한 더 자세한 사용 사례와 문제는 다음 글을 참고하라.

flat() 와 flatMap()를 이용한 배열 펼치기

만약 함수형 프로그래밍에 대해 공부한 적이 있다면, flat()과 flatMap()에 대해 쉽게 이해할 수 있을 것이다. flat()은 값의 배열 혹은 더 많은 배열을 받아 새로운 1차원 배열을 반환하도록 설계되었다.

const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]];
// .flat() 은 depth를 나타내는 매개변수를 옵션으로 받는다.
const ahhThatsBetter = nestedArraysOhMy.flat( 2 );
console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ]

flatMap()map()과 비슷하지만, 콜백 함수가 배열을 반환하더라도 최종 결과물은 중첩된 배열이 아니라 1차원으로 펼쳐진 배열이 된다.

const scattered = [ "my favorite", "hamburger", "is a", "chicken sandwich" ];

// 중첩된 배열에서 map()의 결과이다.
const huh = scattered.map( chunk => chunk.split( " " ) );
console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ]

// flatMap() 은 결과의 배열을 합친 결과를 반환한다.
const better = scattered.flatMap( chunk => chunk.split( " " ) );
console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]

그 외의 ES2019 후보 기능

다음은 위에서 언급한 기능을 제외한 Stage3 기능이다.

언제 ES2019가 나올까?

지난 몇 년간, TC39는 지속해서 새로운 ECMA-262 ECMAScript 스펙을 6월에 발표했다. 올해 6월에 ES2019가 발표될 가능성이 가장 높다.

ES2019 미리 사용해보기

제안된 기능들 중 이미 자바스크립트 엔진 및 유틸리티에서 사용할 수 있는 기능이 있다. 새로운 기능들은 기본적으로 비활성화되어 있지만 설정을 활성화하여 사용할 수 있다.

최신 Node.js에서 테스트하기

Node.js는 Chrome V8 엔진을 사용한다. V8 엔진이 일부 후보 기능들을 지원하기 때문에 최신 버전의 Node.js에서 이 기능들을 사용해 볼 수 있다.(e.g Array.prototype.flat, String.prototype.trimEnd).

--harmony-{feature-flag} 커맨드 라인 옵션을 통해 새로운 기능들을 가능하게 한다. 사용중인 Node.js에서 지원하는 후보 기능을 보려면 --v8-options 옵션을 사용한다. 후보 기능들 중 일부는 "in progress."로 표시된다.

macOS / Linux

node --v8-options | grep "in progress"

Windows

node --v8-options | find "in progress"

2

예를 들어 필드선언과 static 메소드를 Node.js 어플리케이션에서 사용하고 싶다면, CLI 옵션을 사용할 수 있다.

node --harmony-class-fields --harmony-static-fields index.js

Babel 7.0+에서 테스트하기

Babel은 모든 브라우저 및 개발환경에서 아직 지원하지 않을 수 있는 최신 기능들을 사용할 수 있게 해주는 유틸리티이다. "모던" 자바스크립트를 작성하면, Babel은 작성한 코드를 오래된 엔진에서 사용할 수 있는 구문으로 변환한다.

Babel 플러그인은 여러 실험적인 기능들을 지원한다. 또한 Babel은 공식 저장소에 ECMAScript에서 제안된 기능 목록을 보관한다.

자바스크립트와 ES Next에 좀 더 배우고 싶다면

자바스크립트에 대해 좀 더 궁금한 사람들을 위한 글을 준비했다.

관심이 있다면 ES2015, ES2016, ES2017 같은 이전 버전의 ECMAScript 스펙을 확인 할 수 있다.


한정, FE Development Lab2019.03.14Back to list