JavaScriptでundefinedを調べる方法
JavaScriptにおいて、「undefined」は変数が宣言されているが値が割り当てられていない場合の値です。この状態をチェックする方法は主に2つあります。
typeof演算子を使う
typeof演算子は変数のデータ型を文字列で返します。もし変数が「undefined」であれば、typeof演算子は"undefined"を返します。
let x; // 変数の宣言のみ
if (typeof x === "undefined") {
console.log("xはundefinedです");
}
undefinedと直接比較する
JavaScriptには特別な値としてundefinedが存在します。この値と厳密等価演算子（===）を使って比較することができます。
let y; // 変数の宣言のみ
if (y === undefined) {
console.log("yはundefinedです");
}
注意
undefinedと直接比較する方法は、変数が宣言されている場合のみ有効です。typeof演算子は変数が宣言されていない場合にも"undefined"を返します。
どちらの方法を使うべきか
一般的には、typeof演算子を使う方が安全です。なぜなら、変数が宣言されていない場合にもチェックできるからです。しかし、変数が必ず宣言されていることがわかっている場合は、undefinedと直接比較する方が簡潔です。
例
function checkValue(value) {
if (typeof value === "undefined") {
console.log("値はundefinedです");
} else {
console.log("値は:", value);
}
}
この関数は、渡された値が「undefined」かどうかをチェックし、適切なメッセージを出力します。
- 例:
- 注意:
- この状態をチェックする方法は主に2つあります。
typeof演算子を使った例
let x; // 変数xは宣言されているが、値は割り当てられていない
if (typeof x === "undefined") {
console.log("xはundefinedです");
} else {
console.log("xの値は:", x);
}
- それ以外の場合、xの値を出力します。
- 条件が真の場合、"xはundefinedです"と出力します。
typeof x === "undefined"でxのデータ型が"undefined"かどうかチェックします。let x;で変数xを宣言していますが、値は何も割り当てられていません。
let y; // 変数yは宣言されているが、値は割り当てられていない
if (y === undefined) {
console.log("yはundefinedです");
} else {
console.log("yの値は:", y);
}
y === undefinedでyが厳密にundefinedと等しいかどうかチェックします。
関数を使った例
function checkValue(value) {
if (typeof value === "undefined") {
console.log("値はundefinedです");
} else {
console.log("値は:", value);
}
}
checkValue(someVariable); // someVariableの値によって結果が変わる
- 関数内に渡された値
valueがundefinedかどうかをチェックします。 checkValueという関数が定義されています。
オプショナルチェイニング（Optional Chaining）
JavaScriptのES2020から導入されたオプショナルチェイニングは、オブジェクトのプロパティにアクセスする際に、プロパティが存在しない場合にエラーが発生するのを防ぎます。また、undefinedのチェックにも利用できます。
let person = { name: "John" };
let address = person?.address?.street; // addressまたはstreetが存在しない場合、addressはundefinedになります
if (address === undefined) {
console.log("住所は未設定です");
}
nullish 合併演算子（Nullish Coalescing Operator）
ES2020から導入されたnullish 合併演算子（??）は、左側のオペランドがnullまたはundefinedの場合に右側のオペランドを返します。
let value = undefined;
let result = value ?? "デフォルト値"; // resultは"デフォルト値"になります
論理演算子（&&）
論理演算子&&は、左側のオペランドが偽（false、0、空文字列、null、undefined）の場合、右側のオペランドを評価しません。
let something;
let result = something && "何かが存在する場合の値"; // somethingがundefinedなので、resultはundefinedになります
三項演算子
三項演算子を使って条件分岐を行うこともできます。
let x;
let result = x !== undefined ? x : "デフォルト値";
カスタム関数
特定の状況に合わせて、カスタム関数を作成することも可能です。
function isUndefined(value) {
return typeof value === "undefined";
}
- カスタム関数は、特定の要件に合わせて柔軟なチェックを行うことができます。
- 論理演算子と三項演算子は、条件分岐の簡略化に役立ちますが、複雑な条件には適さない場合があります。
- オプショナルチェイニングとnullish 合併演算子は、主にオブジェクトのプロパティアクセスやデフォルト値の設定に使用されます。
これらの方法を適切に使い分けることで、コードの可読性と効率性を向上させることができます。
- カスタム関数
- 三項演算子
- 論理演算子
- nullish 合併演算子
- オプショナルチェイニング
javascript undefined
