【超便利】JavaScriptのOptional ChainingとNullish Coalescing演算子で「undefined」をスマートに判定
2024-04-02
JavaScriptで「undefined」をチェックする方法
厳格等価演算子 (===) を使う
const variable = undefined;
// 厳格等価演算子 (===) を使って、変数が undefined かどうかをチェック
if (variable === undefined) {
console.log("変数は undefined です");
} else {
console.log("変数は undefined ではありません");
}
typeof 演算子を使う
const variable = undefined;
// typeof 演算子を使って、変数の型が "undefined" かどうかをチェック
if (typeof variable === "undefined") {
console.log("変数は undefined です");
} else {
console.log("変数は undefined ではありません");
}
Optional Chaining と Nullish Coalescing 演算子を使う
JavaScript ES2020以降では、Optional Chaining と Nullish Coalescing 演算子を使って、より簡潔に「undefined」をチェックできます。
const variable = undefined;
// Optional Chaining と Nullish Coalescing 演算子を使って、変数が undefined かどうかをチェック
const value = variable?.value ?? "デフォルト値";
console.log(value); // "デフォルト値"
上記の方法のいずれでも、「undefined」かどうかを正確に判定できます。 状況に応じて、使い慣れた方法や、最も読みやすい方法を選択してください。
その他の注意点
- 上記の例では、変数
variableが直接「undefined」に設定されています。 - 変数が存在しない場合も、
undefinedとなります。 - 変数が null の場合は、
undefinedではありません。
これらの点に注意して、「undefined」をチェックするようにしましょう。
const variable1 = undefined;
const variable2 = null;
const variable3 = 123;
// 厳格等価演算子 (===) を使って、変数が undefined かどうかをチェック
console.log(`variable1 === undefined: ${variable1 === undefined}`); // true
console.log(`variable2 === undefined: ${variable2 === undefined}`); // false
console.log(`variable3 === undefined: ${variable3 === undefined}`); // false
// typeof 演算子を使って、変数の型が "undefined" かどうかをチェック
console.log(`typeof variable1: ${typeof variable1}`); // "undefined"
console.log(`typeof variable2: ${typeof variable2}`); // "object"
console.log(`typeof variable3: ${typeof variable3}`); // "number"
// Optional Chaining と Nullish Coalescing 演算子を使って、変数が undefined かどうかをチェック
const value1 = variable1?.value ?? "デフォルト値";
const value2 = variable2?.value ?? "デフォルト値";
const value3 = variable3?.value ?? "デフォルト値";
console.log(`value1: ${value1}`); // "デフォルト値"
console.log(`value2: ${value2}`); // "デフォルト値"
console.log(`value3: ${value3}`); // 123
variable1 === undefined: true
variable2 === undefined: false
variable3 === undefined: false
typeof variable1: undefined
typeof variable2: object
typeof variable3: number
value1: デフォルト値
value2: デフォルト値
value3: 123
「undefined」をチェックする他の方法
in 演算子を使って、プロパティがオブジェクトに存在するかどうかをチェックできます。 オブジェクトのプロパティが存在しない場合、そのプロパティの値は undefined となります。
const obj = {};
// in 演算子を使って、プロパティが存在するかどうかをチェック
if ("name" in obj) {
console.log("オブジェクトには name プロパティがあります");
} else {
console.log("オブジェクトには name プロパティがありません");
}
Optional Chaining 演算子を使う
JavaScript ES2020以降では、Optional Chaining 演算子を使って、プロパティが存在するかどうかを安全にチェックできます。 プロパティが存在しない場合、undefined となります。
const obj = {};
// Optional Chaining 演算子を使って、プロパティが存在するかどうかをチェック
const name = obj?.name;
console.log(name); // undefined
Nullish Coalescing 演算子を使う
JavaScript ES2020以降では、Nullish Coalescing 演算子を使って、値が undefined または null の場合にデフォルト値を設定できます。
const obj = {};
// Nullish Coalescing 演算子を使って、デフォルト値を設定
const name = obj?.name ?? "デフォルトの名前";
console.log(name); // "デフォルトの名前"
注意事項
in演算子は、オブジェクトのプロパティのみをチェックできます。- Optional Chaining 演算子と Nullish Coalescing 演算子は、JavaScript ES2020以降でのみ使用できます。
javascript undefined
