안녕하세요. 어느덧 한 해가 지나서 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도 좀 수정해보겠습니다.
김의중
