이번에는 새로 추가된 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'
참조
b00032 | javaScript | 2020-12-01