woolta

es2021(es12) 에서 추가된 것 살펴보기

javaScript | 2020-12-01

이번에는 새로 추가된 es2021 (es12)에서 적용된 기능들에 대해 몇가지를 살펴보려 합니다. 해당 기능들은 전부 크롬 v8 엔진에는 적용되어서 바로 사용하실 수 있습니다.
이번에 알아볼 것들은 다음과 같습니다.

replaceAll (String.prototype.replaceAll)
Numeric Separators
Promise.any
Logical Operators and Assignment Expressions
Intl.DateTimeFormat

replaceAll (String.prototype.replaceAll)

기존의 문자열을 변경하려 할때는 기본 제공되는 replace 메소드를 사용하여 변경할 수 있었습니다. 그러나 replace 는 다음과 같이 매칭되는 첫번째 요소만 반환하게 됩니다.

replace 예시

const a = '나는 자바스크립트를 좋아해 너도 혹시 자바스크립트를 좋아하니?';
const b = a.replace('자바스크립트','타입스크립트');
console.log(b); // result : '나는 타입스크립트를 좋아해 너도 혹시 자바스크립트를 좋아하니?'

위의 예시에서 자바스크립트 라는 단어를 전부 타입스크립트 로 변경하려면 정규식을 사용해 바꾸는것이 일반적이였습니다. 그러나 이번에 추가된 replaceAll 을 사용하면 정규식의 도움없이 한번에 처리가 가능해집니다.

replaceAll 예시

const a = '나는 자바스크립트를 좋아해 너도 혹시 자바스크립트를 좋아하니?';
const b = a.replaceAll('자바스크립트','타입스크립트');
console.log(b); // result : '나는 타입스크립트를 좋아해 너도 혹시 타입스크립트를 좋아하니?'

숫자 구분자 (Numeric Separators)

기존에는 number 타입을 지정할 경우 숫자가 길수록 한눈에 들어오지 않은 불편함이 있었는데 이제는 Numeric Separators 를 사용하여 좀더 명확하게 number의 값을 확인할수 있습니다.

const num = 123_456_789;
console.log(num); // result: 123456789

Promise.any

Promise.any 는 배열의 promise 를 받아서 해당 배열의 promise 중 가장 먼저 resolve 처리가 되는 promise를 반환 해주는 메소드 입니다. 이때 모든 promise가 실패할 경우는 모든 promise 가 실패하였다고 에러를 반환합니다. 이를 통해 여러 요소중 가장 빠른 값을 가져와 처리해야하는 상황에서 아주 유용하게 사용하실 수 있습니다. :)

성공 응답처리 예시

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 100, '성공응답 전 에러 발생')),
  new Promise((resolve, reject) => setTimeout(resolve, 1000, '가장빠른 성공응답')),
  new Promise((resolve, reject) => setTimeout(reject, 1500, '첫번째 성공 응답 후 에러 발생')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, '두번째 빠른 성공응답')),
  new Promise((resolve, reject) => setTimeout(resolve, 3000, '가장 느린 성공응답')),
])
.then(value => console.log(value))
.catch (err => console.log(err));

// 결과
// '가장빠른 성공응답'

모든 promise 실패 예시

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 100, '에러1')),
  new Promise((resolve, reject) => setTimeout(reject, 1500, '에러2')),
])
.then(value => console.log(value))
.catch (err => console.log(err));

// 결과 (에러 반환)
// 'Error: 'All promises were rejected''

Logical Operators and Assignment Expressions

Logical Operators and Assignment Expressions 연산자는 기존의 값을 할당하는 방법 중 한개인 &&, || 연산자를 통해 값을 할당하는 방법을 좀더 간편하게 사용하기 위해 만들어졌습니다. 빠른 이해를 위해 예제를 보며 설명하도록 하겠습니다.

Logical Operators and Assignment Expressions (&&)

 let oldName = 'oldPerson';
 let newName = 'newPerson';	

// -- if문을 통한 값 대입
 if(oldName) {
   oldName = newName;   
 }

// && 연산자를 활용한 값 대입 
oldName && (oldName = newName);

// Logical Operators and Assignment Expressions (&&) 를 통한 값 대입
oldName &&= newName

위와같이 좀더 간결하게 값을 대입하는게 가능해졌습니다. 물론 해당 문법은 개인적으로 호불호가 갈릴것 같은 문법이라고 생각됩니다. (저는 호 입니다. ㅎㅎ) 또힌 || 를 통한 예시는 다음과 같습니다.

Logical Operators and Assignment Expressions (||)

 let oldName;
 let newName = 'newPerson';	

// -- if문을 통한 값 대입
 if(!oldName) {
   oldName = newName;   
 }

// && 연산자를 활용한 값 대입 
oldName || (oldName = newName);

// Logical Operators and Assignment Expressions (||) 를 통한 값 대입
oldName ||= newName

Intl.DateTimeFormat

이제는 vanliaJS 로 코딩하며 날짜 포맷을 작성시 별도로 유틸을 구현하지 않아도 Intl.DateTimeFormat 를 사용하여 포맷을 지정할 수 있습니다. (정말 디테일한 포맷은 date-fns 등 유틸을 사용하시는게 유용합니다.) 또한 각 국가별 locale 설정 및 시간, 날짜에 대한 포맷 지정까지 옵션으로 설정할 수 있는 장점이 있습니다. :)

Intl.DateTimeFormat 을 통한 format 변경

// 한국 시간 short
let data = new Intl.DateTimeFormat('ko' , { timeStyle: 'short'});
console.log(data.format(Date.now()));
// '오후 12:52'


// 한국 시간 medium
data = new Intl.DateTimeFormat('ko' , { timeStyle: 'medium'});
console.log(data.format(Date.now()));
// '오후 12:52:41'


// 한국 시간 long
data = new Intl.DateTimeFormat('ko' , { timeStyle: 'long' });
console.log(data.format(Date.now()));
// '오후 12시 53분 13초 GMT+9'

// 한국 날짜 short
data = new Intl.DateTimeFormat('ko' , { dateStyle: 'short'});
console.log(data.format(Date.now()));
// '20. 12. 1.'

// 한국 날짜 medium
data = new Intl.DateTimeFormat('ko' , { dateStyle: 'medium'});
console.log(data.format(Date.now()));
// '2020. 12. 1.'


// 한국 날짜 long
data = new Intl.DateTimeFormat('ko' , { dateStyle: 'long'})
console.log(data.format(Date.now()));
// '2020년 12월 1일'

// 영어 시간은 medium, 날짜는 short
data = new Intl.DateTimeFormat('en' , { timeStyle: 'medium', dateStyle: 'short' });
console.log(data.format(Date.now()));
// '12/1/20, 12:54:53 PM'

참조

https://codeburst.io/exciting-features-of-javascript-es2021-es12-1de8adf6550b