String.replaceAll, Promise.any

개발 및 관리/Javascript 2022. 3. 22. 22:12 posted by HighLighter
반응형

// ES2021 자바스크립트에 추가된 새로운 기능들을 알아보자!

----------------------------------------------------------------------------------

console.clear();

// ES2021
// String.replaceAll

const str1 = "Hello World";
console.log(str1.replaceAll("l", "~"));

const str2 = "Hello World";
console.log(str2.replace(/l/, "~"));

const str3 = "Hello World";
console.log(str3.replace(/l/g, "~"));

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

----------------------------------------------------------------------------------

console.clear();

// ES2021
// Promise.any

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

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

// Promise.race : 프로미스 중에 가장 먼저 완료된 결과값으로 이행/거부 
Promise.race([rejPromise, resPromise])
  .then(() => console.log("성공"))
  .catch(e => console.log(e));

// Promise.any : 프로미스 중에 가장 먼저 이행된 객체 반환
Promise.any([rejPromise, resPromise])
  .then(() => console.log("성공"))
  .catch(e => console.log(e));

----------------------------------------------------------------------------------

function add(num1, num2){
  console.log(num1 + num2);
}

add(); //NaN

----------------------------------------------------------------------------------

function add(num1, num2){
  num1 = num1 || 0;
  num2 = num2 || 0;
  console.log(num1 + num2);
}

add(); // 0

----------------------------------------------------------------------------------

function add(num1, num2){
  num1 ||= 0;
  num2 ||= 0;
  console.log(num1 + num2);
}

add(); // 0

----------------------------------------------------------------------------------

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

name = name ?? "Mike"
name ??= "Mike"

// ?? Nullish coalescing operator : null 병합 연산자
|| : 앞의 값이 false이면 뒤의 값 반환
?? : 앞의 값이 null 이나 undefined이면 뒤의 값 반환

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

let b = num ?? 3;  // num이 null 혹은 undefined 일 때만 3
b // 0

----------------------------------------------------------------------------------

let billion = 1000000000 // 10억
let billion_bar = 1_000_000_000 // 10억
billion_bar

----------------------------------------------------------------------------------

// WeakRef = weak reference

// 가비지 컬렉터
// 약한 참조 = 가비지 컬렉터 대상

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

user = null;

const timer = setInterval(()=>{
  const wUser = weakUser.deref();  // deref 객체 참조
  if(wUser){
    console.log(wUser.name);
  } else {
    console.log('제거 되었습니다.');
    clearInterval(timer)
  }
}, 1000)

----------------------------------------------------------------------------------

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

  add(key, obj) {
    this.cache[key] = new WeakRef(obj)
  }

  get(key) {
    let cachedRef = this.cache[key].deref()
    if(cachedRef) {
       return cachedRef
    } else {
      return false;
    }
  }
}

----------------------------------------------------------------------------------






반응형

'개발 및 관리 > Javascript' 카테고리의 다른 글

자바스크립트 기본 문법  (0) 2022.04.02
JSON 사용법, JSON.stringify, JSON.parse  (0) 2022.03.24
Javascript Free Class  (0) 2022.03.22
Generator  (0) 2022.03.21
async, await  (0) 2022.03.21