"ES2019" 태그로 연결된 9개 게시물개의 게시물이 있습니다.

JSON ⊂ ECMAScript 제안을 통해 JSON은 ECMAScript의 문법적 하위 집합이 되었습니다. 이것이 이미 그렇지 않았다는 사실에 놀란다면, 당신은 혼자가 아닙니다!

기존 ES2018 동작​

ES2018에서는 ECMA스크립트 문자열 리터럴은 U+2028 LINE SEPARATOR와 U+2029 PARAGRAPH SEPARATOR 문자를 탈출하지 않은 상태로 포함할 수 없었습니다. 왜냐하면 그것들이 이 맥락에서도 줄 종결자로 간주되었기 때문입니다:

// U+2028 문자가 포함된 문자열입니다.
const LS = '
';
// → ES2018: SyntaxError

// eval로 생성된 U+2029 문자가 포함된 문자열입니다:
const PS = eval('"\u2029"');
// → ES2018: SyntaxError

이는 JSON 문자열은 이러한 문자를 포함할 수 있기 때문에 문제가 됩니다. 결과적으로, 유효한 JSON을 ECMAScript 프로그램에 포함할 때 개발자는 이러한 문자를 처리하기 위해 특수한 후처리 로직을 구현해야 했습니다. 이러한 로직 없이는 코드에 미묘한 버그가 생기거나 심지어 보안 문제가 발생할 수 있습니다!

강아지 배열이 있다고 가정합시다. 각 강아지는 이름과 등급을 가지고 있습니다. (이것이 이상한 예제처럼 느껴진다면, 정확히 이런 내용을 전문으로 하는 Twitter 계정이 있다는 것을 알아두세요... 묻지 마세요!)

// 배열이 `name` 기준으로 알파벳 순서로 미리 정렬되어 있는 것을 확인하세요.
const doggos = [
  { name: 'Abby',   rating: 12 },
  { name: 'Bandit', rating: 13 },
  { name: 'Choco',  rating: 14 },
  { name: 'Daisy',  rating: 12 },
  { name: 'Elmo',   rating: 12 },
  { name: 'Falco',  rating: 13 },
  { name: 'Ghost',  rating: 14 },
];
// 강아지를 내림차순으로 `rating` 기준으로 정렬합니다.
// (이 작업은 `doggos`를 제자리에서 업데이트합니다.)
doggos.sort((a, b) => b.rating - a.rating);

JavaScript Symbol은 생성 시 설명을 제공할 수 있습니다:

const symbol = Symbol('foo');
//                    ^^^^^

이전에는 이를 프로그래밍적으로 접근하는 유일한 방법은 Symbol.prototype.toString()을 간접적으로 사용하는 것이었습니다:

const symbol = Symbol('foo');
//                    ^^^^^
symbol.toString();
// → 'Symbol(foo)'
//           ^^^
symbol.toString().slice(7, -1); // 🤔
// → 'foo'

하지만 위 코드의 형태는 약간 마법 같아 보이고, 매우 직관적이지 않으며 “의도를 표현하되, 구현을 표현하지 않는다”라는 원칙을 위반합니다. 위 기법은 또한 설명이 없는 Symbol(Symbol())과 빈 문자열을 설명으로 가진 Symbol(Symbol(''))을 구분할 수 없게 합니다.

Object.fromEntries는 자바스크립트 내장 라이브러리에 유용한 추가 기능입니다. 무엇을 하는지 설명하기 전에 기존의 Object.entries API를 이해하는 것이 도움이 됩니다.

Object.entries​

Object.entries API는 이미 오래전부터 존재해 왔습니다.

객체의 각 키-값 쌍에 대해 Object.entries는 첫 번째 요소가 키이고 두 번째 요소가 값인 배열을 제공합니다.

Object.entries는 특히 for-of와 결합할 때 유용하며, 객체의 모든 키-값 쌍을 우아하게 순회할 수 있게 합니다:

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`The value of ${key} is ${value}.`);
}
// 출력:
// The value of x is 42.
// The value of y is 50.

불행히도, 현재까지는 entries 결과를 동일한 객체로 되돌리는 간단한 방법이 없었습니다… 이제는 가능합니다!

Object.fromEntries​

새로운 Object.fromEntries API는 Object.entries의 반대 동작을 수행합니다. 이를 통해 entries를 기반으로 객체를 손쉽게 다시 구성할 수 있습니다:

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }

일반적인 사용 사례 중 하나는 객체를 변환하는 것입니다. 이제 entries를 순회하고 이미 익숙한 배열 메서드를 사용하여 수행할 수 있습니다:

