ES2021 (ES12)에서 추가되는 기능들!

ES2021에서 추가된 기능들

1. String.prototype.replaceAll
2. Promise.any
3. WeakRef
4. Logical assignment operators
5. Numeric separators

ES12버전은 2021년 6월에 출시될 예정입니다.

stage-0 부터 stage-4까지 단계를 거쳐 채택되는데 아래 기능들은 stage-4에 채택된 기능들이며 Google Chrome V8 엔진에 적용되어 바로 사용 할 수 있습니다.

그러나 아직 최종적으로 브라우저 업데이트가 된것이 아니기 때문에 코드에 적용 하면 곤란해집니다 !

4 단계 목록은 tc39에서 확인 할 수 있습니다.

 

1. replaceAll (String.prototype.replaceAll)

기존에 문자열을 변경하기 위해서는 replace 메서드를 이용할 수 있었습니다.

replace 메서드는 문자열에서 변경하려는 문자열이 여러번 반복 될 경우에는 첫번째로 발견한 문자열만 치환해줍니다.

let 리플레이스 = '사과,감자,고구마,감자';
let 바꾼거 = 리플레이스.replace('감자','포테이토')
console.log(바꾼거) = 사과,포테이토,고구마,감자

//// replaceAll 없이 전역 변경하기
let 전역변경 = 리플레이스.replace(/감자/gi, '포테이토')
console.log(전역변경) = 사과,포테이토,고구마,포테이토

기존에는 전역으로 replace하기 위해서 정규식을 이용하여 문자열을 치환했지만 ES2021에서 추가 된 replaceAll을 이용하면 손쉽게 할 수 있다.

 

let 리플레이스올 = '사과,감자,고구마,감자';
let 바꾼거 = 리플레이스올.replaceAll('감자','포테이토')
console.log(바꾼거) = 사과,포테이토,고구마,포테이토

 

 

2. Promise.any

Promise.any는 하나라도 실행이 종료되면 실행된다는 점이 Promise.race와 비슷하지만 하나가 실패한다고 해서 종료되지 않는다는 차이점이 있다.

배열의 Promise를 받아 해당 배열의 Promise중 가장 먼저 resolve 처리가 되는 promise를 반환 해주며 모두 거절 되었을 때는 aggregateError를 리턴하는데, 배열 안에 모든 에러를 합쳐서 보여줍니다.

AggregateError MDN

 

 

const 프로미스 = new Promise((성공,거절) => setTimeout(거절, 2000, '첫번째'))
const 프로미스2 = new Promise((성공,거절) => setTimeout(거절, 1000, '두번째'))
const 프로미스3 = new Promise((성공,거절) => setTimeout(성공, 3000, '세번째'))
 
const 프로미스들 = [프로미스, 프로미스2, 프로미스3]
 
Promise.any(프로미스들).then((response) => console.log(response)).catch((error)=>console.log(error))
// "세번째"가 출력됩니다.
 
const 프로미스 = new Promise((성공,거절) => setTimeout(거절, 2000, '첫번째'))
const 프로미스2 = new Promise((성공,거절) => setTimeout(거절, 1000, '두번째'))
const 프로미스3 = new Promise((성공,거절) => setTimeout(거절, 3000, '세번째'))
 
const 프로미스들 = [프로미스, 프로미스2, 프로미스3]
 
Promise.any(프로미스들).then((response) => console.log(response)).catch((error)=>console.log(error))
// AggregateError: All promises were rejected가 출력됩니다.
// console.log(error.errors)를 찍으면 배열 확인 해볼수 있습니다.
// ["첫번째", "두번째", "세번째"]가 출력됩니다

 

3. WeakRef

아 요거는 무슨말인지 이해하기 어려웠습니다.

 

WeakRef는 약한 참조를 의미합니다.

약한 참조의 주요 용도는 드물게 사용되는 캐시등에 오랜 시간 동안 메모리를 유지하고 싶지 않을때 사용합니다.

 

자바스크립트는 값을 선언할 때 자동으로 메모리를 할당합니다.

메모리가 할당 된 변수를 사용하면 읽기와 쓰기 작업이 이루어지며,

C언어와 같은 저수준 언어에서는 메모리가 필요 없어 질 때 개발자가 명시적으로 메모리를 해제 해야하지만 자바스크립트와 같은 고수준 언어는 가비지컬렉터라는 자동 메모리 관리 방법을 사용합니다.

