2019년의 JavaScript ES2019 예상

Language/JavaScript

2019년의 JavaScript ES2019 예상

SambaLim 2019. 1. 27. 22:52

이 글은 What's New in JavaScript for 2019에 대한 번역본입니다.

직접 번역한 것으로 퍼가실 때는 출처를 남겨주시고 오류가 있다면 댓글로 이야기해주시면 감사하겠습니다.

2019년의 JavaScript는?

지난 몇 년동안 JavaScript는 새로운 기능들과 함께 진화해왔습니다.

만약 JavaScript의 다음 버전에 대해 궁금하시다면, 이 글은 당신을 위한 글입니다!

우리가 최신의 JavaScript 기능들을 이야기하기 앞서서 JavaScript에 최신의 기능들이 추가되는 방식에 대한 이해가 필요합니다.

JavaScript에 새로운 기능 추가 프로세스

JavaScript를 구동하는 언어 사양을 ECMAScript라고 합니다. ECMA 그룹에서는 JavaScript의 새로운 기능을 추가할 때, 언어의 사양의 변경을 검토하고 채택하는데 그 역할은 Technical Committee 39 ( TC39 )에서 합니다. TC39는 ECMAScript을 변경할 때, 성숙한 단계에 다다를때 까지 표준화된 프로세스를 거칩니다.

0단계 : 아이디어 (Strawman)
1단계 : 정식 제안 (Proposal)
2단계 : 초안 (Draft)
3단계 : 후보 (Candidate)
4단계 : 승인 (Finished)

언어의 기능이 4단계에 도달할 때까지, 새로운 기능들은 ECMAScript의 일부가 될 것이라고 보장할 수는 없습니다. 하지만 Chrome과 Node.js에서 사용하는 구글의 V8, FireFox의 SpiderMonkey와 같은 자바 스크립트 엔진 구현은 개발자가 테스트하고 이에대한 피드백을 제공할 수 있도록 4단계에 도달하지 않은 기능을 실험적으로 추가할 수 있습니다.

현재 ES2019 후보자

이 글을 쓰는 시점에서, TC39 제안중 4단계에 해당하는 제안은 없습니다. 하지만 3단계에 해당하는 후보들이 있습니다.

3단계에 해당하는 후보들에 대해 이야기하므로 최종 ES2019 언어 사양에 이러한 제안이 포함되지 않을 수 있음을 미리 알려드립니다. 이러한 제안 중 몇가지는 수 년동안 고려되어 왔으며, 최종적으로 구현된 것은 현재의 3단계에 해당하는 후보자들과 달라질 수도 있습니다.

JavaScript 클래스의 변경 사항

필드 선언, 개인 메서드 및 필드, 정적 메서드 및 필드를 비롯하여 클래스에 제안 된 변경사항들이 상당 수 있습니다. 다음은 이러한 변경 사항의 예시입니다.

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;
    }
  }
}

개인적으로는 #구문이 private method를 찾는 방식을 선호하지 않습니다. JavaScript도 다른 언어와 마찬가지로 private를 사용하는 것을 선호합니다.

문자열 trimStart() 및 trimEnd()

String Type에는 trim()한 문자열의 시작과 끝 모두에서 공백을 제거하였습니다. trimeStart()와 trimeEnd() 방법은 공백 제거에 대한 추가적인 방법을 제공합니다.

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

이 언어 기능에 대한 흥미로운 점은 이미 많은 JavaScript엔진에서 구현되고 있다는 점입니다. 이 것은 browser가 언어의 발전을 돕는 많은 경우들중 하나입니다.

BigInt로 더커진 Number

우리는 2^53(2의 53승) 보다 더 큰 정수를 표현하기 위해 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에 대한 사용사례들과 gotchas에 대해 더 많이알아보실 수 있습니다.

flat() 과 flatMap()을 사용한 배열의 평탄화

함수형 프로그래밍을 학습하였다면, flat()과 flatMap()을 이미 알고 있으실 겁니다. flat()은 배열의 값들을 가질 수 있도록 만들어졌습니다. 이 값들 중 일부는 일부는 더 많은 배열들일 수 도 있으며, 1차원의 배열을 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은 배열을 반환할 수 있으며, 최종 결과는 여러 차원으로 쌓인 배열이 아닌 1차원 배열로 평탄화됩니다.

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" ]

ES2019의 더 많은 후보들

이 글을 쓰고있는 현재 3단계의 후보자 목록들 입니다.

표준화된 globalThis 객체
Dynamic import()
Legacy RegExp features
String matchAll()
Object.fromEntries()
Well-formed 'JSON.stringify'
Standardized Hashbang for command-line interface (CLI) applications

ES2019는 언제로 예상되는가?

지난 몇 년 동안 TC39는 6 월에 지속적으로 ECMA-262 ECMAScript 언어 사양의 새 버전을 출시했습니다. 이번 6 월에 ES2019이 발표 될 가능성이 높습니다.

오늘 ES2019의 기능들을 사용하고자 한다면

제안 된 언어 기능 중 일부는 이미 JavaScript 엔진 및 유틸리티에서 사용할 수 있습니다. 이러한 새로운 기능은 기본적으로 비활성화되어 있지만 구성을 사용하여 활성화 할 수 있습니다.

Babel 7.0 이상에서 테스트

Babel 은 모든 브라우저 및 환경에서 아직 지원되지 않을 수있는 최신 언어 기능을 사용할 수있게 해주는 JavaScript 유틸리티입니다. "현대적인"JavaScript를 작성하면 Babel은 코드를 이전 엔진과 호환되는 동등한 구문으로 변환합니다.

Babel은 플러그인을 사용하여 실험 언어 기능을 지원합니다 . Babel은 지원되는 ECMAScript 제안 목록을 공식 저장소에 보관합니다.

JavaScript와 ES의 미래에 대해 더 알고 싶으시다면

JavaScript에 대해 더 알고 싶으시다면, 아래의 유용한 자료들을 확인하세요,

만약 흥미가 더 있으시다면, ES2015, ES2016 및 ES2017과 같은 이전 버전 의 ECMAScript를 읽을 수 있습니다.

'Language > JavaScript' 카테고리의 다른 글

자바스크립트 고차함수 (0)	2019.08.27
자바스크립트 클로저 (0)	2019.08.08
자바스크립트 스코프 (0)	2019.08.03
자바스크립트 일급함수 (0)	2019.08.02
자바스크립트의 프로토타입 (0)	2019.05.24

현재글2019년의 JavaScript ES2019 예상

삼바의 성장 블로그