ES2019 무엇이 달라졌나요?

ES10 ES2019 달라진점을 찾아보아요

2019-11-09

JavaScript

최근(?) ES2019(ES10)가 발표되었습니다.
어떤 차이점이 있는지 간략하게 정리해보고자 합니다.

본 문서는 제일 하단 Reference의 사이트를 번역한 문서입니다.
오역이나 오타는 언제든 알려주세요! 감사합니다.

ES2015가 발표된 이후로 JavaScript는 빠른속도로 발전을 해왔습니다. 매년 새로운 기능들이 JavaScript에 추가되고 있습니다. JavaScript를 위한 새로운 구문이나 함수가 지속적으로 추가되었습니다.

ES2016과 ES2017에서는 Object객체와 같은 Object values와 Object.entries이 추가되었습니다. ES2017에는 String함수애 padStart와 padEnd이 추가되었고, async, await는 promises를 묶기위한 짧은 구문도 추가되었다. 배열을 위한 includes함수는 ES2016에 추가되었습니다. ES2018에는 또다른 새롭고 많은 기능들이 추가되었습니다. ES2018에는 객체 리터럴을 위한 spread기능이 사용가능해졌고, Rest 파라메터도 추가되었다. for await...of 순차적 실행을 보장하여 반복하는 구문으로 함께 추가되었습니다. SharedArrayBuffer는 분리될 수 없는 raw binary data를 나타내는 객체가 추가되었습니다. finally 함수는 Promise객체와 함께 추가되었습니다.

2019년에는 더 새로운 JavaScript기능이 추가되었습니다. 2019년의 릴리즈에는 더 많은 배열과 String을 위한 함수가 추가되었습니다. catch함수에는 더이상 필요없는 바인딩을 하지 않아도 됩니다. 즉, catch키워드 뒤에 변수를 요구하지 않습니다.

Symbol에 description함수가 추가되었고, Function객체의 toString은 함수의 모든 문자들을 표시할 수 있습니다. 그것은 당신의 코드에서 JSON.stringify은 항상 UTF-8로 인코딩 될것입니다.

Array.flat()

Array.flat()함수는 중첩배열의 데이터를 최상위 레벨의 데이터로 변환하는 함수입니다. 그것은 주어진 depth만큼 재귀함수로 호출됩니다. 배열에서 flat함수를 호출하면 당신이 flatten up을 원하는 레벨의 depth까지의 경로를 지정하면 되며, 기본값은 1입니다. 하위배열의 요소들이 연결된 새로운 배열로 리턴합니다. 연결된 배열의 모든 level을 평평하게 같은 level로 만들어줍니다. 우리는 Infinity을 전달할 수 있습니다.

예를들어 우리는 이렇게 사용할 수 있습니다.

const arr1 = [5, 6, [7, 8]];
console.log(arr1.flat());
// [5, 6, 7, 8]

const arr2 = [5, 6, [7, 8, [9, 10]]];
console.log(arr2.flat());
// [5, 6, 7, 8, [9, 10]]

const arr3 = [5, 6, [7, 8, [9, 10]]];
console.log(arr3.flat(2));
//  [5, 6, 7, 8, 9, 10]

const arr4 = [6, 7, [8, 9, [10, 11, [12, 13, [14, 15]]]]];
console.log(arr4.flat(Infinity));
//  [6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

보시다시피, 이것은 중첩 배열로부터 중첩을 제거하는 매우 편리한 방법입니다. 중첩이 전혀 없거나 더 작은 중첩배열로 변환하여 작업하는것이 어렵기 때문에 이것은 매우 중요합니다.

배열의 빈 값은 Array.flat 실행된 이후에 제거됩니다. 예를들면 :

const arr = [1, 2, , 3, 4];
arr.flat();
// [1, 2, 3, 4]

arr 에서 빈 값은 제거되었습니다.

Array.flatMap()

flatMap 함수는 배열의 항목을 다른 배열과 합친 후 배열을 평평하게 만듭니다. map배열을 호출한 후 flat으로 깊이1을 사용하는것과 같습니다. 그것은 매핑과 병합을 위해 짧게 사용하기 위한것으로 많은 배열이 너무 중첩되지않아 좋습니다. flatMap 함수는 어떻게 배열을 매핑하는 방법에 대한 콜백을 함수로 반환합니다. 이 콜백함수는 배열의 최근값, 인덱스 그리고 원래 배열의 값을 flatMap함수의 파라메터로 사용합니다.

