ES2021에 추가된 새로운 기능
자바스크립트 ES2021 변경점 살펴보기
6월, ES2021 정식 릴리즈 소식이 들려왔다. 스펙은 이미 알려져 있었으나 승인 시점에 글을 작성해보고자 하여 이제야 정리해 본다.
숫자 구분 기호 Numeric separator
성능과 관계없이 big number를 보다 읽기 쉽게 하기 위한 표현이 추가되었다.
// 이전
const num = 123456789;
// ES2021
// _ 만 추가하면 됨
const readableNum = 12_345_6789;Promise.any
배열에 담은 여러 프로미스(비동기) 처리 중 하나라도 성공하면 성공 케이스로 이행하고 종료한다.
const list = [
fetch('https://www.google.co.kr/').then(() => 'google'),
fetch('https://www.naver.com/').then(() => 'naver'),
fetch('https://www.daum.net/').then(() => 'daum')
];
Promise.any(list)
.then((first) => {
// 가장 먼저 반환된 프로미스 결괏값
console.log(first); // 'google'
})
.catch((error) => {
// 모든 프로미스가 reject 됨
console.log(error);
});WeakRefs와 Finalizers
자바스크립트에서 객체 참조는 강하게 유지된다. 이는 곧 객체에 대한 참조가 있는 한 가비지 컬렉션이 동작하지 않는다는 말이다. 하지만 이번에 추가된 WeakRef로 약한 참조를 만들 수 있게 되었고 큰 객체를 가지는 캐시 또는 맵핑에 사용하면 성능상의 이점을 누릴 수 있게 되었다.
const foo = {
name: "foo"
};
// 강한 참조
const x = foo;
// 약한 참조
const xWeak = new WeakRef(x);
// 값을 사용하기
const xWeakDeref = xWeak.deref(); // { name: "foo" }Finalizers는 ES2021에서 추가된 또 다른 메모리 관련 기능으로 가비지 컬렉션이 될 때 콜백을 호출하도록 하는 기능이다. (그러나 이 기능이 항상 제대로 작동한다는 보장은 없다.)
let obj = [1, 2, 3, 4, 5];
// Finalizer 생성
const registry = new FinalizationRegistry((heldValue) => {
// ...
});
// Finalizer에 obj 변수를 연결
registry.register(obj, "some value");
// 객체가 가비지 콜렉션 된 후에 Finalizer 콜백이 발생할 수 있음
obj = null;String.prototype.replaceAll
🔗 String.prototype.replaceAll 제안
기존 String.prototype.replaceAll()의 경우 정규식을 사용하여 지정한 모든 문자열을 변경할 수 있었는데 ES2021에선 정규식을 사용하지 않더라도 모든 문자열을 변경할 수 있게 되었다.
const str = "우리 딸은 귀여워요. 딸을 보면 힘이 납니다.";
// 이전
str.replace(/\딸/g, "아들");
// 이전의 다른 방법
str.split("딸").join("아들");
// ES2021
str.replaceAll("딸", "아들");
// 우리 아들은 귀여워요. 아들을 보면 힘이 납니다.논리 할당 연산자 Logical assignment
논리 연산자와 할당 표현식을 결합한 논리 할당 연산자 3가지가 추가되었다.
Logical Nullish
const temp = 2;
// Nullish
let n1;
n1 ??= temp; // 2
let n2 = 1;
n2 ??= temp; // 1
// 풀어 쓰기 1
let n3;
n3 ?? (n3 = temp);
// 풀어 쓰기 2
if (n3 === null || typeof n3 === "undefined") {
n3 = temp;
}Logical OR
const temp = 2;
// OR
let or = 0;
or ||= temp; // 2
// 풀어 쓰기 1
or || (or = temp);
// 풀어 쓰기 2
if (!or) {
or = temp;
}Logical AND
const temp = 2;
// AND
let and = 1;
and &&= temp; // 2
// 풀어 쓰기 1
and && (and = temp);
// 풀어 쓰기 2
if (and) {
and = temp;
}마치며
올해엔 큰 추가점이나 변경 사항은 없으며 논리 할당 연산자나 정규식이 필요 없는 replaceAll등 편의적인 부분이 향상되었다. 다음 ECMAScript인 ES2022를 기대하며 이만 글을 줄인다.