ES10 (ES2019)

이번 포스팅에선 ES10 의 기능들에 대해 알아보겠습니다.

 

- Array.prototype.flat

 

flat 이라는 이름 그대로 배열을 평탄화시키는 메서드가 새롭게 추가되었습니다. 이미 lodash 와 같은 유틸 함수를 제공해주는 라이브러리를 자주 사용해왔다면 그리 어색하진 않을 메서드입니다.

 

const list1 = [1, 2, [3, 4]];
console.info(list1.flat()); // [1, 2, 3, 4]

const list2 = [1, 2, [3, 4, [5, 6]]];
console.info(list2.flat()); // [1, 2, 3, 4, [5, 6]]
console.info(list2.flat(2)); // [1, 2, 3, 4, 5, 6]

const list3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.info(list3.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const list4 = [1, 2, , 3, 4];
console.info(list4.flat()); // [1, 2, 3, 4]

 

flat 메서드는 depth 매개변수를 optional 로 받는데 기본값은 1입니다.

depth 값 만큼 중첩 배열 구조를 평탄화해 새로운 배열을 만들어냅니다. list2 의 예시를 보면 depth 가 어떠헥 동작하는지 알 수 있습니다.

Infinity 를 넣어서 list3 과 같은 구조를 풀어낼 수도 있지만, 일반적으로 저런 자료구조를 사용할 일이 자주 있을까.. 싶네요.

list4 의 예시처럼 flat 메서드는 구멍을 제거하는 역할도 합니다.

 

이전까진 이런 일을 하려면 lodash 같은 라이브러리를 사용하거나 Array.prototype.reduce + Array.prototype.concat 등으로 구현해서 사용해야 했는데, 꽤 유용한 메서드가 될 것 같습니다.

 

- Array.prototype.flatMap

 

위에 적은 Array.prototype.flat 의 기능에 Array.prototpye.map 을 합쳐놓은 메서드입니다.

flatMap 메서드는 callback 과 thisArgs(optional) 두 매개변수를 받고 여기서 callback 함수는 currentValue, index, array 세개의 args 를 갖습니다.

 

const list1 = [1, 2, 3];

console.info(list1.flatMap(a => [a * 10])); // [10, 20, 30]
console.info(list1.map(a => [a * 10])); // [[10], [20], [30]]

const list2 = ['What the hell', 'Who are u?', '', 'check'];
console.info(list2.flatMap(item => item.split(' '))); // ['What', 'the', 'hell', 'Who', 'are', 'u?', '', 'check']

 

list1 의 예시는 map 의 역할을 하면서 평탄화를 같이 해줍니다. 뭐 굳이 flatMap 을 쓸만해보이진 않습니다만..

list2 의 경우엔 약간 더 쓸만해 보일 수 있습니다. flatMap 이 자동으로 평탄화를 해주기 때문에, split 을 함으로써 생긴 배열을 풀어낼 수 있게 되었습니다. 기존에는 reduce 로 돌면서 split 한 결과를 concat 으로 붙이는 등의 코드를 짜야 했을겁니다.

하지만 저는 개인적으로 flatMap 이 그렇게까지 유용한지는 잘 느껴지지 않습니다..

 

- Object.fromEntries

 

기존에 있던 Object.entries 의 결과값을 바로 객체로 바꾼 값을 반환하는 Object.fromEntries 메서드가 새롭게 추가되었습니다.

 

const test1 = new Map([['id1', 1], ['id2', 2]]);
console.info(test1); // Map { 'id1' => 1, 'id2' => 2 }

const test2 = Object.fromEntries(test1);
console.info(test2); // { id1: 1, id2: 2 }

for (const [key, value] of Object.entries(test2)) {
  console.info(key, value);
  /*
    id1 1
    id2 2
  */
}

 

어떻게 보면 Object.entries 와 서로 반대되는 역할을 하는 메서드인 것 같습니다.

당장 눈에 보이진 않지만 어디선가 종종 써먹을 수 있을 것 같은 느낌이 드네요.

 

- String.prototype.trimLeft, trimRight

 

사실 이건 새로운 기능은 아니고, 기존에 있던 String.prototype.trimStart, trimEnd 의 alias 입니다.

 

const test1 = '     test1      ';

console.info(test1.trimStart()); // 'test1      '
console.info(test1.trimLeft()); // 'test1      '

console.info(test1.trimEnd()); // '     test1'
console.info(test1.trimRight()); // '     test1'

 

기존 start 와 end 는 각각 문자열의 시작, 끝 부분에 있는 공백을 제거하는 기능을 했었고 left 와 right 도 동일합니다.

보면서 굳이 왜 alias 를 만들었을까.. 하는 생각이 들었는데 곧 deprecated 되는 것 같네요.

실험적으로 넣어봤다가 저처럼 생각하는 개발자가 많아서인지 빼버리는 것 같습니다.

 

- A few minor updates..

 

위의 업데이트에 추가로 몇몇 syntax 와 semantics 에 마이너 업데이트가 있다고 합니다.

 

const a = [1, 5, 3(1), 6, 2, 3(2), 9];

a.sort((x, y) => x - y);

console.info(a); // [1, 2, 3(1), 3(2), 5, 6, 9]

 

Array.prototype.sort 가 stable sort 가 되었다고 하는데요. 겉보기엔 똑같아 보이지만 a 라는 배열에 3 이 중복해서 들어가있는 상태에서 정렬을 했을 때 저 3의 위치가 바뀌지 않으면 이를 stable sort 라고 합니다.

정렬 결과가 [1, 2, 3(2), 3(1), 5, 6, 9] 이런식으로 기존 소스에서와 달리 3의 위치가 바뀌게 되면 이를 unstable sort 라고 하구요.

 

이외에 JSON, JSON.stringify, Function.prototype.toString 등에 약간의 변화가 있었다고 하지만 위의 sort 처럼 그리 중요한 것 같진 않은.. 말 그대로 마이너 업데이트이다보니 더 알아보진 않겠습니다.