자바스크립트에서 객체는 항상 강하게 참조되어있습니다.

이 말은 참조하고 있는 객체가 존재하는 이상은 절대로 메모리내에서 가비지컬렉팅이 되지 않는다는 것입니다.

 

const 덧셈 = () =>{
    const a = 1;
    const b = 2;   
    const sum = a + b;
    return sum;
}

 

위의 예시로 생명주기를 이야기하면 덧셈() 함수를 실행하면 함수 내부의 지역변수 a,b,sum이 생성 되는 동시에 변수의 값을 저장할 메모리가 할당 됩니다

함수를 실행하면서 생성된 지역 변수를 사용하고 지역 변수는 함수 내에서만 존재 하므로 함수가 종료되면 지역변수 a,b,sum은 필요하지 않기 때문에 해당 변수에 할당 되었던 메모리를 회수합니다.

 

WeakRef를 사용하면 일반 참조가 아닌 약한 참조가 되기 때문에 해당 객체에 일반 참조가 없다면 카비지 컬렉터가 자동으로 해당 객체를 메모리를 해제 합니다.

 

let 직원정보 = {
  이름: '이종혁',
};
 
const 직원정보약한참조 = new WeakRef(직원정보);
 
const 이름출력 = () => {
  console.log(직원정보약한참조.deref().이름);
};
 
직원정보 = null;
 
setInterval(이름출력, 1000);

 

WeakRef의 사용 예시 코드를 작성했습니다.

직원정보라는 변수에 {이름:'이종혁' } 이라는 객체를 생성하고 직원정보약한참조라는 변수에 WeekRef를 사용해 약한 참조로 설정했습니다.

이름 출력이라는 함수에서 약한참조의 '이름' 프로퍼티를 출력하도록 했습니다.

deref()는 WeakRef의 약한 참조를 읽는 메서드입니다.

직원정보에 null 값을 할당해 일반 참조를 없애주고 setInterval을 이용해 1초에 한번씩 이름출력 함수를 실행하도록 했습니다.

 

결과

가비지 컬렉터가 메모리에서 지우기까지 시간이 걸리기 때문에 52번째 출력까지는 메모리에 남아있다가 53번째 출력때 제거가 되었습니다.

but .......... 가비지 컬렉터가 작동하는 타이밍, 방법,실행여부등은 자바스크립트 엔진 구현에 따라 달라지기 때문에 WeakRef MDN문서에서는 가능한 WeakRef 사용을 피하라고 언급되어 있습니다.

 

4. Logical assignment operators

논리 연산자와 할당 표현식을 결합해 논리적 할당 연산자라고 합니다.

let a = 5;
let b = 50;
 
// 기존
a && ( a = b ) // a가 참일 경우 (not undefined) b값이 a에 할당 된다. console.log(a) => 50
// 추가
a &&= b //  console.log(a) => 50
 
//
let a
let b = 50;
// 기존
a || ( a = b) // a가 거짓일 경우 b값이 a에 할당 된다. console.log(a) => 50
//추가
a ||= b // console.log(a)=> 50
 
//
let a
let b = 50;
//기존
a ?? ( a = b ) // a가 null이나 undefined일 경우 b값이 a에 할당 됩니다. console.log(a) => 50
//추가
a ??= b // console.log(a) => 50

 

위와 같이 축약하여 사용 할 수 있습니다.

 

5. Numeric separators

숫자 구분 기호 입니다.

숫자는 천 단위로 콤마를 찍어 육안으로 숫자를 빠르게 확인 할 수 있게 합니다.st

자바스크립트에서는 콤마를 사용 할 수 없었지만 숫자 구분값으로 underscore가 추가 되었습니다.

const 월급 = 100000000
const 응아니야 = 100_000_000
console.log(월급===응아니야) => true

여기까지 es12에 추가 될 5가지 기능에 대해 알아보았습니다.

이 기능에 대해 알아보며 ECMAScript와 TC39 ECMA-262등에 대해 궁금증이 생겨 찾아보던중  ECMAScript에 대해 잘 정리 된 글이 있어 공유합니다 ! 아래 링크에서 확인 해보세요!

ECMAScript와 TC39