[JS] 알면 유용한 자바스크립트 최신 문법

Numeric Separators

---

숫자를 입력할 때 언더스코어 _를 이용해 숫자를 구분해서 가독성을 높일 수 있다. KRW 화폐처럼 자리수가 많은 숫자를 작성할 때 유용

const cost = 100_000_000;
console.log(cost); // 100000000

 

• _ 언더바 한개만 사용 가능 ex) 100__000 ❌
• 숫자 마지막엔 사용 불가 ex) 100_; ❌
• 가장 앞 숫자가 0일땐 사용 불가 ex) 0_1; ❌

 

replaceAll

---

replaceAll(substr, newSubstr)
replaceAll(substr, replacerFunction)

 

문자열에서 원하는 부분을 "모두" 지정한 문자로 변경할 수 있다. 정규식도 사용 가능.

const sayHello = 'Hello, John';
sayHello.replaceAll('John', 'Smith'); // Hello, Smith
sayHello.replaceAll('John', () => 'Smith'); // Hello, Smith

 

Exponentiation assignment (지수할당)

---

ES2016에 Math.pow()와 동일한 작업을 수행하는 ** 거듭제곱 연산자가 추가됐다.

2 ** 3; // 8
Math.pow(2, 3); // 8

 

거듭제곱 하려는 값이 여러개라면 가장 오른쪽부터 계산하는 특징이 있다.

 

💡 거듭제곱을 제외한 모든 산술 연산자는 좌(左) 결합성을 가진다. 거듭제곱, 할당 연산자, 삼항 연산자는 우(右) 결합성을 가진다. 두 연산자의 우선순위가 다르면 결합성과 상관없이 우선순위가 높은 연산자가 먼저 실행된다. 표현식의 평가 역시 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행된다.

 

• 좌결합성(왼쪽 → 오른쪽) : (a 연산자1 b) 연산자2 c
• 우결합성(오른쪽 → 왼쪽) : a 연산자1 (b 연산자2 c)

 

2 ** 3 ** 2; // 512
// 2 ** (3 ** 2)와 같음

 

거듭제곱 연산자는 등호 =와 함께 사용하여 새로운 값을 반환하도록 할 수도 있다.

let a = 1.5;
a **= 2;
// a = a * a와 같음

let b = 4;
b **= 3;
// b = b * b * b와 같음

 

Nullish coalescing operator (널 병합 연산자)

---

?? 왼쪽에 있는 값이 null 혹은 undefined면 ?? 오른쪽에 있는 값을 반환하고, 그렇지 않다면 왼쪽 값을 반환하는 논리 연산자.

const printMessage = (text) => {
  const message = text ?? 'RightExpression';
  console.log(message);
};

printMessage(undefined); // '**Right**Expression'
printMessage(null); // '**Right**Expression'
printMessage('LeftExpression'); // '**Left**Expression'
printMessage(''); // ''

 

왼쪽 값이 falsy이면(0 -0 '' NaN 등) 오른쪽 값을 반환하는 || OR 연산자와 다른점 주의.

 

 

Logical Assignment Operators (ES2021)

---

특정 변수의 참/거짓 여부에 따라 &&= ||= ??= 연산자로 원하는 값을 할당할 수 있다.

 

• &&= : 변수가 truthy일 때
• ||= : 변수가 falsy일 때
• ??= : 변수가 nullish(null | undefined) 일 때

 

변수가 truthy 일 때 &&=

// old JS
let a = 1;
if (a) {
  a = 2;
}

// new JS
let a = 1;
a &&= 2; // 변수 a가 true라면 2 할당

let a = 1;
let b = 0;

a &&= 2;
console.log(a); // 2 (변수 a가 true이므로 2 할당)

b &&= 2;
console.log(b); // 0 (변수 b가 true가 아니므로 값 변화 없음)

 

변수가 falsy 일 때 ||=

// old JS
let a = false;
if (!a) {
  a = true;
}

// new JS
let a = false;
a ||= true; // 변수 a가 false라면 true 할당

document.getElementById('lyrics').textContent ||= 'No lyrics.';
// #lyrics 엘리먼트의 콘텐츠가 빈문자열(false)이면 'No lyrics' 할당

const a = { duration: 50, title: '' };
a.duration ||= 10;
console.log(a.duration); // 50 (duration 속성이 false가 아니므로 값 변화 없음)

a.title ||= 'title is empty';
console.log(a.title); // title is empty (title 속성이 false이므로 값 업데이트)

 

변수가 nullish 일 때 ??=

// old JS
let a = undefined;
if (a === undefined) {
  a = 'hello';
}

// new JS
let a = undefined;
a ??= 'hello';

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요