ECMAScript 2019

ECMAScript 표준 개정판
ECMAScript 5
ECMAScript 2015
ECMAScript 2016
ECMAScript 2017
ECMAScript 2018
ECMAScript 2019
ES Next

스펙 문서

개요

ECMAScript 2019는 2019년 6월에 승인된 ECMAScript(JavaScript)표준의 10번째 개정판이다. ES10이라고도 부른다.

추가 사항

Array.prototype.flat()

배열 내의 배열들을 펼쳐 만든 새 배열을 반환하는 메서드가 추가되었다. 인자는 펼칠 깊이를 나타낸다. 인자 없이 호출하면 한 번만 펼치고, 인자에 정수를 주면 그 횟수만큼 펼친다. Infinity를 이용하면 모든 내부 배열을 깊이에 관계 없이 펼쳐준다.

let arr = [[1, 2], [3], [4, [5, [6]], 7]]
console.log(arr.flat()) // [1, 2, 3, 4, [5, [6]], 7]
console.log(arr.flat(2)) // [1, 2, 3, 4, 5, [6], 7]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7]

Array.prototype.flatMap()

.map() 이후에 .flat()을 실행하는 것과 똑같은 기능을 수행하는 메서드가 추가되었다. 인자로 주어진 함수를 대상 배열의 요소들에 각각 적용하여 새 배열을 만들고, 그 배열의 내부 배열들을 한 단계 펼친다. map과 flat을 순서대로 호출하는 것보다 효율적이다.

let arr = ["철수 영희", "산 바다"]
console.log(arr.map(x => x.split(" "))) // [["철수", "영희"], ["산", "바다"]]
console.log(arr.flatMap(x => x.split(" "))) // ["철수", "영희", "산", "바다"]

String.prototype.trimStart(), trimEnd()

String.prototype.trim()은 문자열 앞뒤의 공백(줄바꿈 문자 포함)을 제거하여 반환하는 역할을 한다. ES10에선 앞이나 뒤의 공백을 선택적으로 제거할 수 있는 메서드를 추가했다. .trimStart()나 .trimLeft()는 문자열 앞의 공백을, .trimEnd()나 .trimRight()는 문자열 뒤의 공백을 제거한다. 같은 기능을 하는 메서드가 두 개씩 추가된 것은 호환성을 위해서라고 하며, 원칙적으로는 .trimStart()와 .trimEnd()가 기본이고 나머지는 별칭이다.

let str = "   aaa   "
console.log(str.trim()) // "aaa"
console.log(str.trimStart()) // "aaa   "
console.log(str.trimEnd()) // "   aaa"

// trimStart, trimEnd가 기본
console.log(String.prototype.trimLeft.name) // "trimStart"
console.log(String.prototype.trimRight.name) // "trimEnd"

Object.fromEntries()

ECMAScript 2017에 도입된 Object.entries()에 이어 추가된 메서드이다. Object.entries()가 객체로부터 2차원 배열을 만들었다면 Object.fromEntries()는 반대로 이러한 2차원 배열로부터 객체를 생성한다.

let obj = { a: "aaa", b: "bbb" }
console.log(Object.entries(obj)) // [["a", "aaa"], ["b", "bbb"]]

let arr = [["a", "aaa"], ["b", "bbb"]]
console.log(Object.fromEntries(arr)) // { a: "aaa", b: "bbb" }

변경점

Array.prototype.sort()

배열을 정렬하는 .sort() 메서드가 항상 stable sort로 작동하도록 명시되었다. 즉, 배열을 정렬시 비교해서 순위가 같은 원소는 원래 순서를 유지하게 된다.

let arr = [
  { id: 1, value: 10 },
  { id: 2, value: 18 },
  { id: 3, value: 9 },
  { id: 4, value: 10 }
]
arr.sort((a, b) => a.value - b.value)
/*
[
  { id: 3, value: 9 },
  { id: 1, value: 10 },
  { id: 4, value: 10 },
  { id: 2, value: 8 }
]
*/

선택적 Catch 바인딩

기존의 try ... catch문법은 항상 catch (error)와 같이 에러 변수를 받아야만 했다. 그러나 에러 변수가 필요하지 않은 상황에서도 무조건 변수를 받는 것은 불편하였고, 특히 linter를 사용하는 경우 해당 에러 변수를 사용하지 않았다는 경고 메시지를 출력하는 경우가 있다. ES10에선 (error) 부분을 생략할 수 있게 되었다.

// before
try {
  doSomething()
} catch (error) {
  // I don't need this error!
}

// after
try {
  doSomething()
} catch {
  // I'm happy now!
}