게시글

강좌26 - ECMAScript - 7달 전 등록 / 6달 전 수정

ES2019(ES10)의 변화

조회수:
0

안녕하세요. 어느덧 한 해가 지나서 ES2019가 나왔습니다. ES10이라고도 부르죠.

보통 짝수 번째 버전에서 큰 변화가 있었는데요. ES6(새로운 자바스크립트), ES8(async/await)에서 편리한 기능들이 많이 추가되었죠. 그에 반해 ES7, ES9에서는 소소한 기능만 추가되었습니다. 그래서인지 짝수 버전인 ES10에서는 어떤 기능이 나올까 궁금했습니다. 데코레이터가 추가될 것이라고 기대했는데 아쉽게도 추가되지 않았습니다. 작은 수정사항만 있습니다.

Object.fromEntries

Object.entries의 반대 기능입니다. Object.entries가 객체를 2차원 배열로 만들었다면, fromEntries는 다시 2차원 배열을 객체로 만들어줍니다. 배열 말고 Map같은 것도 지원합니다.

Object.entries({ a: 'zerocho', b: ['hello'] }); // [['a', 'zerocho'], ['b', ['hello']]]
Object.fromEntries([['a', 'zerocho'], ['b', ['hello']]]); // { a: 'zerocho', b: ['hello'] }

Array.prototype.flat, Array.prototype.flatMap

다중 배열을 펼치는 기능(기본 1단계 펼침)입니다. 인수로 숫자를 넣어서 몇 번 연달아 펼칠지 결정할 수 있습니다.

['abc', 'def', ['gh', ['ijk']]].flat() // ['abc', 'def', 'gh', ['ijk']]
['abc', 'def', ['gh', ['ijk']]].flat(2) // ['abc', 'def', 'gh', 'ijk']
['abc', 'def', ['gh', ['ijk']]].flat(Infinity) // ['abc', 'def', 'gh', 'ijk']

flatMap은 왜 별도의 기능으로 추가한 건지 모르겠지만(함수형 프로그래밍, 모나드를 만들 때 필요한 메서드입니다), map과 flat을 섞은 메서드입니다. map 후에 flat을 하는 것보다 살짝 더 효율적이라고 하네요(반복 횟수를 따져보면 이해가 됩니다).

['abc', 'def'].map((v) => v.split('')); // [['a', 'b', 'c'], ['d', 'e', 'f']]
['abc', 'def'].map((v) => v.split('')).flat(); // ['a', 'b', 'c', 'd', 'e', 'f']
['abc', 'def'].flatMap((v) => v.split('')); // ['a', 'b', 'c', 'd', 'e', 'f']

String.prototype.trimStart, trimEnd, trimLeft, trimRight

기존에 문자열 공백을 지울 때 trim 메서드를 많이 썼죠. 양쪽 공백을 모두 제거했습니다. 그런데 오른쪽 공백만 지우고 싶다면요? 이럴 때 많이들 당황하셨을 겁니다. 그래서 이 메서드들이 추가되었습니다. trimStart와 trimLeft는 왼쪽 공백을 지우고, trimEnd와 trimRight는 오른쪽 공백을 지웁니다. 같은 역할을 하는 메서드를 두 개 만든 게 이색적인데요. 하위 호환성(옛날부터 있었던 메서드를 지원)을 위해 그랬다는 것 같습니다.

'    abc    '.trim(); // 'abc'
'    abc    '.trimStart(); // 'abc    '
'    abc    '.trimEnd(); // '    abc'
'    abc    '.trimRight(); // '    abc'
'    abc    '.trimLeft(); // 'abc    '

Optional Catch

이제 catch의 매개변수를 쓰지 않는 경우, error을 생략해도 됩니다.

try {
  new Error('hello')
} catch (error) {
  console.error('error 안 쓰는데 왜 써야 하지... ㅠㅠ');
}

지금까지는 위와 같이 했어야 했지만, 앞으로는 다음과 같이 error을 쓰지 않을 수 있습니다.

try {
  new Error('hello');
} catch {
  console.error('에러가 나든지 말든지');
}

기타

이외에 유니코드와 관련되어 JSON과 toString쪽이 더 개선되었고, Symbol에 description 속성이 생겨서 자신이 어떤 심볼을 사용했는지 알아낼 수 있게 되었습니다.

Symbol('ZeroCho').description; // ZeroCho
Symbol.for('ZeroCho').description; // ZeroCho

내년에 나올 새로운 자바스크립트 기능과 제 자바스크립트 입문서도 기대해주세요~. 조만간 ES2019에 맞춰 stage-3, 2, 1도 좀 수정해보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

4개의 댓글이 있습니다.
13일 전
안녕하세요 항상 좋은 글 남겨주셔서 정말 감사합니다!!! 여러 포스팅을 읽던 중 궁금증이 생겼는데, 질문드려도 될까요? 혹시 ECMAScript 변화 내용을 주로 참고하시는 레퍼런스가 어떤 것인인지 알려주실 수 있을까요?

ECMA 인터네셔널의 공식 문서를 살펴보는 것이 가장 확실하기도 하고 저도 지금 그러고 있지만, 잘 사용되지 않는 새로운 점이 워낙 많다보니 핵심적인 부분을 바로 확인하기가 어렵더라구요. 또 정기적으로 보기 좋게 올라오는 레퍼런스를 찾기 어려워 질문드립니다.

혹시 어떤 레퍼런스들을 통해 이러한 점을 파악하고 계신지 여쭙고 싶습니다! 감사합니다!
11일 전
kangax.github.io에서 봅니다~
3달 전
덕분에 새로운 소식 잘 읽었습니다~!
5달 전
항상 잘 보고 있습니다 선생님
7달 전
내용 잘 봤습니다 항상 감사합니다 ㅎㅎ
그리고 오타제보 하나 드려요
Optioncal Catch -> Optional 일 것 같습니다
7달 전
감사합니다~