<div id="readability-page-1" class="page"><div data-astro-cid-4eu74nwj=""> <article data-astro-cid-4eu74nwj=""> <header data-astro-cid-4eu74nwj=""> <h2 data-astro-cid-4eu74nwj="">자바스크립트 ES2021 변경점 살펴보기</h2> <a href="/blog/tags/javascript" data-astro-cid-4eu74nwj="">javascript</a> <time datetime="2021-06-27" data-astro-cid-4eu74nwj="">2021-06-27</time> </header> <hr data-astro-cid-4eu74nwj=""> <section data-astro-cid-4eu74nwj=""> <blockquote>
<a href="https://www.ecma-international.org/news/ecma-international-approves-new-standards-4/" rel="noopener noreferrer" target="_blank">Ecma International approves new standards</a>
</blockquote>
6월, ES2021 정식 릴리즈 소식이 들려왔다.
스펙은 이미 알려져 있었으나 승인 시점에 글을 작성해보고자 하여 이제야 정리해 본다.
<h2 id="숫자-구분-기호-numeric-separator">숫자 구분 기호 Numeric separator</h2>
🔗 <a href="https://github.com/tc39/proposal-numeric-separator" rel="noopener noreferrer" target="_blank">Numeric separator 제안</a>
성능과 관계없이 big number를 보다 읽기 쉽게 하기 위한 표현이 추가되었다.
<pre tabindex="0" data-language="js"><code>// 이전
const num = 123456789;

// ES2021
// _ 만 추가하면 됨
const readableNum = 12_345_6789;</code></pre>
<h2 id="promiseany">Promise.any</h2>
🔗 <a href="https://github.com/tc39/proposal-promise-any" rel="noopener noreferrer" target="_blank">Promise.any 제안</a>
배열에 담은 여러 프로미스(비동기) 처리 중 하나라도 성공하면 성공 케이스로 이행하고 종료한다.
<pre tabindex="0" data-language="js"><code>const list = [
 fetch('https://www.google.co.kr/').then(() =&gt; 'google'),
 fetch('https://www.naver.com/').then(() =&gt; 'naver'),
 fetch('https://www.daum.net/').then(() =&gt; 'daum')
];

Promise.any(list)
 .then((first) =&gt; {
 // 가장 먼저 반환된 프로미스 결괏값
 console.log(first); // 'google'
 })
 .catch((error) =&gt; {
 // 모든 프로미스가 reject 됨
 console.log(error);
 });</code></pre>
<h2 id="weakrefs와-finalizers">WeakRefs와 Finalizers</h2>
🔗 <a href="https://github.com/tc39/proposal-weakrefs" rel="noopener noreferrer" target="_blank">WeakRefs와 Finalizers 제안</a>
자바스크립트에서 객체 참조는 강하게 유지된다. 이는 곧 객체에 대한 참조가 있는 한 가비지 컬렉션이 동작하지 않는다는 말이다.
하지만 이번에 추가된 WeakRef로 약한 참조를 만들 수 있게 되었고 큰 객체를 가지는 캐시 또는 맵핑에 사용하면 성능상의 이점을 누릴 수 있게 되었다.
<pre tabindex="0" data-language="js"><code>const foo = {
 name: "foo"
};

// 강한 참조
const x = foo;

// 약한 참조
const xWeak = new WeakRef(x);

// 값을 사용하기
const xWeakDeref = xWeak.deref(); // { name: "foo" }</code></pre>
Finalizers는 ES2021에서 추가된 또 다른 메모리 관련 기능으로 가비지 컬렉션이 될 때 콜백을 호출하도록 하는 기능이다.
(그러나 이 기능이 항상 제대로 작동한다는 보장은 없다.)
<pre tabindex="0" data-language="js"><code>let obj = [1, 2, 3, 4, 5];

// Finalizer 생성
const registry = new FinalizationRegistry((heldValue) =&gt; {
 // ...
});

// Finalizer에 obj 변수를 연결
registry.register(obj, "some value");

// 객체가 가비지 콜렉션 된 후에 Finalizer 콜백이 발생할 수 있음
obj = null;</code></pre>
<h2 id="stringprototypereplaceall">String.prototype.replaceAll</h2>
🔗 <a href="https://github.com/tc39/proposal-string-replaceall" rel="noopener noreferrer" target="_blank">String.prototype.replaceAll 제안</a>
기존 <code>String.prototype.replaceAll()</code>의 경우 정규식을 사용하여 지정한 모든 문자열을 변경할 수 있었는데 ES2021에선 정규식을 사용하지 않더라도 모든 문자열을 변경할 수 있게 되었다.
<pre tabindex="0" data-language="js"><code>const str = "우리 딸은 귀여워요. 딸을 보면 힘이 납니다.";

// 이전
str.replace(/\딸/g, "아들");

// 이전의 다른 방법
str.split("딸").join("아들");

// ES2021
str.replaceAll("딸", "아들");

// 우리 아들은 귀여워요. 아들을 보면 힘이 납니다.</code></pre>
<h2 id="논리-할당-연산자-logical-assignment">논리 할당 연산자 Logical assignment</h2>
🔗 <a href="https://github.com/tc39/proposal-logical-assignment" rel="noopener noreferrer" target="_blank">Logical assignment 제안</a>
논리 연산자와 할당 표현식을 결합한 논리 할당 연산자 3가지가 추가되었다.
<h3 id="logical-nullish">Logical Nullish</h3>
<pre tabindex="0" data-language="js"><code>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;
}</code></pre>
<h3 id="logical-or">Logical OR</h3>
<pre tabindex="0" data-language="js"><code>const temp = 2;

// OR
let or = 0;
or ||= temp; // 2

// 풀어 쓰기 1
or || (or = temp);
// 풀어 쓰기 2
if (!or) {
 or = temp;
}</code></pre>
<h3 id="logical-and">Logical AND</h3>
<pre tabindex="0" data-language="js"><code>const temp = 2;

// AND
let and = 1;
and &amp;&amp;= temp; // 2

// 풀어 쓰기 1
and &amp;&amp; (and = temp);
// 풀어 쓰기 2
if (and) {
 and = temp;
}</code></pre>
<h2 id="마치며">마치며</h2>
올해엔 큰 추가점이나 변경 사항은 없으며 논리 할당 연산자나 정규식이 필요 없는 replaceAll등 편의적인 부분이 향상되었다.
다음 ECMAScript인 ES2022를 기대하며 이만 글을 줄인다. </section> </article> <hr data-astro-cid-4eu74nwj=""> <nav data-astro-cid-4eu74nwj=""> </nav> </div></div>

lannex

Shin, SJ

자바스크립트 ES2021 변경점 살펴보기

ES2021에 추가된 새로운 기능

댓글