What’s New in JavaScript for 2019 (Korean Translation) (한국어 번역)

위글은 David님의 “What’s New in JavaScript for 2019”글을 번역한 글입니다.

원본 글

최근 몇년 동안, JavaScript는 새로운 언어의 특징들과 함께 꾸준히 발전해오고 있습니다. 만약 여러분이 다음 버전의 자바스크립트가 궁금하다면 이 글은 여러분의 것입니다.
우리가 최신 기능들을 이야기하기 전에 어떻게 새로운 아이디어가 Javascript의 부분이 되었는지 이해하는 것이 중요합니다.

새로운 JavaScript 언어 특징을 위한 과정

간단히 말하면 JavaScript를 구동하는 언어의 설명서를 ECMAScript라고 부릅니다. 언어 설명서의 변화를 채택하고 review하는 국제 ECMA group은 기술위원회 39, 혹은 TC39로써 ECMAScript의 설명서의 변화는 분별 있는 과정을 포함한 표준화된 과정을 거칩니다.

• Stage 0 : 생각, ideas
• Stage 1 : 정식적인 제안
• Stage 2 : 초안
• Stage 3 : 후보들
• Stage 4 : 승인

새로운 언어의 특징이 이 4단계를 거칠때 까지 정규 ECMAScript 언어 설명서에 일부가 될 방법이 없지만 V8(Chrome과 Node.js에 의해 사용된)과 같은JavaScript 엔진 구성품과 Firefox’s의 Spider Monkey는 4단계를 다 거치기 전에 기능들을 가진 경험적 지원을 추가할 수 있습니다, 그래서 개발자들은 테스트할 수 있고 피드백을 제공합니다.

현재 ES2019 후보들

지금 글을 쓰는 시간에는 TC39의 4단계를 거친 후보들은 없으나 3단계까지 진행된 후보들은 있습니다.

면책 조항 : 아직 3단계에 있어서 이 제안들이 ES2019 설명서에 포함되지 않을 수 있습니다. 사실 몇몇 제안들은 수년 동안 계속하여 고려된 것들입니다. 또한, 최종 ES2019 구성품들은 현재 후보들과 다르게 보이거나 작동될 수 있습니다.

여기에 클래스에 대한 몇 가지 변화를 제안들이 있는데 필드 선언(field declarations), 사적인 메소드와 영역(private methods and fields), 정적 메소드와 영역(static methods and fields) 등이 있습니다. 다음은 예시를 살펴봅시다.

영어로 된 단어에 대한 번역은 이해도를 높이기 위해 원어를 쓰고 영어 자체로 번역하겠습니다. (ex 메소드)

class Truck extends Automobile {
  model = "Heavy Duty"; // public field declaration
  #numberOfSeats = 5; // private field declaration
  #isCrewCab = true;
  static #name = "Truck"; // static private field declaration

  // static method
  static formattedName() {
    // Notice that the Truck class name is used
    // to access the static field instead of "this"
    return `This vehicle is a ${ Truck.#name }.`;
  }

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

  // Private method
  #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;
    }
  }
}
view

개인적으로, 저는 private members를 찾기 위해 # 구문을 사용하는 것이 마음에 들지 않습니다. 저는 Javascript 언어 설명서가 다른 언어들과 같은 목적으로 private키워드를 채택하는 것을 원하였습니다.

String trimStart() and trimEnd()

String 타입은 string 값의 앞이나 끝으로부터 공백을 제거하는 trim 메소드를 갖습니다. trimStart와 trimEnd 메소드는 공백을 제거하는 것을 넘어 추가적인 control이 가능할 것입니다.

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

언어의 특징에 대한 작은 Interesting은 이것은 이미 많은 JS 엔진의 구성품이라는 것입니다. 이것은 브라우저가 언어의 발전에 도움을 주는 많은 케이스 중 하나입니다.

Bigger Numbers with BigInt

우리는 현재 가장 큰 값인 ²⁵³ 보다 더 큰 숫자를 BigInt로 볼 수 있습니다. BigInt는 몇 가지 다른 방식으로 선언될 수 있습니다.

// for reference
const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991

