変数チェックの落とし穴！JavaScriptでundefinedを見逃さない方法
2024-04-11
JavaScriptで未定義の変数をチェックする方法
厳密等価演算子（===）を使用する
var myVar;
console.log(myVar === undefined); // true
この方法は、変数が存在せず、未定義である場合にのみtrueを返します。
typeof演算子を使用する
var myVar;
console.log(typeof myVar === 'undefined'); // true
Optional Chaining（?.）演算子を使用する
const myObj = {};
console.log(myObj?.prop?.subProp); // undefined
Optional Chaining演算子は、プロパティが存在しない場合にundefinedを返すので、nullチェックと合わせて使用できます。
注意点
==演算子は、型変換を行うため、nullとundefinedも等価と判定されます。- 変数に
undefinedを代入した場合、typeof演算子は "undefined" を返します。
上記3つの方法を使い分けることで、状況に応じて未定義の変数をチェックすることができます。
// 厳密等価演算子（===）を使用する
var myVar;
console.log(myVar === undefined); // true
// typeof演算子を使用する
var myVar;
console.log(typeof myVar === 'undefined'); // true
// Optional Chaining（?.）演算子を使用する
const myObj = {};
console.log(myObj?.prop?.subProp); // undefined
// 変数にundefinedを代入した場合
var myVar = undefined;
console.log(typeof myVar); // 'undefined'
実行結果
true
true
undefined
undefined
補足
- 上記のコードは、ブラウザのコンソールやJavaScriptの実行環境で実行できます。
- コードを実行する前に、変数が宣言されていることを確認してください。
- 未定義の変数をチェックする方法は他にもあります。
- 状況に応じて適切な方法を選択してください。
未定義の変数をチェックするその他の方法
in演算子を使用する
var myVar;
console.log('myVar' in window); // false
in 演算子は、プロパティがオブジェクト内に存在するかどうかをチェックするために使用されます。この方法では、変数がグローバルスコープに存在するかどうかを確認できます。
try {
console.log(myVar);
} catch (e) {
console.log(e.message); // 'myVar is not defined'
}
try...catch ブロックは、コードの実行中にエラーが発生した場合に処理を行うために使用されます。この方法では、変数にアクセスしようとした際にエラーが発生するかどうかを確認できます。
デバッガーを使用する
ブラウザのデバッガーを使用すると、変数の値や型を確認することができます。デバッガーを使用することで、変数が未定義かどうかを簡単に確認できます。
javascript variables undefined
