사용 가능한 ES2019(ES10) 기능 5가지

 

 

ES10

 

 

최신 크롬, 파이어폭스에서 사용 가능한 ES2019(ES10) 의 5가지 기능
Object.fromEntries( ), trimStart( ), trimEnd(), flat(), flatMap()

1. Object.fromEntries()

객체를 배열로 바꾸는 것은 ES2017 에서 Object.entries( ) 메소드로 가능하다. 이 메소드는 객체를 인자로 받아  [key, value] 형태의 배열로 반환한다.

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

반대로 배열을 객체로 변환하려면 어떻게 해야 할까? 파이썬 같은 몇몇 언어는 dict( ) 함수를 이용한다. Underscore.js 나 Lodash 에 _.fromPairs 와 동일한 기능이다.
ES2019 에서 Object.fromEntries( ) 기능을 선보였다. key-value 리스트를 손쉽게 객체로 변환한다.

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

보다시피 Object.fromEntries() 는 Object.entries() 로 되돌릴 수 있다. 이전에도 가능했지만 그리 간단하진 않았다.

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {});

console.log(obj);    // => {one: 1, two: 2, three: 3}

 

반복 가능한 배열 형태의 어떠한 객체도 전달 가능하다.
예를 들어, 아래 코드는 Map 객체를 인자로 받아 새로운 객체를 반환한다.

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

 

또한 데이터를 변경하는데 아주 유용하다.

const obj = {a: 4, b: 9, c: 16};

// 객체를 배열로 바꿈
const arr = Object.entries(obj);

// 각 수의 제곱근을 구함
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// 다시 배열을 객체로 변환
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

위 예제는 일단 객체를 배열로 바꾸고, map() 메소드를 이용해 제곱근을 넣어준 뒤, 다시 객체로 변환하는 작업을 하고 있다.

또 다른 예시로, URL의 쿼리 스트링을 손쉽게 객체로 만들 수 있다.

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

Object.fromEntries( ) 는 현재 스테이지4 이고, 이는 ES2019 에 포함될 준비가 되었다는 뜻이다.

2. trimStart() 와 trimEnd()

trimStart() 와 trimEnd() 메소드는 기술적으로 trimLeft() / trimRight() 와 동일하다. 

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// the same as
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"

호환성을 위해 trimLeft() 와 trimRight() 는 trimStart()와 trimEnd() 의 aliase(별칭) 으로 남게된다.

3. flat() 과 flatMap()

flat() 메소드는 배열 내부의 하위 배열을 쉽게 합칠 수 있다.

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

이전에는 reduce() 나 concat()을 사용해야 했다.

const arr = ['a', 'b', ['c', 'd']];
const flattened = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

배열 내부에 빈 요소가 있으면 무시되니 주의하자.

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

flat() 은 선택적 인자를 받을 수 있다. 이는 배열의 깊이를 의미하는 숫자로, 아무것도 전달하지 않으면 기본값으로 1이 사용된다.

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]

flatMap() 메소드는  map()과 flat() 을 하나로 결합한 것이다. 
처음에는 전달된 함수의 결과값을 배열로 만들고 내부 배열과 결합시킨다.

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

 

결합되는 배열의 깊이는 1 이다. 만약 몇몇 아이템을 삭제하길 원한다면, 간단하게 빈 배열을 반환해주면 된다.

const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];

// 9를 초과하면 포함하지 않음
arr.flatMap(value => {
  if (value >= 10) {
    return [];
  } else {
    return Math.round(value);
  }
});  

// returns:
// => [7, 8, 9]

4. Symbol 객체의 Description 속성

Symbol 을 만들때, 디버깅 용도로 description 속성을 추가할 수 있다. (read-only)

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar

5 .선택적 catch 바인딩

try … catch 구문에서 항상 catch 바인딩이 사용되는 것은 아니다.

try {
  // 브라우저에서 지원하지 않는 기능 사용
} catch (unused) {
  // 지원하는 기능 사용
}

이 코드에서 catch 바인딩은 사용되지 않는다. 하지만 SyntaxError 를 피하기 위해 명시해야 했다. 
작은 변화지만 이제 이렇게 사용할 수 있다.

try {
  // 브라우저에서 지원하지 않는 기능 사용
} catch {
  // 넘겨주는 값을 신경쓰지 않고 뭔가 수행
}