ES2021

1.언더바를 숫자에 사용할수있음

숫자를 더 쉽게 식별가능함

100_000_000 === 100000000 // true

2.replaceAll 메서드

일치하는 모든 문자열을 변경함

"👺👺😈😈👺👺😈😈".replaceAll("😈", "🔥"); // 👺👺🔥🔥👺👺🔥🔥

3.Promise.any()

가장 먼저 반환되는 resolve만 처리한다 (최초로 reject가 반환되면 무시)

Promise.race()와 비슷하지만 promise.race()는 최초로 reject가 반환되면 해당 reject를 처리함

// 1秒後に「reject」されるPromise
const promise1 = new Promise((resolve, reject) =>
  setTimeout(reject, 1000, "promise1")
);

// 2秒後にresolveするPromise
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 2000, "promise2")
);

// 3秒後にresolveするPromise
const promise3 = new Promise((resolve) =>
  setTimeout(resolve, 3000, "promise3")
);

Promise.any([promise1, promise2, promise3]).then((resolve) => {
  console.log(resolve);
});
// 결과 promise2가 반환된다. promise1가 반환은 빠르지만 reject라서 무시됨

4.연산자 추가

a ??= b

a의 값이 undefined나 null일 경우 b의 값을 대입함 (기존의 ES2020 의 nullish병합연산자와 비슷한 쓰임 )

const human = { name: "田中" };
human.age ??= 18; // hunan.ageはundefinedなので18が代入される
human.name ??= "鈴木"; // hunan.nameはnullではないので何も代入されない
console.log(human); // 結果: {name: "田中", age: 18}

a ||= b

a의 값이 falsy한 경우 b의 값을 대입한다 (falsy라 함은 0이나 false등을 가리킴)

let a = 0;
a ||= "🐈";
console.log(a); // 結果： "🐈"

let b = "🐷";
b ||= "🐈";
console.log(b); // 結果： "🐷"

아래와 같은 경우 사용이 가능한다

해당 요소안에 값이 없는 경우에 값이 없다라는 처리 가능(유용할듯..)

document.querySelector(".foo").innerHTML ||= "<p>値なし</p>";

a &&= b

a의 값이 truthy한 경우 b의 값을 대입한다 (truthy라 함은 1~이나 true등을 가리킴)

let a = null;
a &&= "🐈";
console.log(a); // 結果： null

let b = "🐷";
b &&= "🐈";
console.log(b); // 結果： "🐈"

let c = 1;
c &&= "🐈";
console.log(c); // 結果： "🐈"

let d = true;
d &&= "🐈";
console.log(d); // 結果： "🐈"

참조

https://zenn.dev/moneyforward/articles/es2021-whats-new