TOAST UI

Applications

Chart Editor Grid Calendar Image-editor

Components

App Loader Auto Complete Color Picker Context Menu Date Picker Pagination Rolling Select Box Time Picker Tree

Tools

TOAST UI Doc ESLint Config Release Note

FE Guide

Posts

ES2019의 새로운 기능

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

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

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

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

요컨대, 자바스크립트의 언어 스펙은 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" ]