예를들어, 우리는 flatMap을 예제처럼 사용할 수 있습니다.

let arr = [1, 2, 3];

arr.map(x => [x * 10]); 
// [[10], [20], [30]]]

arr.flatMap(x => [x * 10]);
// [10, 20, 30]

arr.flatMap(x => [[x * 2]]);
// [[10], [20], [30]]

flatMap은 오직 배열의 한 레벨의 배열로 평평하게 하는것을 볼 수 있습니다. 만약 우리가 매핑한 후 하나의 레벨보다 더 많이 평평하게 해야한다면 우리는 map과 flat을 사용할 수 있습니다.

Function.toString() 의 변화

객체에서 항상 toString()함수는 함수의 문자열을 얻는 함수였다. ES2019에서, toString()함수는 이제 함수와 주석과 공백을 포함하여 함수를 정의한대로 정확한 문자열을 얻습니다.

예를들어,

function fn() {
  /* comment */
}
console.log(fn.toString())

우리는 toString()를 실행하면 코드와같은 결과를 얻을 것입니다.

function fn() {
  /* comment */
}

JSON.stringify() 수정

JSON.stringify은 이제 모든 문자열이 UTF-8로 인코딩되므로, 특수한 유니코드(영향을 받던 문자열은 U+D800에서부터 U+DFF까지 입니다)의 문자를 올바르게 리턴합니다.

우리는 이제 이러한(특수한 유니코드)의 문자열에서 JSON.stringify를 호출하더라도 더이상 잘못된 문자열을 리턴하지 않습니다. 우리가 JSON.stringify을 호춣한 다음에 JSON.parse를 호출하면, 우리는 JSON.parse하기 이전의 문자열과 동일한 문자열을 얻습니다.

String.trimStart()

문자열 객체에는 trimStart이라고하는 문자열의 시작 공백을 자르는 함수가 있습니다. 그리고 또한 문자열의 오른쪽 공백을 자르는 trimLeft함수가 있습니다.

예를들어,

let message = '   Hi! How\'s it going?   ';
console.log(message);
// We get '   Hi! How's it going?   '

let message = '   Hi! How\'s it going?   ';
console.log(message.trimStart());
// We get 'Hi! How's it going?   '

왼쪽에 공백이 사라졌고, 우리는 같은 trimLeft으로 동일한 일을 할 수 있습니다.

let message = '   Hi! How\'s it going?   ';
console.log(message.trimLeft());

// We get 'Hi! How's it going?   '

trimStart혹은 trimLeft로 반환된 새로운 문자열이므로, 원래의 문자열에 영향을 주지 않습니다. 이렇게하면 원래의 문자열은 변경하지 않으므로 실수를 방지할 수 있습니다.

String.trimEnd()

trimEnd함수는 문자열에서 오른쪽의 공백을 제거합니다. 예를들어,

let message = '   Hi! How\'s it going?   ';
console.log(message);
// We get '   Hi! How's it going?   '

let message = '   Hi! How\'s it going?';
console.log(message.trimEnd());
// We get '   Hi! How\'s it going?'

trimEnd또는 trimRight로 반환된 새로운 문자열이므로, 원래의 문자열에 영향을 주지 않습니다. 이렇게하면 원래의 문자열은 변경하지 않으므로 실수를 방지할 수 있습니다.

선택적 Catch 바인딩

ES2019를 사용하면 catch는 바인딩을 추가하지 않아도 됩니다. catch이후에 괄호로 묶인 변수가 필요합니다. 이것은 이제 우리가 이렇게 사용하 수 있음을 의미합니다.

try {
    ···
} catch {
    ···
}

이제 우리는 이렇게 쓰지 않아도 됩니다.

try {
    ···
} catch (error) {
    ···
}

error객체를 사용할 필요가 없다면, catch에서 변수를 바인딩하지 않아도 됩니다. 그것은 오류를 무시하거나, 무엇인지 고려하지 않아도 됩니다. 하지만 error객체는 여전히 입력값을 위한 로깅과 확인하는데 편리하며 오류를 정상적으로 처리하면 예외는 발생하지 않습니다.

예를들어 우리는 JSON.parse의 에러 포착을 다음과 같이 사용할 수 있습니다.

try {
  return JSON.parse(str);
} catch {
  return {}
}

에러가 있는 문자열에서 JSON 문자열로 변환할 때 오류를 정상적으로 처리할 수 있습니다.

Reference

원글

JavaScript
Node
Script