ECMAScript 2019

ECMAScript 2019 (ES10)에 추가된 일부 기능 정리

omitting catch binding

ES10 이후부터는 catch로 던져진 값에 관심이 없다면 매개변수를 생략할 수 있다.

try {
  // ...
} catch {
  // ...
}

Symbol description

심볼 팩토리 함수에 매개변수를 전달하면, 해당 생성된 심볼에 대한 설명으로 추가되게 된다.

image

이것의 목적은 과거처럼 symbol.toString()으로 간접적인 방식이 아닌, description을 통해 직적 내부 슬롯을 노출함을 목적으로 한다. (참고로 내부 슬롯(internal slots)이란, 자바스크립트에서 접근할 수 없는 저장 위치이다.)

Object.fromEntries()

[key, value] 쌍에 대해 이터러블(iterable)이 주어지면, Object.fromEntries()를 통해 객체(object)를 만들 수 있다.

참고로 Object.fromEntries()의 반대는 Object.entries()이다.

// Object.fromEntries()를 활용하여 pick 구현해 보기
function pick(object, ...keys) {
  const filteredEntries = Object.entries(object).filter(([key, _value]) =>
    keys.includes(key)
  );
  return Object.fromEntries(filteredEntries);
}

const obj = {
  name: "jacob",
  age: 30,
  city: "seoul",
  phone: "000-0000-0000",
  address: "home...",
};

pick(obj, name, age); // {name: 'jacob', age: 30}

.trimStart() and .trimEnd()

• .trimStart(): 시작 부분의 공백만 제거

• .trimEnd(): 끝 부분의 공백만 제거

Array.prototype.flat()

.flat(depth = 1): any[]

말그대로 depth만큼 배열을 평평하게(flat하게) 만들어 새 배열을 반환한다. depth의 기본값은 1이다.

[1, 2, [3, 4], [[5, 6]]].flat(0); // 변화는 없고 새 배열만 반환된다.
// [ 1, 2, [3,4], [[5,6]] ]

[1, 2, [3, 4], [[5, 6]]].flat(1);
// [1, 2, 3, 4, [5,6]]

[1, 2, [3, 4], [[5, 6]]].flat(2);
// [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap()

.flatMap()은 위의 .flat(1) 메서드와 .map() 메서드를 같이 호출하는 것과 같은 효과를 낸다. 각각의 배열 요소에 대한 콜백함수의 결과를 flat(1)한 새로운 배열을 반환한다.

.flatMap()의 시그니처는 아래와 같다.

.flatMap<U>(
  callback: (value: T, index: number, array: T[]) => U|Array<U>,
  thisValue?: any
): U[]

const arr1 = ["it's Sunny in", "", "California"];

arr1.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]