const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) => key.length === 1)
    .map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }

이 예제에서는 길이가 1인 키만 가져오도록 객체를 filter합니다. 즉, 키 x와 y는 포함하고, 키 abc는 포함하지 않습니다. 그런 다음 남아있는 entries를 map으로 순회하여 각 키-값 쌍에 대한 업데이트된 쌍을 반환합니다. 이 예제에서는 각 값을 2로 곱하여 두 배로 만듭니다. 최종 결과는 x와 y 속성만 가지며 새 값이 있는 새 객체입니다.

Array.prototype.flat​

이 예제의 배열은 여러 수준으로 중첩되어 있습니다. 배열 안에 또 다른 배열이 포함됩니다.

const array = [1, [2, [3]]];
//            ^^^^^^^^^^^^^ 외부 배열
//                ^^^^^^^^  내부 배열
//                    ^^^   가장 안쪽 배열

Array#flat은 주어진 배열의 평탄화된 버전을 반환합니다.

array.flat();
// → [1, 2, [3]]

// …다음과 동등합니다:
array.flat(1);
// → [1, 2, [3]]

기본 깊이는 1이지만, 원하는 깊이까지 재귀적으로 평탄화를 실행하려면 숫자를 전달할 수 있습니다. 배열에 더 이상 중첩 배열이 없을 때까지 평탄화를 계속하려면 Infinity를 전달합니다.

// 배열에 더 이상 중첩된 배열이 포함되지 않을 때까지 재귀적으로 평탄화:
array.flat(Infinity);
// → [1, 2, 3]

왜 이 메서드를 Array.prototype.flatten이 아니라 Array.prototype.flat으로 명명했는지 궁금하신가요? #SmooshGate에 대한 우리의 설명을 읽어보세요!

Array.prototype.flatMap​

다음은 또 다른 예제입니다. 값 하나를 두 번 포함하는 배열을 반환하는 duplicate 함수를 정의합니다. 이 배열의 각 값에 duplicate를 적용하면 중첩된 배열이 생성됩니다.

const duplicate = (x) => [x, x];

[2, 3, 4].map(duplicate);
// → [[2, 2], [3, 3], [4, 4]]

그런 다음 결과에 flat을 호출하여 배열을 평탄화할 수 있습니다:

[2, 3, 4].map(duplicate).flat(); // 🐌
// → [2, 2, 3, 3, 4, 4]

이 패턴이 함수형 프로그래밍에서 매우 일반적이기 때문에, 이를 위한 전용 flatMap 메서드가 새로 추가되었습니다.

[2, 3, 4].flatMap(duplicate); // 🚀
// → [2, 2, 3, 3, 4, 4]

flatMap은 map을 먼저 수행하고 flat을 별도로 수행하는 것보다 조금 더 효율적입니다.

flatMap의 사용 사례에 관심 있으신가요? Axel Rauschmayer의 설명을 확인하세요.

Array#{flat,flatMap} 지원​

JSON.stringify는 이전에 입력에 고립된 서러게이트가 포함되어 있으면 잘못된 유니코드 문자열을 반환하도록 지정되었습니다:

JSON.stringify('\uD800');
// → '"�"'

“잘 구성된 JSON.stringify” 제안은 JSON.stringify의 동작을 변경하여 고립된 서러게이트에 대해 이스케이프 시퀀스를 출력하도록 하고, 결과가 유효한 유니코드(및 UTF-8로 표현 가능)가 되도록 만듭니다:

try 문장의 catch 절은 바인딩을 필요로 했습니다:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // 우리는 바인딩 이름을 지정해야 하지만, 사용하지 않을 수도 있습니다!
  handleException();
}

ES2019에서는 catch를 이제 바인딩 없이 사용할 수 있습니다. 이는 예외를 처리하는 코드에서 exception 객체가 필요하지 않은 경우 유용합니다.

try {
  doSomethingThatMightThrow();
} catch { // → 바인딩 없음!
  handleException();
}

선택적 catch 바인딩 지원​

ES2019에서는 String.prototype.trimStart() 및 String.prototype.trimEnd()을 소개합니다:

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

이 기능은 이전에 비표준 메서드인 trimLeft()와 trimRight()를 통해 제공되었습니다. 이러한 메서드는 새로운 메서드와의 호환성을 위해 여전히 별칭으로 남아 있습니다.

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimLeft();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trimRight();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

Function.prototype.toString()이 이제 공백과 주석을 포함한 소스 코드 텍스트의 정확한 조각을 반환합니다. 이전 동작과 새로운 동작을 비교한 예제를 아래에서 확인하세요: