[JS] ES2021 새로 추가되는 기능

김창회·2021년 1월 18일
2
post-thumbnail
post-custom-banner

ES2021

replaceAll()

String.prototype.replaceAll 메서드는 지정한 모든 문자열을 특정 문자열의 값으로 변경합니다.

"Hi ! !"에 들어가 있는 띄어쓰기를 제거하는 로직을 구현한다고 예를 들어보겠습니다.
기존에는 replace 메서드를 활용했습니다.

ex

const sample = "Hi ! !"

console.log(sample.replace(" ", "")); // Hi! !

기존 방식은 정규태그식을 사용하지 않으면 딱 한번만 적용된다는 단점이 존재했습니다.
그런 단점을 replaceAll 메서드를 사용하면 해결할 수 있습니다.


console.log(sample.replaceAll(" ", "")); // Hi!!

이제 간단하게 지정한 모든 문자열을 바꾸고 싶을 때 사용해 모두 변경할 수 있습니다!

논리 할당 연산자

자바스크립트엔 연산자가 다양합니다.
+, -, = 와 같은 계산 연산자는 물론 ?, :, &&, || 등 논리 연산자도 구현되어 있죠.
이번 ES2021에서는 이런 논리 연산자를 간단하게 축약할 수 있도록 변했습니다.

밑의 예제와 같이 기존엔 이런 식으로 조건에 맞는 값을 할당할 수 있었습니다.


obj.prop = obj.prop || foo(); // obj.prop이 잘못된 값일 경우 할당
obj.prop = obj.prop && foo(); // obj.prop이 올바른 값일 경우 할당
obj.prop = obj.prop ?? foo(); // obj.prop이 null이나 undefined일 경우 할당

이제 새로운 연산자를 축약해 보도록 하겠습니다.


obj.prop ||= foo();
obj.prop &&= foo();
obj.prop ??= foo();

타입스크립트 4.0에 새롭게 추가된 기능인데, 자바스크립트에서도 새롭게 추가됐다고 합니다.

숫자 구분 기호

숫자에 _를 사용해 가독성을 향상시킬 수 있게 되었습니다.

const number = 10_000_000_000 // 100억

console.log(number); // 10000000000

그외 Promise.any()와 WeakRefs라는 기능도 추가되었으니
자세한 참고는 이곳을 참고하면 좋을 것 같습니다.

profile
프론트엔드 개발자
post-custom-banner

0개의 댓글