간단한 예제로 알아보는 자바스크립트 ES2021 기능
원글: https://medium.com/better-programming/javascript-es2021-features-with-simple-examples-ada723b55355
Unsplash의 Waldemar Brandt의 사진
오늘 우리는 2015년부터의 ECMAScript 기능을 살펴볼 것이다.
- ES2015 (ES6)
- ES2016 (ES7)
- ES2017 (ES8)
- ES2018 (ES9)
- ES2019 (ES10)
- ES2020 (ES11)
- ES2021 (ES12)
소개
ES2021은 2021년에 해당하는 ECMAScript 버전이다. 이 버전에 ES6(2015년)에 등장한 것만큼 새로운 기능이 많이 포함되진 않았지만 몇 가지 유용한 기능이 포함되었다.
이 글에서는 간단한 예제 코드와 함께 ES2021이 제공하는 기능을 소개한다. 예제를 통해 복잡한 설명없이 새 기능을 빠르게 이해할 수 있다.
물론, 소개하는 기능들을 완벽하게 이해하기 위해서는 자바스크립트에 대한 기본 지식이 필요하다.
ES2021의 새로운 자바스크립트 기능은 다음과 같다.
String.prototype.replaceAllPromise.anyWeakRef- 논리 할당 연산자
- 숫자 구분자
String.prototype.replaceAll
현재는 전역 정규식(/regexp/g)을 사용하지 않고서는 문자열에서 부분 문자열을 대체할 수 있는 방법은 없다.
const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replace(/\+/g, '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌새로 replaceAll 메서드가 String 프로토타입에 추가되었다.
const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replaceAll('+', '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌Promise.any
Promise.any는 프라미스 중 하나가 이행되는 즉시 응답을 준다. 프라미스들 중 하나가 거부 될 때 즉시 거부하지 않는다는 점을 제외하면 Promise.race와 비슷하다.
const myFetch = (url) => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
const promises = [myFetch('/endpoint-1'), myFetch('/endpoint-2'), myFetch('/endpoint-3')];
// .then .catch 사용
Promise.any(promises) // 프라미스 중 하나가 이행
.then(console.log) // 예를 들어 '3'
.catch(console.error); // 모든 프라미스들이 거부됨
// async-await 사용
try {
const first = await Promise.any(promises); // 프라미스 중 하나가 이행
console.log(first);
} catch (error) {
// 모든 프라미스들이 거부됨
console.log(error);
}WeakRef
WeakRef 제안에는 두가지 주요한 새 기능이 포함된다.
WeakRef클래스를 이용한 객체에 대한 약한 참조 만들기- 객체가 가비지 컬렉션된 후
FinalizationRegistry클래스를 사용하여 사용자 정의 종료자를 실행
이런 인터페이스는 사용되는 케이스에 따라 독립적으로 혹은 함께 사용할 수 있다.
WeakRef 객체에는 target 또는 referent라고 하는 객체에 대한 약한 참조가 포함된다. 객체에 대한 약한 참조는 가비지 컬렉터에서 객체를 회수하는 것을 방지하지 않는 참조이다.
주 용도는 큰 객체를 가지는 캐시 또는 맵핑을 구현하는 것이다. 여기서 큰 객체가 캐시나 매핑에 표시되기 때문에 단독으로 유지되지 않는 것이 좋다.
function toogle(element) {
const weakElement = new WeakRef(element);
let intervalId = null;
function toggle() {
const el = weakElement.deref();
if (!el) {
return clearInterval(intervalId);
}
const decoration = el.style.textDecoration;
const style = decoration === 'none' ? 'underline' : 'none';
el.style.textDecoration = style;
}
intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById('link');
toogle(element);
setTimeout(() => element.remove(), 10000);FinalizationRegistry는 레지스트리에 등록된 객체가 회수(가비지 컬렉션)될 때 정리 콜백(종료자)을 호출하도록 요청하는 방법을 제공한다.
콜백을 전달하는 registry를 만든다.
const registry = new FinalizationRegistry((heldValue) => {
// ....
});그 다음 register 메서드를 객체와 보유한 값과 함께 호출하여 정리 콜백을 원하는 객체를 등록한다.
registry.register(theObject, 'some value');논리 할당 연산자
논리 할당 연산자는 논리 연산자와 할당 표현식을 결합한다. 두가지 새로운 연산자가 있다.
- Or Or Equals
- And And Equals
// Or Or Equals
| a | b | a ||= b | a (연산 후) |
| true | true | true | true |
| true | false | true | true |
| false | true | true | true |
| false | false | false | false |
a ||= b
// 아래와 동일
a || (a = b);
// And And Equals
| a | b | a &&= b | a (연산 후) |
| true | true | true | true |
| true | false | false | false |
| false | true | false | false |
| false | false | false | false |
a &&= b
// 아래와 동일
a && (a = b);숫자 구분자
이 기능은 숫자를 시각적으로 구분하여 숫자 리터럴을 더 쉽게 읽을 수 있다.
밑줄(_, U+005F)을 구분자로 사용하여 숫자 리터럴의 가독성이 향상된다.
1_000_000_000; // 10억
101_475_938.38; // 수억
const amount = 12345_00; // 12,345 (정확히 1234500센트)
const amount = 123_4500; // 123.45 (4자리 고정)
const amount = 1_234_500; // 1,234,500
0.000_001; // 100만분의 1
1e10_000; // 10^10000 -- 덜 유용..
const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xa0_b0_c0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;결론
자바스크립트는 살아있는 언어이며 웹 개발에 매우 적합하다. 2015년 ES6가 등장한 이래로 우리는 활발하게 진화하는 언어의 시대에 살고있다. 이 글에서 ES2021에서 떠오르는 기능에 대해 살펴봤다.
이런 기능 중 많은 부분이 웹 어플리케이션을 개발하는데 필수적이지는 않을 수도 있지만, 트릭이나 장황한 코드를 통해서만 구현했던 부분에 대한 가능성을 제공한다.