ECMAScript 2019

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

스펙 문서

1 개요[편집]

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

2 추가 사항[편집]

2.1 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]

2.2 Array.prototype.flatMap()[편집]

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

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

2.3 String.prototype.trimStart(), trimEnd()[편집]

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

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"

2.4 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" }

2.5 Symbol.prototype.description[편집]

Symbol객체에 description이라는 읽기 전용 프로퍼티가 생겼다. Symbol을 생성할 때 넣은 문자열 값이 들어있다.

3 변경점[편집]

3.1 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 }
]
*/

3.2 선택적 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!
}

3.3 Function.prototype.toString()[편집]

함수가 가진 메서드인 .toString()은 함수의 구현을 문자열로 표시해주는 기능을 한다. 기존에는 브라우저마다 구현이 달랐으나, ECMAScript 2019에서 구현 방법을 통일하기로 하였다. 다음과 같이 작동하게 된다.[2]

  • 자바스크립트 코드로 정의된 함수의 경우는 원래 소스코드를 그대로 출력한다. 주석도 포함한다.
  • 줄바꿈: 함수 정의시 \r\n이나 \r등을 이용하여 줄을 바꿨더라도 \n으로 통일해서 출력된다.
  • 빌트인 함수: 자바스크립트 코드로 정의되지 않은 내장 함수나 C++ 모듈 코드 등은 [native code]로 표시된다.

4 각주