😃 안녕하세요. 휴먼스케이프 loowin입니다. 😃
오늘은 ES2021 / ES21에 새로 선보인 자바스크립트 기능 5가지에 대해 알아보겠습니다. (ES21는 2021년 6월에 릴리즈 될 예정입니다. )
ES21에 추가되는 기능은 5가지가 있습니다.
1. String.prototype.replaceAll()
replaceAll을 통해 문자/단어를 간단히 변경할 수 있습니다.
기존의 문자열을 변경하기 위해 많이 쓰이는 방법으로는
const queryString = 'q=query+string+parameters';
const withSpaces = queryString.split('+').join(' ');하나의 문자/단어를 변경할때에는 String.prototype.replace() 쓰지만 위와 같은 방법을 대체로 많이 사용합니다. 하지만 이 방법은 문자열을 부분 배열로 분할하고 다시 붙이는 과정에서 오버헤드를 동반합니다.
const queryString = 'q=query+string+parameters';
const withSpaces = queryString.replaceAll('+', ' ');이제 replaceAll을 사용하면 간단히 변경 할 수 있습니다.
String.prototype.replaceAll(searchValue, replaceValue)
ex) humxnscxpe.replaceAll('x', 'a'); // humanscape
2. Promise.any()
새로운 Promise 방식 Promise.any()가 추가되었습니다. Promise.all()과 사용법은 비슷하나 Promise.All()은 모든 resolve 값을 반환해 주는것과 다르게 Promise.any()는 먼저 resolve된 값을 반환해 줍니다. 예시를 통해 차이점을 확인해 보겠습니다.
const promise1 = new Promise((resolve) => setTimeout(resolve, 300, 'soso'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output: Array ["soso", "quick", "slow"]
Promise.all()같은 경우는 1,2,3의 반환값이 순서대로 [“soso”, “quick”, “slow”]배열로 출력이 됩니다.
const promise1 = new Promise((resolve) => setTimeout(resolve, 300, 'soso'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));const promises = [promise1, promise2, promise3];Promise.any(promises).then((value) => console.log(value));// expected output: "quick"
Promise.any()같은 경우는 가장 빠르게 해결된 “quick” 출력이 됩니다.
3. WeakRef
WeakRef는 약한 참조(Weak References)를 의미합니다. 캐시 또는 매핑을 저장하는데 오랜 시간 동안 메모리에 유지하고 싶지 않은 경우에 많이 사용합니다. 해당 객체가 일반참조가 없고 약한 참조만 있다면 가비지 컬렉터가 객체를 파괴하고 메모리를 회수 할 수 있습니다.
let common = {
name: 'common',
};
const commonWeakRef = new WeakRef(common);
const printName = () => {
console.log(commonWeakRef.deref().name);
// deref()약한 참조를 읽는 메서드
};
common = null;
setInterval(printName, 3000);commonWeakRef에 common 객체를 약한 참조하였습니다. 그 후에 common을 null로 바꿔 일반 참조를 없앤 후 commonWeakRef의 약한참조 되어있는 name을 출력해 보았습니다. 처음에는 name이 잘 출력 되다가 메모리에서 회수 된 후 에러가 출력하는 것을 확인할 수 있습니다.
WeakRef가 일부 경우에 유용 할 수 있지만 가비지 콜렉션 발생시기, 방법 및 여부는 주어진 JavaScript 엔진의 버전이나 동일한 버전에서도 다른 상황들이 발생할 수 있기에 가능하면 WeakRef 사용을 피할 것을 권장한다고 합니다.
4. Logical Assignment Operators
+= -= *= /=와 비슷한 &&= ||= ??=새로운 연산자가 추가 되었습니다.
예시를 통해 조금 더 자세히 설명드리겠습니다.
And and equals (&&=)
a &&= b;
a && (a = b);ex)
let a = 10;
let b = 15;
a &&= b; // a는 15if (a) {
a = b;
} // a는 15
a가 truthy면 a에 b가 할당됩니다. 그렇지 않으면(a가 falsy)이면 아무 작업도 수행되지 않습니다.
Or or equals (||=)
a ||= b;
a || (a = b);ex)
let a = null;
let b = 15;a ||= b; // a는 15if (!a) {
a = b;
} // a는 15
a가 falsy면 a에 b가 할당됩니다. 그렇지 않으면(a가 truthy)이면 아무 작업도 수행되지 않습니다.
Question question equals (??=)
a ??= b;
a ?? (a = b);ex)
let a = null;
let b = 15;a ??= b; // a는 15if (a == null || a == undefined) {
a = b;
} // a는 15
a가 null, undefined면 a에 b가 할당됩니다. 그렇지 않으면(a가 truthy)이면 아무 작업도 수행되지 않습니다.
5. Numeric Separators
Numeric Separators를 통해 숫자 그룹을 시각적으로 구분하여 숫자 리터럴을 더 읽기 쉽게 만들 수 있습니다. 특히 긴 숫자가 반복되는 리터럴의 경우 빠르게 구문 분석하기 어려운데 Numeric Separators를 통해 정확한 값 / 크기 순서를 확인할 수 있습니다.
const AMOUNT = 12345678900;
const AMOUNT = 12_345_678_900;12,345,678,900 인 것을 한눈에 확인할 수 있습니다.
마무리
이상 ES2021 또는 ES21에 새로 선보인 자바스크립트 기능 5가지에 대해 알아보았습니다. 감사합니다.
[출처]
Walk with us!
기술이 세상을 더 아름답게 할 수 있다고 믿으신다면, 휴먼스케이프와 함께 소중한 뜻을 펼칠 수 있습니다.
함께 걸어가며 성장하실 분, 언제든지 연락해주세요 :)
