序章

この記事では、最新のアップグレードであるES2020でリリースされた新しいJavaScript機能について学習します。 NullishCoalescingやOptionalChainOperatorsなどの機能は、JavaScript構文の定義に役立ちますが、DynamicImportはコードをモジュール化したままにします。

プライベートクラス変数

クラスには、再利用可能なモジュールに使用できるプロパティが含まれています。 これらのプロパティをさまざまなファイルで再利用する場合、すべてをグローバルに利用できるようにしたくない場合があります。

これを解決するために、プライベートクラス変数はクラス内で使用するためのプロパティとメソッドを予約します。 プロパティとメソッドの前にあるハッシュ記号は、プライベートクラス変数を示します。

class Message {
  #message = "Howdy";

  greet() { 
    console.log(this.#message); 
  };
}; 

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // #message is not defined

クラスの外部でgreetメソッドを呼び出すと、値が返されることに注意してください。 プライベートにされたプロパティのconsole.logはエラーを返します。

Promise.allSettled()

複数のPromiseを操作する場合、特にそれらが相互に依存している場合は、各プロセスをログに記録してエラーをデバッグすると便利な場合があります。

Promise.allSettled()を使用すると、引数が解決されたときに渡されたpromiseが返される新しいpromiseを作成できます。

const p1 = new Promise((res, rej) => setTimeout(res, 1000));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

これにより、各promiseのステータスと値を持つオブジェクトの配列が出力されます。

Output
[ Object { status: "fulfilled", value: undefined}, Object { status: "rejected", reason: undefined} ]

ここで、Promise.allSettled()は、p1およびp2プロミスのステータスと値を配列に提供します。

ヌル合体演算子

JavaScriptは大まかに型付けされているため、変数を割り当てるときは、真偽の値に注意してください。 データを含むオブジェクトがある場合は、空の文字列や数値0などの偽の値を許可することをお勧めします。

ヌル合体演算子(??)は、左のオペランドがnullまたはundefinedでない場合に、偽の値を識別して返します。

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

対照的に、OR演算子(||)は、左側が偽の場合、右側のオペランドを返すことに注意してください。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

代わりに、Nullish Coalescing Operatorは、nameプロパティとageプロパティのどちらもnullまたはundefinedではないため、偽の値を返します。

オプションの連鎖演算子

偽の値を操作する別の方法は、オプションの連鎖演算子(?.)を使用することです。 参照がnullの場合、オペレーターはオブジェクト内の未定義のプロパティにアクセスする方法を提供します。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
console.log(person?.profile?.name ?? "Anonymous"); // no error 
console.log(person?.profile?.age ?? 18); // no error

オプションの連鎖演算子を使用すると、エラーをスローする代わりに、undefinedと評価されるプロパティを操作できます。

注:オプションの連鎖とヌルの合体の詳細については、この投稿を参照してください。

BigInt

JavaScriptが処理できる最大数は2^53であり、これはプロパティMAX_SAFE_INTEGERで確認できます。

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

max変数の値を超える数値は、信頼性を維持できない可能性があります。

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

組み込みのBigIntオブジェクトを使用して、計算用の各整数の末尾にnを追加します。 BigIntの数値は、他のBigIntの数字でのみ計算できます。

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

bigNumBigInt値に2nを掛けて、200000000000000000000000000000nを生成します。

動的インポート

ユーティリティ関数のファイルがある場合、それらのすべてを使用できない可能性があり、それらの依存関係をインポートするとリソースが無駄になる可能性があります。 現在、 async / await には、必要に応じて依存関係をインポートするための追加機能が付属しています。

math.jsファイルのユーティリティ関数の例を次に示します。

math.js
const add = (num1, num2) => num1 + num2;

export { add };

ユーティリティ関数を使用したindex.jsファイルの例を次に示します。

index.js
const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

index.jsで、await式がmath.jsのインポートを処理し、ファイルに含まれるロジックを使用できるようになりました。

結論

JavaScriptをアップグレードするたびに、新しい機能により、動的機能、定義されたプロパティが追加され、開発者とコミュニティのフィードバックからパフォーマンスが向上します。