[JS] ES2021에서 추가된 기능들

 

 

String.replaceAll : 전체 문자열에서 특정 문자를 설정한 문자로 바꿔준다.

const str1 = "Hello World";
console.log(str1.replace(/l/, "~")); // He~lo World
console.log(str1.replace(/l/g, "~")); // He~~o Wor~d
console.log(str1.replaceAll("l", "~")); // He~~o Wor~d

 

별로 차이가 없어보이지만 특수문자가 있을 땐 확실히 가독성이 좋아진다.

const str1 = "I'm [aoto]. This is Haru's [Car].";
console.log(str1.replace(/\[/g, "~").replace(/\]/g, "~"));
// I'm ~aoto~. This is Haru's ~Car~.
console.log(str1.replaceAll("[", "~").replaceAll("]", "~"));
// I'm ~aoto~. This is Haru's ~Car~.

 

 

Promise.any : Promise.race와 비슷한데,

race는 프로미스 중 가장 먼저 완료된 프로미스를 반환한다.

이행/거부 상관없이!

 

any는 프로미스 중 가장 먼저 이행된 프로미스를 반환한다.

const rejPromise = new Promise((res, rej) => {
  setTimeout(() => {
    rej("fail");
  }, 2000);
});

const resPromise = new Promise((res, rej) => {
  setTimeout(() => {
    res("success");
  }, 2000);
});

Promise.race([resPromise, rejPromise])
  .then(() => console.log("성공"))
  .catch((e) => console.log(e));

Promise.any([resPromise, rejPromise])
  .then(() => console.log("성공"))
  .catch((e) => console.log(e));

 

만약 모두 거부되면 catch가 실행된다.

Promise.any([rejPromise, rejPromise])
  .then(() => console.log("성공"))
  .catch((e) => console.log(e));

// AggregateError: All promises were rejected

 

 

논리 할당 연산자 Logical Assigmnet Operators

function add1(num1, num2) {
  console.log(num1 + num2);
}
add1(); // NaN

// 이 경우 기본 값을 주기 위해 아래처럼 작성한다.
function add2(num1, num2) {
  num1 = num1 || 0;
  num2 = num2 || 0;
  console.log(num1 + num2);
}
add2(); // 0

// 이렇게도 쓸 수 있다.
function add3(num1, num2) {
  num1 ||= 0;
  num2 ||= 0;
  console.log(num1 + num2);
}
add3(); // 0

// 아래처럼 생각하면 된다.
num = num + 1;
num += 1;

 

or 연산자 외의 경우

name = name && `hi ${name}`;
name &&= `hi ${name}`;

 

null 병합 연산자 null coalescing operator

name = name ?? "aoto";
name ??= "aoto";

name = name ?? "aoto";

표시한 부분이 null이거나 undefined일 때 "aoto" 실행

|| : 앞의 값이 falsy 이면 뒤의 값 실행

?? : 앞의 값이  null이거나 undefined일 때 뒤의 값 실행

let num = 0;
let a = num || 3;

console.log(a); // 3 => 0은 false이기 때문에 뒤의 값 반환

let b = num ?? 3;
console.log(b); // 0 => num이 null이나 undefined가 아니기 때문에 그대로 0 반환

 

 

숫자 구분자 Numeric Separators

: 숫자의 자릿수에 구분자를 넣을 수 있게 됐다. 가독성이 좋아짐!

// let billion = 1000000000; // 10억
let billion = 1_000_000_000; // ,이 아니라 _로 구분자

console.log(billion); // 1000000000

 

 

위크레프 (위크레퍼런스) WeakRef : 약한 참조, 신중히 사용하라(지양 권장).

 

자바스크립트에는 가비지 컬렉터가 있는데,

이는 사용하지 않는 객체를 메모리에서 해제해주는 작업을 자동으로 한다.

=> 참조가 되어있으면 메모리에서 제거되지 않는다.

 

그러나! 약한 참조는 가비지 컬렉터의 대상이 된다.

언제든지 가비지 컬렉터가 객체를 없애고 메모리를 회수할 수 있다.

let user = { name: "aoto", age: 30 };
const weakUser = new WeakRef(user);

user = null; // 참조를 끊어준다.

const timer = setInterval(() => {
  const wUser = weakUser.deref(); // 디레퍼런스 : 참조에 접근하기 위해 사용한다.
  if (wUser) {
    // wUser가 있다면
    console.log(wUser.name);
  } else {
    // 없다면
    console.log("제거되었습니다.");
    clearInterval(timer);
  }
}, 1000);

 

약한 참조기 때문에 특정 객체를 일정 시간만 캐시하는 방법으로도 사용 가능하다.

class MyCache {
  constructor() {
    this.cache = {};
  }

  add(key, obj) {
    // cache 객체에 key와 객체를 받아 넣어준다.
    this.cache[key] = new WeakRef(obj); // 넣어줄 때 WeakRef로 넣는 중
    // this.cache[key] = obj; // 이렇게 쓰면 강한 참조!
    // 강한 참조를 하면 전달해 준 객체가 사라진다 하더라도 (가비지된다 하더라도)
    // GC는 cache[key]를 수집대상으로 여기지 않아 사라지지 않는다.
    // 이런 문제를 방지하는게 약한 참조..
  }

  get(key) {
    // add로 넣어준 객체를 다시 읽을 때 쓴다.
    let cacheRef = this.cache[key].deref();
    if (cachedRef) {
      // if문으로 항상 확인해야 한다. 지워졌을 수도 있으므로.
      return cacheRef;
    } else {
      return false;
    }
  }
}

 

 

 

 

🔗 https://youtu.be/CvKSR94D0QE?si=8i6vyfJAmp7Wsvjs