DanLevy.net

クイズ: モダンJavaScriptは知ってる？

JavaScript の腕前を証明しよう！

ES2015 と ES2022、どっちが分かりますか？

1. 

ES2020

result の値は何ですか？

console.log(null ?? 100);

null 合体演算子（??）は、左側のオペランド（a）が null または undefined の場合、右側のオペランド（b）を返します。このケースでは a が null なので、result は 100 です。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

2. 

ES2020

次のコードの出力は何ですか？

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

null 合体演算子 (??) は false のような falsy 値を有効な値として扱います。value が false なので、有効な値とみなされそのまま返されます。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

3. 

オプショナルチェイニング

次のコードの出力は何ですか？

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

オプショナルチェイニング演算子（?.）は、左側が null または undefined の場合に評価を停止します。obj.foo が null なので、obj.foo?.bar は undefined となります。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

4. 

BigInt

次のコードの出力は何ですか？

const a = 42n;
const result = a * 2n;
console.log(result);

BigInt の値は数値の後ろに n を付けて作成します。算術演算では BigInt と通常の数値を混在させることはできません。ここでは両方の値が BigInt なので掛け算が可能で、結果は 84n になります。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

5. 

動的インポート

このコードは何をログに出しますか？

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

import() 関数はモジュールオブジェクトに解決する Promise を返します。Promise インスタンスはオブジェクトなので、typeof modulePromise は 'object' とログに出します。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

6. 

Promise.allSettled

次のコードの結果は何ですか？

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

Promise.allSettled は各 Promise の結果を記述したオブジェクトの配列を返します。最初の Promise は fulfilled で値 'success' を持つので、ログは fulfilled: success と出力します。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

7. 

String.matchAll

str.matchAll() は何を返しますか？

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

String.matchAll は配列ではなくマッチのイテレータを返します。このイテレータを使って文字列からすべてのマッチンググループを取得できます。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

8. 

Import Meta

import.meta.url は何を表しますか？

console.log(import.meta.url);

import.meta は現在のモジュールに関するメタデータを含むオブジェクトです。import.meta.url プロパティは現在のモジュールの URL を表し、スクリプトが実行されている場所の情報を取得するのに使えます。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

9. 

論理代入

論理代入の後、a の値は何ですか？

let a = null;
a ||= 10;
console.log(a);

論理 OR 代入（||=）は、左側の値が falsy（null、undefined、0、false など）の場合に右側の値を代入します。a は null なので、値 10 が代入されます。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

10. 

論理 Nullish 代入

nullish 代入の後、b の値は何ですか？

let b = null;
b ??= 10;
console.log(b);

nullish 合体代入 (??=) は左側の値が null または undefined の場合に右側の値を代入します。b は null なので、値 10 が代入されます。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

11. 

WeakRef

WeakRef は何を提供しますか？

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

WeakRef はオブジェクトへの弱参照を提供し、他に参照が無ければガベージコレクションの対象になります。ここでは obj がまだ強く参照されているので、deref() は元のオブジェクトを返します。対象が回収されていれば、deref() は undefined を返します。

演算子の正確な意味に注目してください。古い構文から予想される動作と、この機能の実際の動作は同じとは限りません。

Loading comments...