ES2020の新しいJavaScript機能について学ぶ
序章
この記事では、最新のアップグレードである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
bigNum
のBigInt
値に2n
を掛けて、200000000000000000000000000000n
を生成します。
動的インポート
ユーティリティ関数のファイルがある場合、それらのすべてを使用できない可能性があり、それらの依存関係をインポートするとリソースが無駄になる可能性があります。 現在、 async / await には、必要に応じて依存関係をインポートするための追加機能が付属しています。
math.js
ファイルのユーティリティ関数の例を次に示します。
const add = (num1, num2) => num1 + num2;
export { add };
ユーティリティ関数を使用した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をアップグレードするたびに、新しい機能により、動的な機能、定義されたプロパティ、および開発者とコミュニティのフィードバックによるパフォーマンスの向上が追加されます。