JavaScriptでundefinedが返されるケースを初心者でもわかるように解説！nullとの違いも理解しよう

1. 変数を宣言しただけのケース

1. 変数を宣言しただけのケース

JavaScriptで変数を作っただけで値を代入していない場合、その変数を参照するとundefinedが返されます。これは初心者が最初に出会いやすいケースです。

let myVariable;
console.log(myVariable); // undefined

ここではmyVariableを宣言しましたが、まだ値を入れていないのでundefinedになります。

2. 関数で値を返さない場合

2. 関数で値を返さない場合

関数を作ったけれども、return文で値を返さなかった場合も、呼び出すとundefinedが返ってきます。

function greet() {
  console.log("こんにちは！");
}
let result = greet(); // 実際に呼び出す
console.log(result); // undefined

関数内で何も返していないので、JavaScriptが自動的にundefinedを返しています。

3. 存在しないオブジェクトのプロパティを参照した場合

3. 存在しないオブジェクトのプロパティを参照した場合

オブジェクトにまだ作られていないプロパティを参照するとundefinedになります。

const person = { name: "太郎" };
console.log(person.age); // undefined

ここではageプロパティは作っていないので、JavaScriptが値がないことを示すためにundefinedを返します。

4. 関数の引数が渡されなかった場合

4. 関数の引数が渡されなかった場合

関数に引数を渡さなかった場合、渡されなかった引数は自動的にundefinedになります。

function sayHello(name) {
  console.log("こんにちは、" + name);
}
sayHello(); // こんにちは、undefined

この場合、nameに値が渡されなかったのでundefinedが入ります。

5. 配列の存在しない要素を参照した場合

5. 配列の存在しない要素を参照した場合

配列のインデックスに存在しない番号を指定すると、値はundefinedになります。

const colors = ["赤", "青"];
console.log(colors[2]); // undefined

配列の2番目の要素は存在しないため、JavaScriptがundefinedを返します。

6. return文のないループ内でのundefined

6. return文のないループ内でのundefined

ループの中で値を返すことを期待しても、returnがない場合、結果はundefinedになります。

for (let i = 0; i < 3; i++) {
  console.log(i);
}
let loopResult = undefined;
console.log(loopResult); // undefined

この例ではループ自体は値を返さず、変数loopResultには値が設定されていないため、undefinedです。

7. deleteで削除したプロパティを参照した場合

7. deleteで削除したプロパティを参照した場合

オブジェクトのプロパティをdeleteで削除した場合、そのプロパティを参照するとundefinedになります。

const obj = { key: "value" };
delete obj.key;
console.log(obj.key); // undefined

削除されたプロパティは存在しないため、値はundefinedです。

8. nullとundefinedの違いを覚えよう

8. nullとundefinedの違いを覚えよう

最後にnullとの違いを整理しておきましょう。undefinedは値がまだ設定されていない状態、nullは開発者が意図的に「ここは空」と設定した状態です。

let a; // undefined
let b = null; // null
console.log(a); // undefined
console.log(b); // null

この違いを理解しておくと、バグを防ぐことができます。

9. undefinedが出ても焦らないために

9. undefinedが出ても焦らないために

JavaScriptでundefinedが返ってきても、慌てる必要はありません。上で紹介したように、変数の初期化忘れや存在しないプロパティ参照などが原因です。確認すべきは、どこで値が設定されていないかです。

let score;
if (score === undefined) {
  console.log("まだ値が設定されていません");
}

このようにチェックすることで、予期せぬundefinedによるエラーを防ぐことができます。

まとめ

まとめ

今回の記事では、JavaScriptでundefinedが返される様々なケースについて詳しく解説しました。初心者が最初に出会いやすい「変数を宣言しただけの場合」から、関数で値を返さない場合、存在しないオブジェクトのプロパティや配列の要素を参照した場合、関数の引数が渡されなかった場合、ループ内でのreturnなし、deleteで削除したプロパティの参照まで、順を追って確認しました。これらのケースはいずれも、JavaScriptが「まだ値が設定されていません」と教えてくれる仕組みであり、意図的に値を空にするnullとは明確に区別されます。

まとめると、undefinedが返る代表的なケースは以下の通りです。まず、変数を宣言しただけで値を入れていない場合は自動的にundefinedになります。次に、関数を呼び出したが値を返さない場合、JavaScriptは自動的にundefinedを返します。また、オブジェクトの存在しないプロパティや、配列の存在しない要素を参照した場合もundefinedになります。さらに、関数に引数を渡さなかった場合や、ループ内で値を返さない場合、そしてdeleteで削除されたプロパティも同様にundefinedが返されます。

JavaScriptではundefinedとnullの区別を理解することが重要です。undefinedは値が未定義であることを示し、nullは開発者が意図的に値が空であることを示すものです。これを正しく使い分けることで、予期せぬエラーやバグを防ぐことができます。また、undefinedが出た場合でも、変数やオブジェクト、関数の引数を確認すれば原因を特定できるので、焦らず冷静にコードを確認することが大切です。

以下のサンプルコードでは、undefinedの典型的なケースをまとめています。実際に動かして挙動を確認することで、理解がさらに深まります。

 // 変数宣言のみ let value; console.log(value); // undefined
// 関数が値を返さない場合
function sayHi() {
console.log("こんにちは");
}
let res = sayHi();
console.log(res); // undefined

// 存在しないオブジェクトのプロパティ
const obj = { name: "花子" };
console.log(obj.age); // undefined

// 配列の存在しない要素
const arr = ["赤", "青"];
console.log(arr[5]); // undefined

// 引数が渡されなかった場合
function greet(name) {
console.log("こんにちは、" + name);
}
greet(); // こんにちは、undefined

// deleteで削除したプロパティ
const data = { key: "値" };
delete data.key;
console.log(data.key); // undefined