[JavaScript] ES2021(ES21) 추가된 기능 살펴보기

1. String.prototype.replaceAll()

 

자바스크립트 내장 문자열 변경 메서드인 "String.prototype.replace()"는 처음 나오는 일치하는 문자열만 바꾸는 것이기 때문에 여러 가지로 불편했습니다.

내장 메서드로 지원을 하므로 더 이상 추가로 구현을 해서 사용하지 않아도 됩니다.

 

대부분 최신 웹 브라우저에서 이미 지원하고 있습니다.

 

console.log("문자열에서 여러번 나오는 문자열을 한꺼번에 변경할 수 있습니다.".replaceAll("문자열",""));

 

 

2. 논리 대입 연산자 &&=, ||=

이 두 연산자는 += 연산자처럼 앙 변의 값/변수를 || 또는 && 비교 연산한 결과를 왼쪽의 변수에 대입(=)하는 기능을 합니다.

 

자바스크립트는 빈 문자열 ""과, 숫자 0은 false가 됩니다.

 

||= 연산자

 

let str = "문자열1";
let bool = false;
console.log(str ||= "문자열"); // "문자열1"
str = "문자열1";
console.log(str ||= false); // "문자열1"
console.log(bool ||= true); // true
console.log(str ||= ""); // "문자열1"
str = "";
console.log(str ||= false); // false
console.log(str ||= true); // true
str = "";
console.log(str ||= "문자열2"); // "문자열2"

 

||= 연산자는 비교적 이해하기 쉽습니다. 왼쪽의 변수 항이 참에 해당하면 변수의 값이 유지되고, 거짓이면 오른쪽 값이 변수에 대입됩니다. 

 

주의할 점은 왼쪽 비교 항은 반드시 변수여야 합니다.

 

||=, &&= 연산자는 대입 연산자이기 때문에 왼쪽편에 결과 값을 대입할 수 있는 변수가 있어야 합니다.

다음과 같은 표현은 사용할 수 없습니다.

 

console.log("문자열" ||= str);

 

 

&&= 대입 연산자

양 변이 모두 참이면 오른쪽 항의 값이 변수에 대입됩니다. 나머지는 왼쪽 항 변수의 값이 유지됩니다.

 

let str = "문자열1";
let bool = true;

console.log(bool &&= "문자열"); // false
bool = true;
console.log(bool &&= "문자열3"); // "문자열3"
str = "문자열1";
console.log(str &&= "문자열2"); // "문자열2"
str = "";
console.log(str &&= ""); // 빈문자열

 

논리 AND 대입(&&=)으로 오른쪽 항의 값을 대입할 경우, 변수 타입과 오른쪽 항의 타입이 다르면 오른쪽 항의 타입으로 캐스팅됩니다.

 

let str = "문자열1"
console.log(str &&= true); // true

 

 

3. 숫자 구분자

1000000000과 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바(_)로 단위를 구분해줄 수 있습니다.

1_000_000_000과 같이 천 단위로 끊어서 표기를 하는 것이 가능하기 때문에 0의 개수를 일일이 세어 볼 필요 없이 10억이라는 숫자를 빨리 알 수 있습니다.

 

숫자로 처리되기 때문에 연산도 가능합니다.

 

 

console.log(1_000_000_000 + 10_000);
console.log(1_00_00_00 + 10_0);

 

 

 

 

 

 

• 참고

자바스크립트 ES2021(ES12)에서 추가된 5가지 주요 기능들