// use the 'n' syntax to declare a BigInt
const ABiggerInteger = 9100000000000001n;

// use the BigInt() constructor
const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n

// use the BigInt() constructor with a string
const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n

BigInt에 관한 사용이 궁금하면 여기를 참고하세요.

Flatten Arrays with flat () and flatMap()

만약 여러분이 함수형 프로그래밍을 공부했다면 여러분은 flat과 flatMap을 알고 있을 것입니다. Flat()는 배열의 값을 얻기 위해 디자인 됐고, 그중 일부는 더욱 많은 배열을 가질 수 있고 새로운 차원의 배열을 return할 것입니다.

const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]];
// .flat() takes an optional depth argument
const ahhThatsBetter = nestedArraysOhMy.flat( 2 );
console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ]

flatMap()은 map()과 비슷합니다. 그러나 callback은 배열에 return할수 잇고, 마지막 결과는 중첩된 배열 대신 일차원의 배열로 변형될 것입니다.

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

// regular map() results in nested arrays
const huh = scattered.map( chunk => chunk.split( " " ) );
console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ]

// flatMap() concatenates the returned arrays together
const better = scattered.flatMap( chunk => chunk.split( " " ) );
console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]

More Proposed ES2019 Candidates

아래에는 현재 글을 쓰는 시점에 3단계 후보들입니다.

• Standardized globalThisobject
• Dynamic import()
• Legacy RegExpfeature
• import.meta
• String matchAll()
• Object.fromEntire()
• well-formed JSON.stringfy
• standardized Hashbangfor command-line interface (CLI) applications

When to Expect ES2019

과거 몇 년 동안 TC39는 6월에 ECMAScript 언어 설명서에 새로운 변경들을 계속하여 released 했습니다. 그렇기에 ES2019가 6월에 released 될 것으로 기대합니다.

Try out ES2019 Features Today

몇몇 언어의 특징들은 JS엔진이나 utilties에서 이용이 가능합니다. 몇 가지 새로운 특징들은 default에 의해서 사용할 수 없지만, configuration을 통해 사용이 가능합니다.

Test with the lastest version of Node.js

Node.js는 크롬 V8 엔진을 사용합니다. 몇 가지 후보들은 V8이 지원하기 때문에 Node.js 최신 버전을 사용합니다. (예를 들면 Array.prototype.flat 과 String.prototype.trimEnd)
여러분은 커맨드 라인 options —harmony-{feature-flag}을 사용하며 다른 언어들의 특징을 이용할 수 있습니다. 여러분이 어떤 Node.js 버전을 지원하는지 보기 위해서는 —-v8-options를 사용하시면 됩니다. 몇 후보들은 “in progress”라는 이름을 있을 겁니다.

macOS / Linux

node —v8-voptions | grep “in progress"

Windows

node —v8-options | find “in progress"

예를 들어 정적 메소드나 필드 선언을 사용하는 class를 가지고 있는 Node.js 어플리케이션을 구동시키기 위해서는 당신은 CLI options를 사용해야 합니다.

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

Test with Babel 7.0+

Babel은 당신이 아직 브라우저나 기초 환경에서 제공하지 않는 최신 언어 특징들을 사용하기 위한 JS 유틸리티입니다. 당신이 modern JavaScript를 사용함으로써 Babel은 당신의 코드를 오래된 엔진에 적합한 구문으로 translates 해줍니다.

Babel은 plugin들을 사용하면서 실험적인 언어의 특징들을 지원해줍니다. Babel은 공식 저장소에서 실험적인 ECMASCript를 지원하는 리스트를 가지고 있습니다.

Learn More About JavaScript and ES Next

JavaScript를 더 배우길 원한다면 아래의 유용한 resources들을 확인하세요!

• Learn JavaScript in 2019!
• The History (and Future) of Asynchronous JavaScript
• Build a Secure Node.js Application with JavaScript Async Await Using Hapi
• Use TypeScript to Build a Node API with Express

만약 당신이 관심이 있으시다면 이전의 ES2015, ES2016 같은 previous editions를 읽어보세요.

첫 번역이었습니다. 많은 피드백과 따끔한 충고 부탁드립니다!