【JavaScript】ES2021で使えるようになった機能

今更ながら、ES2021で使えるようになった JavaScript の新しい機能をさらっと振り返ります。

Numeric Separators

• 数値セパレータ
• 数値を_で区切れるようになった
• 数値の可読性を上げられる
• あくまで人間がみやすいようにするだけで、実体は _ が無い状態

10000 === 10_000 // true
100000000 === 100_000_000; // true

String.prototype.replaceAll

• 文字列全体に対して置き換えを行う
• 今までは正規表現で 「g」オプションでグローバルサーチを行っていたが不要になった

ES2021

'0120-123-4567'.replaceAll('-', ''); // 01201234567

2021以前

'0120-123-4567'.replace(/-/g, ''); // 01201234567

Promise.any

• 複数のPromiseを渡した時に、何かしらの値が resolve されるまで待ってくれる
• Promise.allは「全てのPromiseが成功したら」

const promise1 = Promise.reject(0);

const promise2 = new Promise((resolve, reject) =>
	setTimeout(resolve, 1000, 'quick')
);

const promise3 = new Promise((resolve, reject) =>
	setTimeout(resolve, 1500, 'slow')
);

// この場合、一番最初にresolveされる「promise2」のquickが返る
Promise.any([promise1, promise2, promise3])
	.then(resolve => console.log(resolve))
	.catch(reject => console.log(reject));

Logical Assignment Operators

• 変数への代入がよりシンプルになった
• 論理演算子 + 代入演算子

ES2021

// 例1：userName が「null」か「undefinded」なら、'test tarou' を代入する
userName ?? = 'test tarou';

// 例2：userName が falsy なら、'test tarou' を代入する
// !!(値) === false の時なので、「?? =」よりも広い範囲で使える
userName || = 'test tarou';

// 例3：userName が truthy なら、'override tarou' で上書きする
userName && = 'override tarou';

2021以前

// 例1：userName が「null」か「undefinded」なら、'test tarou' を代入する
userName = userName ?? 'test tarou';

// 例2：userName が falsy なら、'test tarou' を代入する
userName = userName || 'test tarou';

// 例3：userName が truthy なら、'override tarou' で上書きする
userName = userName && 'override tarou';

• 「??」は、ES2020で追加された「ヌル合体(Nullish Coalescing)演算子(??)」

ヌル合体(Nullish Coalescing)演算子 ?? を用いることで、値が undefined や null の時にデフォルト値を設定するといった処理を、下記の様に記述することが可能となります。

// 古い書き方(obj.fooが未設定の場合デフォルト値60を設定する)
if (typeof(obj.foo) == "undefined" || obj.foo == null) {
    obj.foo = 60;
}

// ES2020以降の新しい書き方
obj.foo = obj.foo ?? 60;

WeakRefs

• 弱参照が作れる
• 使うことがなさそう？なので今回は割愛

以上です。
お読み頂き有難うございました。