ECMA 2021.
ECMA Script는 매년 상반기마다 새로운 버전 출시하며, (년도) +1 하면 버전명(ex.2021년에 출시된 버전은 ES12)이 된다. 깃헙에서 현재 제안 중인 내용의 상태(stage) 확인 가능하고, 새롭게 반영될 내용은 Stage0~3 단계별로 승격을 하고 정식 반영시에는 Stage4가 된다.
최신 JS 스펙을 볼 때, 크롬 지원 내용을 보는 것이 거의 필수이다.
제안을 할 때는 챔피온을 끼고 하는 것이 원칙인데, 여기서 챔피온들은 위원회에 소속된 회사 직원 또는 관계자들이 대부분이다. 그런데 여기서 구글 직원인 챔피온들이 많기 때문에 이 챔피온들이 제안하는 내용이 곧, 구글에서 원하는 내용이기 때문에 크롬에 반영될 확률이 매우 높기 때문에 위 내용과 같은 현상이 일어남.
Dev.to 에서 ECMA2021을 한 번 살펴보았다.
1. String.replaceAll(searchValue, replaceValue)
기존에는 replaceAll 을 사용할 때, searchValue에 정규표현식을 사용해야 메소드명처럼 all 적용이 가능했는데 이제는 그냥 searchValue에 문자열을 사용하면 된다.
1
2
3
4
5
6
7
// before
var test1 = "Tiger~";
console.log(test1.replaceAll("/\~/g", ".")); // "Tiger."
// after es12
var test2 = "Tiger~";
console.log(test2.replaceAll("~", ".")); // "Tiger."
2. Private Methods, Private Accessors
Typescript과 Chrome 한정 가능했던 private Methods, private Accessors 가 공식적으로 가능해졌다.
메소드명 또는 접근자명 앞에 #를 추가하면 되고, 클래스 내부에서만 선언할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// priavte Method
class People {
#showName() {
console.log("Tiger");
}
showAge() {
console.log("2 years old");
}
showInfo() {
this.#showName();
this.showAge();
}
}
const people = new People();
people.showInfo();
// Tiger
// 2 years old
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// private Accessors
class People {
get #Name() {
return "Tiger";
}
get Age() {
return 2;
}
get publicName() {
return this.Name;
}
}
const people = new People();
console.log(people.Name); // undefined
console.log(people.#publicName); // "Tiger"
3. Promise.any()
Promise.all()의 반대개념인 Promise.any()가 추가되었다.
Promise.all()은 배열 내 요소 중 어느 하나라도 실패하면 에러가 발생하지만,
Promise.any()는 하나라도 성공하면 첫번째로 성공한 Promise 결과만 반환하고, 모두 실패했을 경우에만 에러를 반환한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Promise 중 하나라도 성공한 경우
const time1 = new Promise((res, err) => {
setTimeout(rej, 1000, '1000');
});
const time2 = new Promise((res, err) => {
setTimeout(res, 2000, '2000');
});
const time3 = new Promise((res, err) => {
setTimeout(res, 3000, '3000');
});
Promise.any([time1, time2, time3]).then((res) => {
console.log(res);
}).catch(err => console.error(err));
// 결과는 2000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Promise 모두 실패한 경우
const time1 = new Promise((res, err) => {
setTimeout(err, 1000, '1000');
});
const time2 = new Promise((res, err) => {
setTimeout(err, 2000, '2000');
});
const time3 = new Promise((res, err) => {
setTimeout(err, 3000, '3000');
});
Promise.any([time1, time2, time3]).then((res) => {
console.log(res);
}).catch(err => console.error(err));
// AggregateError: All promises were rejected
4. AggregateError
AggregateError는 다수의 에러가 한 에러로 뭉뚱그려서 발생할 때를 알려준다.
바로 위에 Promise.any 예시코드 처럼 다수의 Promise들이 실패한 경우, AggregateError가 발생한다.
5. 숫자 구분 기호(Numeric Separators)
_ 기호를 사용해서 숫자의 가독성을 좀 더 높여준다.
예를 들어, 100000000를 보면 보통 0이 몇갠가 하고 세어볼텐데 _를 추가하면, 100_000_000를 보면 숫자 파악이 좀 더 용이하다. 물론 타입도 여전히 number로 유지된다.
1
2
console.log(100_000_000); // 100000000
console.log(typeof (100_000_000)); // number
6. 논리할당 연산자(Logical Assignment Operator)
기존 논리연산자에서 업그레이드 된 논리할당 연산자 라는 개념이 추가되었다.
논리연산자의 truthy, falsy를 이용해 변수에 할당하는 방법이 있는데,
1
2
3
4
5
6
7
8
const tiger = "Tiger";
let name = undefined;
// && 연산자 falsy
name = name && tiger; // undefined && "Tiger"
console.log(name); // undefined
// || 연산자 truthy
name = name || tiger; // undefined || "Tiger"
console.log(name); // "Tiger"
논리할당 연산자는 논리연산자에서 할당기능까지 추가된 것이다.
1
2
3
4
5
6
7
8
const tiger = "Tiger";
let name = undefined;
// && 연산자 falsy 할당
name &&= tiger; // undefined && "Tiger"
console.log(name); // undefined
// || 연산자 truthy 할당
name ||= tiger; // undefined || "Tiger"
console.log(name); // "Tiger"