📦 Archiving various development tips. If you watch this repository, you can get issues related to the newly registered development tip from the GitHub feed.
구글은 JavaScript의 스펙을 정하는 Vendor 사 중 한 회사입니다. tc39라는 위원회에도 많은 구글 개발자가 있는 것으로 알고 있습니다. tc39 위원회에서는 ECMAScript라고 불리는 JavaScript의 명세(스펙)를 정의합니다. 현재도 여러 제안들이 올라와 있는데요, tc39/proposals 저장소에서 확인할 수 있습니다.
멤버 변수(클래스 내에서 사용하는 변수)에 private임을 명시하기 위해 자바스크립트 개발자들은 암묵적으로 앞에 underscore(_)를 추가하곤 했습니다. 물론 코드 상으로는 아무 소용없는 convention에 불과합니다. TypeScript를 비롯한 다른 언어에서는 대부분 private이라는 reserved keyword를 통해 클래스 내에서만 접근할 수 있는 private member variable을 정의하지만 JavaScript에서는 #을 사용하여 정의하도록 스펙이 구현됐습니다.
AS-IS
class IncreasingCounter {
constructor() {
this._count = 0;
}
get value() {
return this._count;
}
}
const counter = new IncreasingCounter()
console.log(counter._count) // 0
TO-BE
public member variable
class IncreasingCounter {
counter = 0;
get value() {
return this.count;
}
}
private member variable
class IncreasingCounter {
#count = 0;
get value() {
return this.count;
}
}
const counter = new IncreasingCounter()
counter.count // Syntax Error
Node 런타임 환경에서도 LTS version에는 이미 구현이 완료된 스펙입니다. (😢)
String.matchAll
이미 정규표현식을 위한 match API는 구현이 되어있었습니다. 이 matchAll API는 capturing group을 함께 반환합니다.
AS-IS
const longString = 'Magic hex number: DEFAD CAFE'
const regex = '/\b\p{ASCII_Hex_Digit}+\b/gu'
for (const match of string.match(regex)) {
console.log(match)
}
// => Output
// 'DEFAD'
// 'CAFE'
iterable 한 [key, value]를 반환하는 API입니다. enumerable 속성에 대하여 반환하며 순서는 object에 명시된 그 순서와 동일합니다. 이 API를 사용하여 object를 Map 자료구조로 쉽게 변환할 수 있게 됐습니다. 반대의 API로 fromEntries() API도 존재합니다.
const object = { lang: 'JavaScript', coolness: 9001 }
// Convert the object into a map
const map = new Map(Object.entries(object))
// Convet map into a object
const reObject = Object.fromEntries(map)
[Google I/O 2019] What’s new JavaScript?
2019년에도 어김없이 Google I/O 행사가 있었습니다. 유익한 수많은 세션 중 What’s new in JavaScript? 을 듣고 정리해봤습니다.
구글은 JavaScript의 스펙을 정하는 Vendor 사 중 한 회사입니다. tc39라는 위원회에도 많은 구글 개발자가 있는 것으로 알고 있습니다. tc39 위원회에서는 ECMAScript라고 불리는 JavaScript의 명세(스펙)를 정의합니다. 현재도 여러 제안들이 올라와 있는데요, tc39/proposals 저장소에서 확인할 수 있습니다.
TL;DR
바쁘신 분들을 위해 요약 먼저 투척합니다.
Class fields
ECMAScript 5에서부터 추가됐던 class 문법에 field 영역 관련 문법이 추가됐습니다. 이미 private field에 대해서는 proposal 단계에서부터이야기가 많았습니다.
멤버 변수(클래스 내에서 사용하는 변수)에
private임을 명시하기 위해 자바스크립트 개발자들은 암묵적으로 앞에 underscore(_)를 추가하곤 했습니다. 물론 코드 상으로는 아무 소용없는 convention에 불과합니다. TypeScript를 비롯한 다른 언어에서는 대부분private이라는 reserved keyword를 통해 클래스 내에서만 접근할 수 있는 private member variable을 정의하지만 JavaScript에서는#을 사용하여 정의하도록 스펙이 구현됐습니다.AS-IS
TO-BE
public member variable
private member variable
Node 런타임 환경에서도 LTS version에는 이미 구현이 완료된 스펙입니다. (😢)
String.matchAll
이미 정규표현식을 위한 match API는 구현이 되어있었습니다. 이
matchAllAPI는 capturing group을 함께 반환합니다.AS-IS
TO-BE
Large numeric value
큰 정수의 가독성을 높이기 위해 추가된 숫자 형식입니다. 세 자리 수마다
_를 통해 구분지을 수 있습니다.역시 babel의 플러그인을 통해 사용할 수 있습니다.
BigInt
JavaScript가 핸들링 할 수 있는 정수의 범위보다 큰 정수를 다룰 때 BigInt가 추가됐습니다.
Array.flat / Infinity
이 API도 사건이 있었습니다. 일명 SmoothGate.
flatAPI 이름이smoosh로 오해한(?) 사건입니다. 관련 내용은 구글이 정리해둔 자료가 있어 첨부합니다. (#smooshgate FAQ)flatAPI는 중첩된 배열을 ‘평평하게’ 풀 수 있는 API입니다. 기존에도 많은 라이브러리가 있었는데요, 이번에 스펙으로 포함됐습니다.Object.entries()
iterable 한 [key, value]를 반환하는 API입니다. enumerable 속성에 대하여 반환하며 순서는 object에 명시된 그 순서와 동일합니다. 이 API를 사용하여 object를
Map자료구조로 쉽게 변환할 수 있게 됐습니다. 반대의 API로fromEntries()API도 존재합니다.globalThis
JavaScript 개발자가 전세계적으로 정말 많다보니 이 스펙도 논의가 많았습니다.
JavaScript에서
this는 골칫거리로 유명한데요, 브라우저인지 node.js 환경인지에 따라서 그 대상이 바뀌기 때문입니다. 이러한 이슈로 여러 라이브러리도 있었고 폴리필도 있었습니다. 이러한 문제를 해결하기 위해 아예 전역 this 를 제공하는 스펙입니다.Intl
Intl.RelativeTimeFormat
Intl.ListFormat
Intl.DateTimeFormat
Intl은 이외에도 여러 API가 있습니다.Promise
기존에도 유용한 두 API(Promise.all, Promise.race)가 존재했습니다. 여기서 다음 두 API가 추가됐습니다. 정말 쉽게 풀어써보면 다음과 같은 API가 됩니다.
+Promise.allSettled
실패(rejected)든 성공(settled)이든 모든 게 다 끝날 때.
+Promise.any
실패(rejected)든 성공(settled)이든 가장 빠른 어떤 것 하나가 끝날 때.
ETC
Array.sort()is stable마무리
추가되는 JavaScript 스펙을 알아봤습니다.
여담.
슬라이드에 Angular는 어디가고 React가...🤭