変数が「undefined」になる事例と対処方法

未定義の値「undefined」

JavaScriptは値が設定されていない変数やオブジェクトのプロパティを参照しようとすると「undefined」という値を返します。

undefinedはプリミティブ値の1つです。
似たような値に「null」や「' '（空文字列）」がありますが、この2つは変数の「空」という状態なのに対して、undefinedは存在しないという意味合いになります。

具体的には以下のようなケースで発生します。
3つの変数が登場しますが、変数aは値が未設定、変数bは配列、変数cはオブジェクトになっています。

JS コード例

let a;
let b = [ 'lion', 'dog', 'fox'];
let c = {
  id: 15001,
  name:'Taro'
};

console.log(a); // undefined（値が設定されていない）

console.log(b[2]); // 'fox'
console.log(b[3]); // undefined（存在しない要素を参照）

console.log(c.id); // 15001
console.log(c.age); // undefined（存在しないプロパティを参照）

変数aは変数の宣言のみで値を設定していないため、console.logメソッドで出力するとundefinedになります。

2つ目の変数bの配列についてはb[2]には値があるため文字列「fox」を出力しますが、b[3]という要素は存在しないためundefinedが出力されます。

3つ目の変数cに入っているオブジェクトは、プロパティ「id」は値があるため数値「15001」を出力しますが、プロパティ「age」は存在しないためundefinedが出力されています。

変数の値が「undefined」かどうか確認する

undefinedは値が存在しない場合に自動的に設定されますが、typeof演算子と比較演算子「===」を組み合わせて変数にundefined以外の値が入っているか、または変数自体が存在するかの確認をすることができます。

以下の例では宣言していない変数aに対してconsole.logメソッドによる出力をした後に、typeof演算子と比較演算子「===」を使って変数が存在しないこと、値が設定されていないことを確認した上で変数の初期化を行います。

JS コード例

console.log(a); // undefined（変数が存在しないため）
console.log(typeof a === 'undefined'); // true

if(typeof a === 'undefined') {

  // 変数の初期化
  let a = 1;
}

console.log(a); // 1

1行目のconsole.logメソッドは変数aを出力しようとしますが、変数自体が存在しないためundefinedが出力されます。

2行目では変数aに対してtypeof演算子で変数の値の型を取得します。
ここではまだ変数が存在しないためundefinedを取得しますが、比較演算子「===」で右側の「'undefined'」と等しいかチェックを行います。
また、undefinedは比較演算子でチェックするときは必ず「'（シングルクォーテーション）」で囲って文字列にする必要がある点に注意してください。

続くif文の条件式は2行目と全く同じ比較を実行します。
2行目でundefinedで比較した結果がtrueになることはすでに確認しているため、ここの条件式も同じ結果になり、if文の中の「let a = 1;」が実行されて変数aが初期化されます。

最後に、初期化された変数aの内容を出力して終了します。

こちらの例のように変数が存在するかをundefinedとの比較で確認し、初期化を行うようにすると変数や値が存在しないことによるエラーを防ぐことができます。